Globally scoped dashboard JavaScript

Dillon Hoefener shared this idea 2 years ago
Idea Logged

Hi,

I've just started working with the concept of creating dashboards with multiple subtabs. I use code mode pretty heavily, and I found that the JavaScript code is scoped to the current subtab and runs only on the subtab launch.

I'm looking for a recommendation on how one should go about creating globally scoped code (dashboard scope that applies to all sub tabs, executed each time a sub tab is launched). Is this currently possible?

If so, can you point me toward any documentation you may have on this? I've looked through the wiki on the apis but don't see any info on this specifically.

Replies (3)

photo
1

Hi Simon,

Sorry for the delayed response... I'll present a scenario with the hope that you can provide a recommendation on the best way to go about the achieving the goal as the circumstances/challenges that led to me choosing this design are complicated and probably unique to our environment.

Let's say I have a dashboard with multiple sub tabs and I want to include one report on all the sub tabs, and the report should behave the same way on all tabs. This report is presented on the dashboard as a custom JavaScript chart that requires event listeners to be added via code (i.e. click a value and call drill down function via API to produce drilldown effect).

My question here is, must I replicate the code that controls this chart on every subtab? This would be a poor design obviously, because if I need to make a change to the code I have to make that change in the code on every sub tab. It seems that if I want to include a report on multiple tabs it must be added separately and coded for each instance on every subtab. My hope is there is a better way to go about coding this and YF may be able to enlighten me on that.

Thanks

photo
1

Hi Dillion,


Sorry for the delays on this. I have heard back from the devs on this and believe there could be a workaround here! I'm going to have to copy-pasta the response here as it doesn't make a whole lot of sense to me, but I assume it will to you;

Currently it's not possible to write code that is executed for the entire dashboard in code mode. You have to navigate or visit a sub-tab before the code that is registered in its code mode is executed. The workaround here is too ensure the dashboard is always opened in the first sub-tab, and that the code is written in the first sub-tab's code mode. You could then write some code that is always executed upon a sub-tab in the dashboard being loaded, and then define the global functionality in the first sub-tab's code mode. If this is an acceptable workaround, we could provide a code example of how to get this to work.


Now as for the above, we should provide a more elegant solution and have since converted this post into a product idea to be reviewed by the product team. While there are no immediate plans to address this, I can ensure to keep you posted on any updates.

Again, please let me know if I should get an example of the workaround sent across, and as always please let us know if there was anything else you were after in the meantime.

Regards,

David

photo
1

Hi David,

Thanks for the idea entry. I don't understand how this piece would be implemented:

You could then write some code that is always executed upon a sub-tab in the dashboard being loaded, and then define the global functionality in the first sub-tab's code mode.

This may be an acceptable workaround for most cases, so please provide a code example from the dev. I'll have to take a look at that to be sure.

Thanks

photo
1

Hi Dillon, I have something, which I hope makes sense to you:

let filters = this.apis.filters; filters.addEventListener('applied', function(e) {     console.log('triggered any time a filter is applied on this dashboard'); }); let dashboard = this.apis.dashboard; dashboard.addEventListener('tabChanged', function(e) {  //this.apis.dashboard & this.apis.filters will always be the same object as they persist across the entire dashboard     console.log("triggered any time the dashboard tab is changed");     let nextSubTab = dashboard.getCurrentSubTab(); //Now we have the new current SubTab API      let newCanvasAPI = nextSubTab.canvas; //Now we have the current canvas API - if we moved to a non canvas tab this will be null });
Please let me know if that gives you what you need to work around it in the meantime, until we have implemented something natively here to assist.

Thanks,David

photo
Leave a Comment
 
Attach a file