Uso
view: view_name {
dimension: field_name {
html: <img src="https://www.brettcase.com/
product_images/{{ value }}.jpg"/> ;;
}
}
|
Hierarquia
html |
Tipos de campo possíveis
Dimensão, grupo de dimensão, métrica
Aceita
Uma expressão HTML, possivelmente usando elementos de modelo Liquid, seguida por dois pontos e vírgula
|
Definição
O parâmetro html permite especificar o HTML que será contido por um campo.
Você também pode acessar os valores que normalmente estariam no campo usando variáveis do Liquid. Isso permite criar várias funções úteis, incluindo links para outros Looks relacionados, links para sites externos ou imagens.
A formatação HTML só é renderizada nas visualizações de gráfico tabela, tabela (legada) e valor único e nas dicas de visualização quando vários campos são combinados. Qualquer conteúdo interativo colocado na dica de ferramenta de um gráfico de mapa com o parâmetro html não vai estar acessível em painéis que usam a nova experiência de painel, mas estará em Looks, análises detalhadas e painéis legados.
Ao baixar conteúdo, a formatação HTML não é aplicada a formatos de download baseados em texto, como TXT, CSV, Excel ou JSON.
Usar HTML válido
Para evitar determinadas falhas de segurança, o Looker restringe quais tags e atributos HTML podem ser usados, bem como quais propriedades CSS. Consulte nossa página de documentação sobre higienização de HTML para mais detalhes.
Variáveis do Liquid
O parâmetro html é compatível com variáveis Liquid. Consulte a página de documentação Variáveis Liquid para saber como aproveitar ao máximo essas variáveis.
Exemplos
Confira alguns exemplos de como usar o parâmetro de campo html.
A formatação HTML só é renderizada em visualizações de tabela e de gráfico de valor único e em dicas de visualização quando vários campos são combinados. Qualquer conteúdo interativo colocado na dica de ferramenta de um gráfico de mapa com o parâmetro
htmlnão estará acessível nos painéis, mas estará nos Looks e nas análises detalhadas.
Outros exemplos de como usar HTML para personalizar a fonte e as cores dos valores de campo nas visualizações estão disponíveis nas páginas Personalização da formatação condicional e Personalização da dica de ferramenta de visualização do livro de receitas Aproveitar ao máximo as visualizações no Looker.
Como usar variáveis do Liquid no parâmetro html
Este exemplo mostra como a maioria das variáveis do Liquid apareceria em um parâmetro html. Considere uma definição de total_order_amount:
measure: total_order_amount {
type: sum
sql: ${order_amount} ;;
value_format: "0.00"
html:
<ul>
<li> value: {{ value }} </li>
<li> rendered_value: {{ rendered_value }} </li>
<li> linked_value: {{ linked_value }} </li>
<li> link: {{ link }} </li>
<li> model: {{ _model._name }} </li>
<li> view: {{ _view._name }} </li>
<li> explore: {{ _explore._name }} </li>
<li> field: {{ _field._name }} </li>
<li> dialect: {{ _dialect._name }} </li>
<li> access filter: {{ _access_filters['company.name'] }} </li>
<li> user attribute: {{ _user_attributes['region'] }} </li>
<li> query timezone: {{ _query._query_timezone }} </li>
<li> filters: {{ _filters['order.total_order_amount'] }} </li>
</ul> ;;
}
O valor da célula exibido para total_order_amount seria assim:
• value: 8521935 • rendered_value: 8,521,935.00 • linked_value: 8,521,935.00 • link: /explore/thelook/orders?fields=orders.order_amount&limit=500 • model: thelook • view: orders • explore: order_items • field: total_order_amount • dialect: mysql • access filter: altostrat.com • user attribute: northeast • query timezone: America/Los_Angeles • filters: NOT NULL
Formatar uma métrica condicionalmente
Formatar condicionalmente uma contagem de acordo com os valores dela:
measure: formatted_count {
type: count
html:
{% if value > 100 %}
<span style="color:darkgreen;">{{ rendered_value }}</span>
{% elsif value > 50 %}
<span style="color:goldenrod;">{{ rendered_value }}</span>
{% else %}
<span style="color:darkred;">{{ rendered_value }}</span>
{% endif %} ;;
}
Como analisar dados com o parâmetro html
A formatação HTML só é renderizada nas visualizações de gráfico tabela, tabela (legada) e valor único e nas dicas de visualização quando vários campos são combinados. Qualquer conteúdo interativo colocado na dica de ferramenta de um gráfico de mapa com o parâmetro
htmlnão vai estar acessível em painéis que usam a nova experiência de painel, mas estará em Looks, análises detalhadas e painéis legados.
Imagine que você tem um campo nos seus dados chamado status, que informa o status de cada pedido. Os valores possíveis para status são:
PaidShippedReturned
Ao analisar seus dados, talvez você queira ter uma cor de plano de fundo separada para cada status. Isso pode ser feito usando o HTML Liquid no parâmetro html: de uma dimensão. Isso seria algo parecido com:
dimension: status {
sql: ${TABLE}.status ;;
html: {% if value == 'Paid' %}
<p style="color: black; background-color: lightblue; font-size:100%; text-align:center">{{ rendered_value }}</p>
{% elsif value == 'Shipped' %}
<p style="color: black; background-color: lightgreen; font-size:100%; text-align:center">{{ rendered_value }}</p>
{% else %}
<p style="color: black; background-color: orange; font-size:100%; text-align:center">{{ rendered_value }}</p>
{% endif %}
;;
}
Na sua tabela, a cor de plano de fundo de cada célula varia de acordo com o valor do campo status. A cor de fundo será azul claro quando o valor for Pago, verde claro quando for Enviado e laranja quando o valor for qualquer outro. Por exemplo, se a tabela contiver o valor Retornada, a célula terá um plano de fundo laranja.
Você pode usar a mesma sintaxe para adicionar ícones ou imagens com base nos valores das células:
dimension: status {
sql: ${TABLE}.status ;;
html: {% if value == 'Shipped' or value == 'Complete' %}
<p><img src="https://findicons.com/files/icons/573/must_have/48/check.png" alt="" height="20" width="20">{{ rendered_value }}</p>
{% elsif value == 'Processing' %}
<p><img src="https://findicons.com/files/icons/1681/siena/128/clock_blue.png" alt="" height="20" width="20">{{ rendered_value }}</p>
{% else %}
<p><img src="https://findicons.com/files/icons/719/crystal_clear_actions/64/cancel.png" alt="" height="20" width="20">{{ rendered_value }}</p>
{% endif %}
;;
}
Na sua tabela, isso vai ficar assim:
| Status dos itens do pedido | Contagem de itens do pedido |
|---|---|
 Cancelado |
6.316 |
 Concluído |
232.791 |
 Processando |
809 |
| Devolvido |
2.354 |
| Enviado |
1.474 |
Gerando imagens de produtos
Confira um exemplo de como adicionar a imagem de um produto ao Looker usando uma tag <img> com base no ID do produto:
dimension: product_image {
sql: ${product_id} ;;
html: <img src="https://www.altostrat.com/product_images/{{ value }}.jpg" /> ;;
}
Manter links de detalhamento
Para manter os links de detalhamento ao formatar a saída usando o parâmetro html, inclua a tag HTML <a href="#drillmenu" target="_self">. Exemplo:
measure: count {
type: count
drill_fields: [detail*]
html:
<a href="#drillmenu" target="_self">
{% if value > 10000 %}
<span style="color:#42a338;">{{ rendered_value }}</span>
{% elsif value > 5000 %}
<span style="color:#ffb92e;">{{ rendered_value }}</span>
{% else %}
<span style="color:#fa4444;">{{ rendered_value }}</span>
{% endif %}
</a>;;
}