Customizable drop downs using the HTML <details> tag

Using the HTML <details> syntax it is possible to create drop down buttons that can display additional information relating to a specified grouping in Looker.

Say for example we wanted to display the total gross margin and create a drop down that showed the sales price and the purchase cost, by using the html field parameter with the <details> tag you can achieve the functionality shown below:

Here is the LookML required to create the drop down:

measure: total_gross_margin {
type: sum
value_format_name: usd
sql: ${gross_margin} ;;

html: <div style="width:100%; text-align: centre;"> <details>
<summary style="outline:none">{{ total_gross_margin._linked_value }}</summary>
Sale Price: {{ total_sales_price._linked_value }}
<br/>
Inventory Costs: {{ inventory_items.total_cost._linked_value }}

</details>
</div>;;
  }
13 Likes

What a cool pattern! Thanks for sharing, Marcus!

It is not working for me. can you help me?

Hi Aditi,

I think we covered this on chat today. Let us know anytime if you have any further question.

Best,

Hi @Marcus_O_Hanlon
It’s been almost a year now that at my company we’re using Looker.
There’s one thing that I believe is truly missing to enhance “dramatically” the UX.

Are you guys thinking about something similar around drop down measures but to be selected under the “filter” section ?

Hey Tovo, I’m a bit lost as to what you mean by that actually. Could you elaborate, maybe in a new topic in the Feature Requests section?

Just created :slight_smile: