How to get the HTML Id of dashboard widgets/DIVs

Dashboard
1

I'm trying to create a "tabbed" dashboard page (a single page with internal tabs).
I can easily do it with native HTML elements (defined in template nodes) which I can show/hide per the selected tab.

But is there a way to dynamically set the visibility of standard Dashboard-2.0 elements (ui-button, ui-text etc.), e.g. by getting their Id (or better still, the Id of their containing DIVs)?

I can always render the active tab into a ui-iframe node, but looking for something simpler.

2

If you're open to contributing this to core, Id happily see this as one of our core offerings for a layout. I actually opened an issue for it this week:

Thinking that each group on the page would render as a tab

3

OK, so you just disclosed the simple & elegant solution.. :slightly_smiling_face:. Define each tab content in its own group, and show/hide the groups with ui-control messages (of course, we should remember to set the ui-control for multi-tenant).

Yes, it would be great to have this as a new built-in layout. Once I find some free time I will be happy to contribute.

1 Like
4

Fancy a quick challenge, so going to see if I can get this started at least.

5

Fun 40 minutes: Layout: Tabs by joepavitt · Pull Request #1138 · FlowFuse/node-red-dashboard · GitHub

2 Likes
6

This is great. Thanks Joe!
Need to make sure that the tabbed dialog supports multi-tenant, i.e. that concurrent clients can be on different tabs

7

It does, tab state stays client-side only.

3 Likes
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.