Dynamically creating your dashboard navigation based on accessible dashboards

With our initial embedding complete, now you can make sure all dashboards accessible by the user are shown in your application in the right place!
Each frontend component has a getAccessibleDashboards method, which you can use to dynamically retrieve a list of dashboards by providing it the embed key and token of the user.

Response of getAccessibleDashboards

When the getAccessibleDashboards promise resolves, it will contain a list of dashboards and also the following properties:

• accessRights: will include the highest access rights the authorization token has on the dashboard, based on the rights of the resources above.
• id: dashboard UUID (this can be passed along as dashboardId to the frontend component).
• modifiedAt: RFC 3339 datetime value on which the dashboard was last modified.
• name: Dashboard name.
• tags: A list of all tags that are associated with the dashboard (this Academy article explains how to assign tags to a dashboard).

Below, an example of this response:

[
    {
        "id": "< dashboard_1_id >",
        "modifiedAt": "2021-02-10T09:13:27.114Z",
        "name": "< dashboard_1_name >",
        "tags": [
			"< dashboard_1_tag_1 >", 
			"< dashboard_1_tag_2 >"
		],
		"accessibleBy": [
            {
                "model": "User",
                "id": "< user_A_id >",
                "name": "< user_A_name >"
            },
            {
                "model": "User",
                "id": "< user_B_id >",
                "name": "< user_B_name >"
            },
            {
                "model": "Group",
                "id": "< group_id >",
                "name": "< group_name >"
            },

        ],
        "accessRights": {
            "flagRead": true,
            "flagUse": true,
            "flagModify": false,
            "flagOwn": false
        }
    },
    ...,
]

Use cases

Now that we know what will be returned by the getAccessibleDashboards method, we can make use of it in several ways! Listed below are the most frequent uses for the getAccessibleDashboards method, but you can definitely get creative, here 😉

Showing and hiding your own "Edit dashboard" button, based on the accessRights on the dashboard.

If the user only has view access (i.e. only flagRead true in accessRights), your user will not be able to edit the dashboard, and it thus makes sense not to show an "edit dashboard" button.

Separating your dashboards into different groups

This could be useful to keep a nice overview of all different dashboards to which your user has access. You can do this based on:

• The model from where the dashboard is accessible.
  E.g. you have a “General” collection, with template dashboards that should all be shown under “General insights” in your application, and next to that there are client/user-specific dashboards shared to a specific Group in Luzmo that should all be shown under, “Custom insights”.
• Which tags are associated with the dashboard.
  E.g. dashboards with tag “Marketing” should all be shown under “Marketing” in your application, dashboards with tag “Sales” should all be shown under “Sales”, etc.

Our sample embedding page gives an example of dashboard groups shown in the sidebar and dynamically filling the top navigation bar with the different dashboards!

Sorting your dashboards

If you have several dashboards in one place, we would recommend sorting them in a way that makes sense for your users. You can do this based on e.g.:

• The tags that are associated with each dashboard (e.g. “order-1”, “order-2”, etc.)
• The dashboard name (alphabetical order).
• The modification date.

Updating your navigation whenever a new dashboard is created

When your user creates a new dashboard, you want that dashboard to also show in your navigation. The easiest way to achieve this is to

1. add a listener for the 'load' event - this event will trigger each time a dashboard is loaded
2. use the getAccessibleDashboards function to retrieve the updated list of dashboards
3. Update your navigation as needed

Example code:

const luzmoDashboard = document.querySelector("luzmo-dashboard");
luzmoDashboard.addEventListener("load", (data) => {
  luzmoDashboard.getAccessibleDashboards()
  .then(dashboards => {
    if (dashboards.length !== dashboardCount) { // only update navigation when the dashboardCount has changed
      populateMenu(dashboards); // call a function which takes care of building the navigation UI
      dashboardCount = dashboards.length;
    }
  })
});

The next article will list all available features that can be toggled for your users, as well as how to toggle them!