Uso
view: view_name {
dimension: field_name {
html: <img src="https://www.brettcase.com/
product_images/{{ value }}.jpg"/> ;;
}
}
|
Hierarquia
html |
Possíveis tipos de campo
Dimensão, grupo de dimensão, medida
Aceita
Uma expressão HTML, possivelmente usando elementos de modelo Liquid, seguida por dois pontos e vírgulas.
|
Definição
O parâmetro html permite especificar o HTML que será contido por um campo.
Também é possível acessar os valores que normalmente estariam no campo usando variáveis líquidas. Isso permite criar várias funções úteis, incluindo links para outros Looks relacionados, links para sites externos ou imagens.
A formatação HTML é renderizada apenas em visualizações de gráfico de tabela, tabela (legado), KPI (valor único) e valor único (legado) e em dicas de visualização quando vários campos são combinados. Qualquer conteúdo interativo colocado na dica de um gráfico de mapa com o parâmetro html não estará acessível em painéis que usam a nova experiência de painel, embora esteja acessível em Looks, Análises e painéis legados.
Ao fazer o download de conteúdo, a formatação HTML não é aplicada a formatos de download baseados em texto, como TXT, CSV, Excel ou JSON.
Usar um HTML válido
Para evitar determinados exploits de segurança, o Looker restringe quais tags HTML e atributos podem ser usados, bem como quais propriedades CSS podem ser usadas. Consulte nossa página de documentação sobre limpeza de HTML para mais detalhes.
Variáveis Liquid
O parâmetro html é compatível com variáveis líquidas. Consulte a página de documentação Variáveis líquidas para saber como usar essas variáveis.
Exemplos
Confira alguns exemplos de como usar o parâmetro de campo html.
Outros exemplos de como usar HTML para personalizar a fonte e as cores dos valores de campo em visualizações estão disponíveis nas páginas Personalização de formatação condicional e Personalização de dicas de visualização do manual Como aproveitar ao máximo as visualizações no Looker.
Como usar variáveis líquidas no parâmetro html
Este exemplo mostra como a maioria das variáveis líquidas 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 medição 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 é renderizada apenas em visualizações de gráfico de tabela, tabela (legado) e KPI (valor único) e em dicas de visualização quando vários campos são combinados. Qualquer conteúdo interativo colocado na dica de um gráfico de mapa com o parâmetro
htmlnão estará acessível em painéis que usam a nova experiência de painel, embora esteja acessível em Looks, Análises e painéis legados.
Imagine que você tem um campo nos seus dados chamado status, que mostra o status de cada pedido. Os valores possíveis para status são os seguintes:
PaidShippedReturned
Ao analisar seus dados, talvez você queira usar uma cor de plano de fundo diferente para cada status. Para isso, use o HTML do Liquid no parâmetro html: de uma dimensão. Seria algo parecido com isto:
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 tabela, a cor 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 tiver o valor Devolvido, essa 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 tabela, isso vai ficar assim:
| Status dos itens do pedido | Contagem de itens do pedido |
|---|---|
 Cancelado |
6.316 |
 Concluído |
232.791 |
 Processamento |
809 |
| Devolvido |
2.354 |
| Enviado |
1.474 |
Gerando imagens de produtos
Veja 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" /> ;;
}
Como 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>;;
}