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 medida
Acepta
Una expresión HTML, posiblemente con 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 tabla, tabla (heredada) y valor único, y en las sugerencias de visualización cuando se combinan varios campos. No se podrá acceder a ningún contenido interactivo que se coloque en la sugerencia 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 Exploraciones, las Vistas 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.
Cómo usar código HTML válido
Para evitar ciertos ataques 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 sanitizació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 Variables de Liquid para obtener información sobre cómo aprovechar al máximo estas variables.
Ejemplos
Estos son algunos ejemplos para usar el parámetro de campo html.
El formato HTML solo se renderiza en las visualizaciones de gráficos de tabla y de valor único, y en las sugerencias de visualización cuando se combinan varios campos. No se podrá acceder a ningún contenido interactivo que se coloque en la sugerencia de un gráfico de mapa con el parámetro
htmlen los paneles, aunque sí se podrá acceder a él en los Looks y las Exploraciones.
En las páginas Personalización del formato condicional y Personalización de la sugerencia de visualización del libro de recetas Aprovecha al máximo las visualizaciones en Looker, se encuentran 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 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
Aplicar formato condicional a una medida
Cómo aplicar 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 valor único, y en las sugerencias de visualización cuando se combinan varios campos. No se podrá acceder a ningún contenido interactivo que se coloque en la sugerencia 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 Exploraciones, las Vistas y los paneles heredados.
Imagina que tienes un campo en tus datos llamado status, que indica el estado de cada pedido. Los valores posibles de status son los siguientes:
PaidShippedReturned
Mientras exploras tus datos, es posible que desees tener un color de fondo independiente para cada estado. Esto se puede hacer con 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 Pagado, verde claro cuando sea Enviado 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 |
 Completar |
232,791 |
 Procesando |
809 |
| Devuelto |
2,354 |
| Enviado |
1,474 |
Genera imágenes de productos
A continuación, se muestra un ejemplo de cómo agregar la imagen de un producto en 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 exploración 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>;;
}