Navigation menu between dashboards

SharpTools.io (web)
1

Hi! Im trying to create a navigation menu to navigate between different dashboards. I can see that this topic has been discussed in the forum before and that there is no native way to create this menu right now.

I have created a solution/hack that works for me, but I would like to check that the solution will not break suddenly.

I have created a supertile with my menu items.

Skjermbilde 2023-05-26 kl. 12.31.50
Skjermbilde 2023-05-26 kl. 12.31.50648×900 17.8 KB

I then add this tile to all of my dashboards. This means that I can update the menu from one place.

Now I would like to highlight the current dashboard the user is visiting. I can there see that the super tile gets a id (and a data-entity) that seems to be stable between different dashboards. The supertile on my main dashboards receives the id “tile-holder-QXciubcQ”, while the id changes to “tile-holder-NE4tsI7g” on my “Lys (Lights)” dashboard.

With some css I can then highlight the items in the super tile that corresponds to this current dashboard.

#tile-holder-QXciubcQ .tile .main-content .item:nth-child(n+1):nth-child(-n+2),
#tile-holder-NE4tsI7g .tile .main-content .item:nth-child(n+3):nth-child(-n+4),
#tile-holder-duLupLA6 .tile .main-content .item:nth-child(n+5):nth-child(-n+6) {
  color: #ffc107;
}

Skjermbilde 2023-05-25 kl. 22.51.22
Skjermbilde 2023-05-25 kl. 22.51.22686×1126 151 KB

Skjermbilde 2023-05-25 kl. 22.54.39
Skjermbilde 2023-05-25 kl. 22.54.39622×1160 132 KB

This works perfectly for me!

I know this is a hacky solution, but it works for me. Im just curious if the usage of these IDs to style elements is “safe”? Can the IDs used change suddenly? In your next build or something?

This works between reloads and has been working for about a week for me now.

1 Like
2

The IDs are unique to the tiles on your dashboard so the IDs themselves won’t change, but we may change the DOM structure in the future. For example, we’ve been considering getting rid of the wrapped ‘tile holder’ as it was originally in place for a different reason and isn’t needed anymore. As such, you might consider using the .tile[data-entity-idx="XXX"] selector instead of the #tile-holder-XXX one.

Another approach would be to use the “named styles” approach where you would create a few different named styles, then you could apply the relevant style to the navigation tile in each dashboard and write your Custom CSS accordingly. .

2 Likes
3

Thank you! Will change to data-entity selectors instead. And nice to know about the named styles approach!

1 Like