Dashboard Navigation UI

[blfrantz]

I just started using Cyclotron and for the most part am quite impressed. Lots of great functionality and decently easy to configure. However there's one glaring gap that I'm still in disbelief isn't there, and that's some UI for navigating pages on a dashboard. As far as I can tell, the only way to move between pages on a dashboard is to set them to auto-rotate, or to use arrow keys. I can't find any way to add like a ribbon on the bottom or a tree-list in the sidebar that automatically lists the pages by name and lets you browse and navigate to them. This seems an obvious limitation, and one that really hurts usability. I was even playing with some of the built-in example dashboards and it wasn't until I edited one that I realized it had 8 pages!

I have figured out a workaround by adding a sidebar section with HTML that contains links to the different pages (e.g. <a href="/dashboardname?page=1">Page Name</a>), but this is brittle since anytime the page list is modified, the links will need to be updated, and it's annoying that I have to manually create this in the first place. I also tried a link like <a href="/dashboardname/pagename">Page Name</a> which would at least handle page re-orders (though not renames), but it appears the app ignores changes to the pagename in the url so this doesn't work.

The nice thing about putting this in the sidebar (as opposed to a header widget) is you only only have to configure it once per dashboard. But AFAIK there's no way to make the sidebar open by default, so it's still not great for discoverability (adding an open-by-default sidebar option would be great).

Like I said, I'm impressed overall, but it's surprising that a tool that's otherwise so feature-rich would not have solved this already. Or am I missing something?

[baumandm]

Hi @blfrantz, unfortunately you're right—this is a gap in the feature set. The most common pattern I've seen is for people to use HTML widgets to render custom HTML for the header & links to different pages. This gives the most flexibility in presentation and style, but I agree it's not convenient to implement or maintain.

One of the anticipated uses of the Header widget was to build this functionality in, but that feature never materialized due to other priorities. There's also the challenge of designing an interface that looks good whether there's 1, 2 or 8 pages in the dashboard.

Regarding the issue of configuring the Header widget for every page, this is solved by the Linked Widget widget type. So you would only configure once on the first page, then add the Linked Widget to all the subsequent pages.

Your idea of using the Sidebar is also a good one, it would be straightforward to add an accordion group with links to all the pages. Ideally we'd have both options available out of the box to allow for more customization.

If you're interested in helping out, PRs for either of these would be much appreciated. Otherwise I can try to fit this into our roadmap.

[blfrantz]

@baumandm Thanks for the reply. We're still kind of in "evaluation mode" in deciding if we want to keep using Cyclotron, but if we do, then yes you may may see some PRs coming your way for refinements we end up working on. And thanks for the tip about Linked Widgets, wasn't aware of that.