Embedded Dashboard Editor - the different editModes

After setting up the basic frontend embedding code, you can ensure (certain) dashboards can be opened in a specific edit mode. This is where the editMode property comes into play! Below, you can find a small flow diagram to facilitate setting the right edit mode, and after that, a short explanation of each edit mode is given, together with the steps required to load / switch to it!

Note you need an Elite plan or higher to be able to embed the dashboard editor.

view mode

View mode enables your users to view and interact with an embedded dashboard, without having the option to change the dashboard itself! This is useful for dashboards that you fully manage for your users (i.e. they should only be able to view and interact with these embedded dashboards).

Loading a dashboard in view mode

• Specify authorization key and token.
• Specify dashboardId.
• Specify editMode as "view". As editMode "view" is the default mode, specifying the editMode as view is optional. You will often need to specify "view" editMode to revert from editLimited / editFull mode. You can specify the editMode in two ways:
  • directly on the component: changing the dashboardId (e.g. user selecting a different dashboard in your UI) will also automatically load the new dashboard in the specified editMode.
  • via setEditMode method: changing the dashboardId (e.g. user selecting a different dashboard in your UI) will not automatically load the new dashboard in the specified editMode (i.e. either in the default editMode "view" or in the editMode as specified on the component property).

editLimited mode

The editLimited mode is useful if you have your own dashboard navigation in your application (e.g. a sidebar containing dashboard tabs or a dropdown) and would like the user to edit (some of) the dashboards (e.g. by adding an “Edit” button that toggles the editMode between “view” and “editLimited” mode).

When switching from view mode to editLimited mode:

• If the user has "can use" rights on the dashboard, a new variant will be automatically created for dashboards in editLimited mode.
  • If a dashboard variant was already created and favorited for this embed user, the favorited dashboard will be shown by default in "view" editMode for this embed user.
  • If a dashboard variant was already created, but not favorited for this embed user, the user will receive a prompt asking if they would like to continue editing their previous variant or to create a new variant.
• If the user has "can edit" rights on the dashboard, the user will directly edit the original dashboard.

Loading a dashboard in editLimited mode

• Specify authorization key and token.
• Specify dashboardId (if you want to open a new dashboard, you should specify "new" as dashboardId).
• Change editMode to "editLimited" when e.g. the user clicks on an "Edit dashboard" button in your UI (If you want to immediately open the dashboard in editLimited mode, you should set the editMode before setting the authorization and dashboard identifier properties).
  • directly on the component: changing the dashboardId (e.g. user selecting a different dashboard in your UI) will also automatically load the new dashboard in the specified editMode.
  • via setEditMode method: changing the dashboardId (e.g. user selecting a different dashboard in your UI) will not automatically load the new dashboard in the specified editMode (i.e. either in the default editMode "view" or in the editMode as specified on the component property).

editFull mode

The last mode is the editFull mode: this is useful if you have a dedicated place in your application, where users should be able to create & edit all their accessible dashboard(s) (e.g. in your navigation bar, you have a “Dashboard editor” tab that should show the embedded dashboard editor). In editFull mode, the editor will provide navigation to new or other accessible dashboards!

Loading a dashboard in editFull mode

• Specify editMode "editFull" (to open new/existing dashboards in editFull mode).
• Specify authorization key and token.
• Specify dashboardId (if you want to open a new dashboard, you should specify "new" as dashboardId).