Page Comparison

EN | ES

Dashboard The dashboard engine does not only can be use inside of onesait platform. There’re have to be used only within the platform. There are several ways to integrate it in its functionality into other applications or webs, for using private dashboard or public ones, or event for editing purposes having a custom UI, focus on client, for editing the dashboardwebsites, 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, we you must include an iframe html HTML iFrame tag in our your application where the dashboard engine will be open and where we need open in which you will have to include the dashboard url in ”src” param. The URLs can be obtained in the dashboard list itself.

...

Any of this two urls need the auth2 token of the platform, that can be obtained through the user login process. This must be included with the query param “oauthtoken“ without the initial “bearer “ string, getting url likea URL that the platform will provide. You can get the URLs in the list of dashboards itself:

...

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://lab.onesaitplatform.com/controlpanel/dashboards/viewiframe/14e151a5-ad8a-45a5-abce-1737872c7f8e?oauthtoken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwcmluY2lwYWwiOiJhZG1pbmlzdHJhdG9yIiwiY5xpHW50SWQyOiJvbmVzYWl0cGxhdGZvcm0iLCJ1c2VyX25hbWUiOiJhZG1pbmlzdHJhdG9yIiwic2NvcGUiOlsib3BlbmlkIl0sIm5ibWUiOiJhZG1pbmlzdHJhdG9yIiwiZXhwIjoxNjAxNjQ1OTkzLCJncmFudFR5cGUiOiJwYXNzd29yZCIsInBhcmFtZZXRlcnMiOnsidmVydGljYWwiOm51bGwsImdyYW50X3R5cGUiOiJwYXNzd29yZCIsInVzZXJuYW1lIjoiQWRtaW8pc7RyYXRvciJ9LCJhdXRob3JpdGllcyI6WyJST0xFX0FETUlOSVNUUkFUT1IiXSwianRpIjoiMDBiNWY0MDMtYzBkOC00ZmRiLThhOTAtNmQ0Y2ZjYmQyNjJiIiwiY2xpZW50X2lkIjoib25lc2FpdHBsYXRmb3JtIn0.ooFo-uAFfJ50-0-N5yUUjrOaY7nLTAx51CkC2DFwQLA

First url, allow us to visualize some As its name indicates, the first URL will allow you to view a platform dashboard, with the use of the oauthtoken param. The other url allow us to access the url for editing purposesuser 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 menus are not available because there’ll be some inconsistencies and access errors in the editionthe Control Panel menus, since some of them would cause access errors and inconsistencies with this type of display. The functionalities of include including elements, edit editing them, save saving the dashboard and many other , etc., are included in the javascript JS API developed for to work with the dashboard it:

Dashboard Engine Javascript API

Wrapper for use in Vue Apps (Wrapper Vue)

This integration allow us manages to include the dashboard without iframe inside our VueJS application. There’ll be some things to pay attention because if we work with no iframe we need to solve and provide some thing in the main platform but we’ll get a native way of integration, more powerfull a faster then the iframe. The documentation are in the following tutorial.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)