Super Awesome Advanced Conditional Formatting Example - From JOIN session

[emma_ware]

In our JOIN session on Customizing Looker with Liquid, we shared an example of an advanced use case for conditional formatting.

In this example, a SINGLE measure can display multiple different measure values, all combined and arranged using Liquid and HTML. Liquid could be used to make dynamic favicons, customized background gradients, etc.

The code used can be found below, happy Lookering!

measure: custom_single_viz {
type: count
html: <div class="vis">
      <div class="vis-single-value" style="font-size:30px; background-image: linear-gradient(to right, #5A2FC2, #F84066); color:#ffffff">
      <font color="#5A2FC2"><center><b>Day of campaign:</b>&nbsp; {{events.day_of_campaign._rendered_value}} / 90 </font>
      <p><em>{{events.campaign_progress._rendered_value}}% of Goal</em></p>
      <p style="color:#ffffff;">{{ rendered_value }} Total Events </p>
      <p style="float:left; font-family: Trebuchet MS;">
      <i class="fa fa-facebook">&nbsp;</i> {{ events.count_events_facebook._rendered_value }} Events&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <i class="fa fa-search">&nbsp;</i> {{ events.count_events_search._rendered_value }} Events&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <i class="fa fa-leaf">&nbsp;</i> {{ events.count_events_organic._rendered_value }} Events</p></center>
      </div>
      </div>
   ;;

}
}