Embed the dashboard editor

Empower your users to create and alter dashboards straight from within your application with our embedded dashboard editor. With the embedded dashboard editor, non-technical users can easily create their own insights based on the data they were given access to!

Once you've embedded dashboards in view mode with Embed authorization tokens, it's very easy to further extend this setup to also allow (certain) end-user designers to use the dashboard editor embedded into your application. There are a few topics that are important for the embedded dashboard editor:

• In the Authorization request:

  • Define securable access rights - give at least use rights to your dashboards and datasets.

  • Specify the user role - give a designer or owner role to your user in the authorization request in your backend.

• In your frontend, you can set the editMode property of the frontend component to show the dashboard in the desired edit mode.

Generate an Embed token with designer role and rights

In this step, your server-side code makes an API request to generate an Embed authorization token . In this API request, we can optionally specify the role that your user should have (defaults to "viewer" role), and the access your user should have to Luzmo dashboards & datasets; the flow chart below should help in making that decision for your specific use-case and user! The API response will contain an Embed key-token pair that can be used in the frontend component to securely embed a dashboard in your application/platform in view or edit mode.

const Luzmo = require('@luzmo/nodejs-sdk');
const client = new Luzmo({
    api_key: "< Your API key >",
    api_token: "< Your API token >",
    host: "< https://api.luzmo.com (default) or https://api.us.luzmo.com or your VPC-specific address >"
});

const promise = client.create("authorization", {
  type: "embed",
  expiry: "2024-02-13T10:38:08.493Z",
  inactivity_interval: 600,
  username: "< A unique and immutable identifier for your user >",
  name: "< user name >",
  email: "< user email >",
  suborganization: "< a suborganization name >",
  role: "< 'viewer' (default), 'designer', or 'owner' >",
  access: {
      dashboards:[
        {
          id: "<a dashboard id>",
          rights: "use"
        }
      ],
      datasets:[
        {
          id: "<a dataset id>",
          rights: "use"
        }
      ],
      collections: [
        {
          id: "<a collection id>",
          inheritRights: "use"
        }
      ]
    }
});

promise.then(function(result){
  // return the result to the client
})

This returns a JSON object with an id/token combination that we will use in step 2 to securely embed the dashboard in your application/platform:

{
  "type": "embed",
  "id": "< the embed authorization key >",
  "token": "< the embed authorization token >",
  "user_id": "< a uuid used on Luzmo's end to identify the embed user >"
  // ...
}

For a list of all properties, check Authorization in the Core API.

Embed the dashboard with an edit mode

To embed a dashboard in your webpage, we use the Luzmo Embed Libraries.

First, you should install and import the appropriate component in your frontend (see Embedding - Getting started ).

In this step we'll use the designer / owner Embed key and token, received from the authorization request in your backend, to securely embed a dashboard in your frontend. Next to that, we'll specify the initial edit mode in which the dashboard should be loaded!

The flow chart below could help out in deciding which editMode fits your use-case and application.

In the code example below, you can see how you can set the edit mode via the component properties, as well as the main and accent color of the editor

<!--
Clients on our US multi-tenant application environment,
or a dedicated instance on a specific VPC, should specify:
- appServer="https://app.us.luzmo.com/" (or your VPC-specific address)
- apiHost="https://api.us.luzmo.com/" (or your VPC-specific address)
-->
<luzmo-embed-dashboard
  appServer="< Luzmo App server, defaults to https://app.luzmo.com >"
  apiHost="< Luzmo API server, defaults to https://api.luzmo.com >"
  authKey="< Embed authorization key >"
  authToken="< Embed authorization token >"
  editMode="< view, editLimited, or editFull >"
  dashboardId="< dashboard id you want to embed >"
  mainColor="<rgb() main color value, e.g. rgb(50,50,50)>"
  mainColor="<rgb() accent color value, e.g. rgb(50,50,50)>"
></luzmo-embed-dashboard>

There are additional properties that can be specified to e.g. choose which language or timezone will be loaded and/or to style the dashboard loader . This to ensure a perfect fit with the style of your page. Check the Component reference for all documentation related to Luzmo's frontend components.

That's it, with these steps you securely embed a dashboard in your application/platform!

Capture events to enhance interactivity

The Luzmo embed libraries emit events when certain actions take place. You can set up an event listener in your application to capture these events and enhance the interactivity of your embedded dashboards. Some benefits include:

• Real-time Updates : By listening to events, you can update other parts of your application in real-time based on user interactions with the dashboard.

• Custom Actions : Trigger custom actions or workflows in your application when specific events occur, such as logging user activity or sending notifications.

• Enhanced User Experience : Provide a more dynamic and responsive user experience by reacting to user actions immediately.

• Data Synchronization : Keep your application data in sync with the dashboard data, ensuring consistency across your platform.

• Analytics and Monitoring : Collect and analyze user interaction data to gain insights into how users are engaging with the dashboards.

More specifically, the dashboardAction event encompasses several actions which are exclusive to the Embedded Dashboard Editor. This event contains the following meaningful payload in the data property: