Imagine you have a field in your data called status
, which gives the status of each order. The possible values for status
are:
Paid
Shipped
Returned
While Exploring your data, you might want to have a separate background color for each status. This can be done using liquid html in the html:
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, this will look like:
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="http://findicons.com/files/icons/573/must_have/48/check.png" height=20 width=20>{{ rendered_value }}</p>
{% elsif value == 'Processing' %}
<p><img src="http://findicons.com/files/icons/1681/siena/128/clock_blue.png" height=20 width=20>{{ rendered_value }}</p>
{% else %}
<p><img src="http://findicons.com/files/icons/719/crystal_clear_actions/64/cancel.png" height=20 width=20>{{ rendered_value }}</p>
{% endif %}
;;
}
In your table, this will look like:
Learn more about using liquid html in Looker here.