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, medida
Acepta
Una expresión HTML, que posiblemente use elementos de plantilla de Liquid, seguida de dos puntos y comas
|
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 tablas, tablas (heredadas) y valor único, y en las sugerencias de herramientas de visualización cuando se combinan varios campos. No se podrá acceder a ningún contenido interactivo que se coloque en la sugerencia de herramientas 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 se descarga 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 ciertas vulnerabilidades de seguridad, Looker restringe las etiquetas y los atributos HTML que se pueden usar, así como las propiedades CSS. Consulta nuestra página de documentación sobre la desinfección 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 sobre las variables de Liquid para obtener información sobre cómo aprovechar al máximo estas variables.
Ejemplos
A continuación, se muestran algunos ejemplos del uso del parámetro de campo html.
El formato HTML solo se renderiza en las visualizaciones de tablas y gráficos de un solo valor, y en las sugerencias de herramientas de visualización cuando se combinan varios campos. No se podrá acceder a ningún contenido interactivo que se coloque en la sugerencia de herramientas de un gráfico de mapa con el parámetro
htmlen los paneles, aunque sí se podrá acceder a él en las vistas y las exploraciones.
En las páginas de personalización del formato condicional y de personalización de la sugerencia de herramientas de visualización del libro de recetas Cómo aprovechar al máximo las visualizaciones en Looker, encontrarás 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ían 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 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
Aplica formato condicional a una medida
Aplica 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 tablas, tablas (heredadas) y valor único, y en las sugerencias de herramientas de visualización cuando se combinan varios campos. No se podrá acceder a ningún contenido interactivo que se coloque en la sugerencia de herramientas 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 Liquid HTML en el html: parámetro 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 un valor Returned, 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 |
|---|---|
 Canceladas |
6,316 |
 Completadas |
232,791 |
 Procesando |
809 |
| Devueltas |
2,354 |
| Enviadas |
1,474 |
Genera 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" /> ;;
}
Mantén los vínculos de detalles
Para mantener los vínculos de detalles cuando le das formato al 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>;;
}