Usage

view: view_name {  dimension: field_name {    html:<img src="https://www.brettcase.com/          product_images/{{ value }}.jpg"/> ;;  }}

Definition

Thehtml parameter lets you specify the HTML that will be contained by a field.

You can also get access to the values that would typically be in the field by usingLiquid variables. This lets you create a number of useful functions, including links to other related Looks, links to external websites, or images.

HTML formatting only renders intable,table (legacy), andsingle value chart visualizations and in visualizationtooltips when multiple fields are combined. Any interactive content that is placed in amap chart's tooltip with thehtml parameter will not be accessible on dashboards that use thenew dashboard experience, although it will be accessible on Looks, Explores, andlegacy dashboards.

Whendownloading content, HTML formatting is not applied to text-based download formats, such as TXT, CSV, Excel, or JSON.

Using valid HTML

In order to prevent certain security exploits, Looker restricts which HTML tags and attributes may be used, as well as which CSS properties may be used. See ourHTML sanitization documentation page for more details.

Liquid variables

Thehtml parameter supports Liquid variables. See theLiquid variables documentation page for information about how to make full use of these variables.

Examples

Here are some examples for using thehtml field parameter.

HTML formatting only renders intable, andsingle value chart visualizations and in visualizationtooltips when multiple fields are combined. Any interactive content that is placed in amap chart's tooltip with thehtml parameter will not be accessible ondashboards, although it will be accessible on Looks and Explores.

Additional examples of how to use HTML to customize the font and colors of field values in visualizations are available on theConditional formatting customization page andVisualization tooltip customization page of theGetting the most out of visualizations in Looker cookbook.

Using Liquid variables in thehtml parameter

This example shows how most of the Liquid variables would appear in anhtml parameter. Consider atotal_order_amount definition:

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> ;;}

The cell value displayed fortotal_order_amount would look like this:

  • 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

Conditionally format a measure

Conditionally format a count according to its values:

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 %} ;;}

Exploring data with thehtml parameter

HTML formatting only renders intable,table (legacy), andsingle value chart visualizations and in visualizationtooltips when multiple fields are combined. Any interactive content that is placed in amap chart's tooltip with thehtml parameter will not be accessible on dashboards that use thenew dashboard experience, although it will be accessible on Looks, Explores, andlegacy dashboards.

Imagine you have a field in your data calledstatus, which gives the status of each order. The possible values forstatus are:

• Paid
• Shipped
• Returned

While exploring your data, you might want to have a separate background color for each status. This can be done usingLiquid html in thehtml: parameter of a dimension. This would look something like:

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 %};;}

In your table, the background color of each cell will vary depending on the value of thestatus field. The background color will be light blue when the value isPaid, light green when it isShipped, and orange when the value is anything else. For example, if your table contains a valueReturned, that cell will have an orange background.

You can use the same syntax to add icons or images based on cell values:

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 %};;}

In your table, this will look like:

Order Items Status	Order Items Count
Cancelled	6,316
Complete	232,791
Processing	809
Returned	2,354
Shipped	1,474

Generating product images

Here is an example of how to add the picture of a product into Looker using an<img> tag, based on the product's ID:

dimension: product_image {  sql: ${product_id} ;;  html: <img src="https://www.altostrat.com/product_images/{{ value }}.jpg" /> ;;}

Maintaining drill-down links

To maintaindrill-down links when you're formatting output using thehtml parameter, you can include the HTML tag<a href="#drillmenu" target="_self">. For example:

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>;;}