Customizable drop downs using the HTML details tag

Userlevel 4

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 }}
Inventory Costs: {{ inventory_items.total_cost._linked_value }}


8 replies

Userlevel 2

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.


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 ?

Userlevel 7
Badge +1

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 🙂

Can I add a drop down like above in my dimension?