Swap dashboard tiles with extension framework

[la5rocks]

Just getting started with Extension Framework, and trying out the different samples. I’m in particular trying to gain performance advantages with custom filters and swapping tiles on dynamic dashboards as Daniel and Luka demonstrated in JOIN.

Any and all suggestions & links welcome.

[lukas_fontanill]

Hey @la5rocks ! I have an example extension that addresses different ways to leverage customer filters to influence the dashboard (either filtering, adjusting viz type, coloring of viz, hiding labels, etc.). This doesn’t include an example for swapping tiles however (don’t believe we have a template for this in our open source repo). Here is the repo - https://github.com/LukaFontanilla/dynamic-dashboard-control-extension

[la5rocks]

@lukas_fontanill I’m looking for swapping tiles in particular. Daniel Massarsky demoed this in JOIN, and I would love to learn how to do this!! He called it “Dynamic Tiles” and whether or not it’s actually loading new tiles, modifying the dashboard definition on the fly, or simply hiding/showing tiles what I’m craving is the net gain of not having to reload the whole dashboard iFrame to respond to user selections in the app.

[la5rocks]

@lukas_fontanill this looks promising, but I want to make changes to the onscreen objects, not the stored dashboard definition.

https://docs.looker.com/reference/api-and-integration/api-reference/v3.1/dashboard#update_dashboardl...

[lukas_fontanill]

@la5rocks ah I see, appreciate the additional context. The screenshot you had shared there looks like the atom fashion demo embed portal. The dynamic tile swatch from that demo to my understanding relies on javascript embed events and our embed sdk which we can use to manipulate the iframe to do things like swap the viz config, color theme, dashboard layout all without modifying the stored dashboard definition. 

This is most straightforward when using our embed sdk (https://github.com/looker-open-source/embed-sdk), specifically there is a .then() callback method that we can pass a function to store the state of the current dashboard (tile layout, viz configs, filters, themes, etc.) which we can then programmatically update from the client without having to make permanent api calls that will change the stored definition.

The example I shared has an overview in the EmbedDashboard.tsx file of this (for color and viz swapping, not specifically tile swapping but if you log out the dashboard object it should give you an idea of how to manipulate other parts of the dashboard) using the embed sdk. Where we pass a method to stored the dashboard state into the .then() callback → then use the embed sdk’s built in setOptions() helper method to post whatever change we want to make to the dashboard to the iFrame. Hope this helps!