Uso
view: view_name {
dimension: field_name {
html: <img src="https://www.brettcase.com/
product_images/{{ value }}.jpg"/> ;;
}
}
|
Jerarquía
html |
Tipos de campos posibles
Dimensión, grupo de dimensiones y medición
Acepta
Una expresión HTML, posiblemente con elementos de plantilla de Liquid, seguida de dos puntos y coma
|
Definición
El parámetro html te permite especificar el código HTML que se incluirá en un campo.
También puedes acceder a los valores que normalmente estarían en el campo con las variables de Liquid. Esto te permite crear varias funciones útiles, como vínculos a otras vistas relacionadas, sitios web externos o imágenes.
El formato HTML solo se renderiza en las visualizaciones de gráficos de tabla, tabla (heredada), KPI (valor único) y valor único (heredado), y en las descripciones emergentes de visualización cuando se combinan varios campos. No se podrá acceder a ningún contenido interactivo que se coloque en la información sobre la herramienta de un gráfico de mapa con el parámetro html en los paneles que usen la nueva experiencia de panel, aunque sí se podrá acceder a él en las vistas, las exploraciones y los paneles heredados.
Cuando descargas contenido, el formato HTML no se aplica a los formatos de descarga basados en texto, como TXT, CSV, Excel o JSON.
Usa código HTML válido
Para evitar ciertos exploits de seguridad, Looker restringe las etiquetas HTML y los atributos que se pueden usar, así como las propiedades de CSS que se pueden usar. Consulta nuestra página de documentación sobre la limpieza de HTML para obtener más detalles.
Variables de Liquid
El parámetro html admite variables de Liquid. Consulta la página de documentación Variables de Liquid para obtener información sobre cómo aprovechar al máximo estas variables.
Ejemplos
Estos son algunos ejemplos de cómo usar el parámetro de campo html.
En las páginas Personalización del formato condicional y Personalización de la información sobre la herramienta de visualización de la guía Aprovecha al máximo las visualizaciones en Looker, se incluyen ejemplos adicionales de cómo usar HTML para personalizar la fuente y los colores de los valores de los campos en las visualizaciones.
Usa variables de Liquid en el parámetro html
En este ejemplo, se muestra cómo aparecería la mayoría de las variables de Liquid en un parámetro html. Considera una definición 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> ;;
}
El valor de la celda que se muestra para total_order_amount se vería de la siguiente manera:
• 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
Cómo aplicar formato condicional a una medición
Aplica un formato condicional a un recuento según sus valores:
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 %} ;;
}
Explora datos con el parámetro html
El formato HTML solo se renderiza en las visualizaciones de gráficos de tabla, tabla (heredada) y KPI (valor único), y en las descripciones emergentes de visualización cuando se combinan varios campos. No se podrá acceder a ningún contenido interactivo que se coloque en la información sobre la herramienta de un gráfico de mapa con el parámetro
htmlen los paneles que usen la nueva experiencia de panel, aunque sí se podrá acceder a él en las vistas, las exploraciones y los paneles heredados.
Imagina que tienes un campo en tus datos llamado status, que indica el estado de cada pedido. Los valores posibles para status son los siguientes:
PaidShippedReturned
Mientras exploras tus datos, es posible que quieras tener un color de fondo diferente para cada estado. Esto se puede hacer con el código HTML de Liquid en el parámetro html: de una dimensión. Se vería de la siguiente manera:
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 %}
;;
}
En tu tabla, el color de fondo de cada celda variará según el valor del campo status. El color de fondo será azul claro cuando el valor sea Paid, verde claro cuando sea Shipped y naranja cuando el valor sea cualquier otro. Por ejemplo, si tu tabla contiene el valor Devuelto, esa celda tendrá un fondo naranja.
Puedes usar la misma sintaxis para agregar íconos o imágenes según los valores de las celdas:
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 %}
;;
}
En tu tabla, se verá de la siguiente manera:
| Estado de los artículos del pedido | Recuento de artículos del pedido |
|---|---|
 Cancelado |
6,316 |
 Completado |
232,791 |
 Procesando |
809 |
| Devuelto |
2,354 |
| Enviado |
1,474 |
Generando imágenes de productos
Este es un ejemplo de cómo agregar la imagen de un producto a Looker con una etiqueta <img>, según el ID del producto:
dimension: product_image {
sql: ${product_id} ;;
html: <img src="https://www.altostrat.com/product_images/{{ value }}.jpg" /> ;;
}
Cómo mantener los vínculos de desglose
Para mantener los vínculos de desglose cuando formateas el resultado con el parámetro html, puedes incluir la etiqueta HTML <a href="#drillmenu" target="_self">. Por ejemplo:
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>;;
}