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

Available in version 2.1.3-gradius

EN | ES

With this way of integration, we’re going to include our dashboard through a native way in some VueJS application and give this app the dashboard capabilities, for example, the use of datasources outside of the dashboard for getting data in application or the direct interaction with the API provided.

Technically, it’s necessary a connection with the platform through websocket. This conection will be done with the component automatically with the parameters provides and some user with the developer role at least.

Integration types

Integration in front vue app through JS

we can get the component in the github of onesaitplatform here https://github.com/onesaitplatform/onesait-cloud-platform-dashboard-wrapper. This will be the main file that we include in our project resources https://github.com/onesaitplatform/onesait-cloud-platform-dashboard-wrapper/blob/main/js/vue-wrapper-component.js . There is an complete example with many features and funcionality in the sample folder of the project.

In this example, we need to overwrite some urls to some installation (2.1.3 or more) where we will get the files needed for the dashboard engine and modify the platformbase, token and dashboard with our params. For more information read the readme.md of the project https://github.com/onesaitplatform/onesait-cloud-platform-dashboard-wrapper/blob/main/js/README.md

Integration through Vue Component:

In the case of VueJS application generated with the vue client we can include the component in “.vue” component file type https://github.com/onesaitplatform/onesait-cloud-platform-dashboard-wrapper/blob/main/vue/src/components/VueWrapperComponent.vue . In type of integration the component automatically get the libraries needed inserting them in the header section, so the only this to do is to include the component and using it.

In the github project also exist an application example with this component.

Initial considerations

In this integration with wrapper component, we are going have some CSS initial style to the component. We need to include:

  • height → fixed in pixels, for example: 700px

  • width → fixed or percentage: 80%

  • position → “absolute” always

Other main consideration is that because we don’t hace some template backend engine is necessary to include the headerlibs (or initial fragment) in the main vue application. For example. if we need to use some charting library in the dashboard we need to add it to the vue app in order to be avaible for the dashboard.

If we need to know where some gadget or dashboard have finished its render we can listen for the event that are sended by the element. For the dashboard loaded event every gadget must be loaded.

Wrapper parameters

In the wrapper there are some parameters that we can use, some of them are required and other are optionals:

  • id (required) → identification of the dashboard instance. This param identify our container of dashboad. It will be useful in cases that we have more than one dashboard at the same time. Any string value are posible, for example “inst1“.

  • token (required) → this will be the oauth2 token bearer generated after the user login. This token will be included without the beginning “bearer “ string. Through this token user permissions are checked.

  • dashboard (required) → id for the dashboard that we want to load. It’s the last part of the url of any dashboard or integration url. This param is reactive so if we change it the component will render the new dashboard instantly allowing us to swap the dashboard.

  • platformbase (required) → base url for the onesaitplatform instalation where the dashboards are. The onesaitplatform version must be 2.1.3 or earlier for example Por ejemplo 'https://gradius.onesaitplatform.com'

  • editmode → default false. When it’s true we access to dashboard in edit mode

  • model → if we want to load the model of the dashboard without getting it from the platform we can put the model in this param

  • i18n → default false for not loading the i18n of the dashboard. If it’s true the component will get from the platform the i18n json. Like model parameter it can have the model json itself.

  • api → output object with api of some dashboard renderer

  • params → parameter to incluse a json of url parameters. In this case the format will be json with the key of the parameter and the value that we want to use. This param it’s reactive so if we change the param the dashboard will be reloaded with the new parameter. We can use like in url parameter the $gadgetid param in order to render a single gadget of the dashboard.

Wrapper API:

Every dashboard wrapper, generate an API where we can interact with some capacilities like datalink, reading datasources and many more in VueJS app and event in local enviroment because there isn’t conflict for developing in this way. With this API we can create a custom UI for the dashboard for viewing or editing it.

This API can be accessed from the global window and form api parameter. In the global windows thre will be one entry for each dashboard with the key of the “id” param.

With this API we 're going to do different operations that we can inspect in its definition:

  • api.sendValue (gadgetOrigin, key, value) → it works like the sendValue of the template gadget. There’ll be an id of the gadget origin that we want to trigger its relationship because datalink works from gadget to gadget. The ID can be obtained from the “Styling” option of itself:

  • api.sendFilter (gadgetOrigin, key, value, op, typeAction) → works like sendFilter. We need to include tje origin ID, origin field, origin value and operator (“=“,”>”,”<”, …) by default is “=“ and the action is “filter“ like normal way of use.

  • api.ds → subapi with multidatasource api chaining. With this API we’re going to trigger datasources in the main VueJS app for example for filling select or tables outside of the dashboard https://onesaitplatform.atlassian.net/wiki/spaces/OP/pages/181862451

  • api.setModel(dashboard)/getModel → setting or getting the dashboard model it we save it we can override our dashboard

  • api.getDropElementEvent/setDropElementEvent → setting or getting the dashboard drop element (when we use drag and drop in wrapper)

  • api.enableEventEdit/disableEventEdit → enable or disable the event edition. With enable event edit any time that we click on edit button of gadget an event will the json of the gadget will be sended for external edicion purposes.

  • api.datalink/api.params → datalink and url parameter access. With this subapi we can generate new datalinks or params in the dashboard.

  • api.sendParam/api.sendParams → Simple o multiple param sended to the dashobard. It works without relaoding the dashboard.

  • api.gmanagerService → gadget manager service for reading operations of the gadgets in the dashboard

  • api.setInlineDragType(type) → with this function we can set the draw gadget that we whan to use in inline drag (drag the cursor in empty zone). This param depends on “gridOptions.enableEmptyCellDrag” to be true if no this edition will be disabled.

  • api.forceRender → force render of the dashboard, for use it when we change model or structure things.

  • api.favoriteService → (From version 3.0) Allows you to access the services of your favorite gadgets, to be able to create, modify, delete or consult them.