How to integrate Dashboard in your web?

The dashboard engine does not have to be used only within the platform. There are several ways to integrate its functionality into other applications or websites, both to view a dashboard designed on the platform publicly or privately, as well as in editing mode, being able to delegate this functionality even to a personalized UI that is more appropriate for the end user.

iFrame integration

In this integration, you must include an HTML iFrame tag in your application where the dashboard engine will open in which you will have to include a URL that the platform will provide. You can get the URLs in the list of dashboards itself:

Open

Either of these two URLs will need the OAuth2 bearer user access token, which can be obtained by logging in to the platform with the user. You will have to include via the URL parameter, "oauthtoken" without the initial "bearer" part, obtaining a URL of the style:

https://{platformhost}/controlpanel/dashboards/viewiframe/{dashboard ID}?oauthtoken={bearer token}

https://{platformhost}/controlpanel/dashboards/editfulliframe/{dashboard ID}?oauthtoken={bearer token}

For example:

https://lab.onesaitplatform.com/controlpanel/dashboards/viewiframe/14e151a5-ad8a-45a5-abce-1737872c7f8e?oauthtoken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwcmluY2lwYWwiOiJhZG1pbmlzdHJhdG9yIiwiY5xpHW50SWQyOiJvbmVzYWl0cGxhdGZvcm0iLCJ1c2VyX25hbWUiOiJhZG1pbmlzdHJhdG9yIiwic2NvcGUiOlsib3BlbmlkIl0sIm5ibWUiOiJhZG1pbmlzdHJhdG9yIiwiZXhwIjoxNjAxNjQ1OTkzLCJncmFudFR5cGUiOiJwYXNzd29yZCIsInBhcmFtZZXRlcnMiOnsidmVydGljYWwiOm51bGwsImdyYW50X3R5cGUiOiJwYXNzd29yZCIsInVzZXJuYW1lIjoiQWRtaW8pc7RyYXRvciJ9LCJhdXRob3JpdGllcyI6WyJST0xFX0FETUlOSVNUUkFUT1IiXSwianRpIjoiMDBiNWY0MDMtYzBkOC00ZmRiLThhOTAtNmQ0Y2ZjYmQyNjJiIiwiY2xpZW50X2lkIjoib25lc2FpdHBsYXRmb3JtIn0.ooFo-uAFfJ50-0-N5yUUjrOaY7nLTAx51CkC2DFwQLA

As its name indicates, the first URL will allow you to view a platform dashboard, with the user given by the token passed, and the edit URL will allow you to view the dashboard in edit mode.

In edit mode, you will not have all the Control Panel menus, since some of them would cause access errors and inconsistencies with this type of display. The functionalities of including elements, editing them, saving the dashboard, etc., are included in the JS API developed to work with it:

Dashboard Engine JavaScript API

Wrapper for use in Vue Apps (Wrapper Vue)

This integration manages to include the dashboard without iFramesin your VueJS application. You must have several considerations since, when working without iFrames, you will have to solve certain parts in the application, but you will get a much more native, powerful and agile integration than by iFrames. The documentation is in the following tutorial:

How to include Dashboards in your Vue App? (Vue Wrapper Integration)