Conditional formatting of color or images within table cells using html

[lindsey1]

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.