liorhe
Posts: 9
Joined: Mon Feb 26, 2024 2:36 am

Customized "add component" flow

Hi,

When I go into the edit mode of the dashboards, I have an "add component" in the top that upon clicking will open a sidepanel with a set of options.
I was wondering if it would be possible to change this flow so that -
1. The sidebar will automatically open when I click on Edit, and remove all the options in the top.
2. The sidebar will show different options than what it currently shows, specifically only a closed set of widgets that I define that are available.

Thanks!
liorhe
Posts: 9
Joined: Mon Feb 26, 2024 2:36 am

Re: Customized "add component" flow

Sorry for adding a reply, I didn't find a way to edit my initial post.

To clarify. one of the workarounds I have right now is to do something like this:
dashboard.editMode.activate();
dashboard.editMode.showToolbars();
dashboard.editMode.hideRwdButtons();

However, the problem with this route is that whenever I click outside the sidebar it will automatically close, while I want it to be persistent throughout the edit mode.
User avatar
dawid.d
Posts: 832
Joined: Thu Oct 06, 2022 11:31 am

Re: Customized "add component" flow

Hello,

Thank you for the question!

Your way of thinking is absolutely correct, although following the second point, I wonder, if you want completely custom sidebar content, it could be better to write it custom and toggle it using the toggler in the context menu, which you can customize in the options.

There is also a quite simple way to disable buttons from the toolbar, you can add such options:

Code: Select all

tools: {
    addComponentBtn: {
        enabled: false
    },
    rwdButtons: {
        enabled: false
    }
}
Demo: https://jsfiddle.net/BlackLabel/Lgz3kmb9/

​If you have further inquiries, you may reach out to me at any time.
Best regards!
Dawid Draguła
Highcharts Developer
User avatar
dawid.d
Posts: 832
Joined: Thu Oct 06, 2022 11:31 am

Re: Customized "add component" flow

I will add that if you would like to leave the way this sidebar works, with component tiles to be dragged, but you would like to change these components (incl. e.g. adding custom ones), this is also possible.

Demo: https://jsfiddle.net/BlackLabel/o5r2ty9x/
Dawid Draguła
Highcharts Developer

Return to “Highcharts Dashboards”