| Info |
|---|
Available in version 2.1.3-gradius |
EN | ES
| Table of Contents |
|---|
Introduction
With this way of integration, we’re going you will be able to include our your dashboard through a native way in some VueJS application and , then give this app the dashboard Dashboard Engine 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 you will need a connection with to the platform through websocket. This conection via websocket, which will be done performed automatically with the component automatically with the parameters provides and some user with the developer role at least, following the parameters you indicate. You will also need a user with at least developer role, who has permissions on it.
Integration types
Integration in front
...
Vue app
...
via JS
we You can get obtain the vue component in the github of onesaitplatform here from the platform GitHub repository here: https://github.com/onesaitplatform/onesait-cloud-platform-dashboard-wrapper. This will be Specifically, this is the main file that we you will include in our your project resources: https://github.com/onesaitplatform/onesait-cloud-platform-dashboard-wrapper/blob/main/js/vue-wrapper-component.js . There is an A complete example with many features and funcionality functionalities can be found in the same repository, in the sample folder of the project.
In this example, we need to overwrite some urls to some you will have to point the URLs to a platform installation (2.1.3 or more) where we you will get retrieve the files needed necessary resources for the dashboard engine and , as well as modify the platformbase, token and dashboard with our paramsconfigurations to an existing one. For more information read you can check the readme .mdfile of the example project: https://github.com/onesaitplatform/onesait-cloud-platform-dashboard-wrapper/blob/main/js/README.md
Integration
...
via Vue Component:
In the case of VueJS having a Vue application generated with the vue its client we , you can include the Vue component in “.vue” component file type as a .vue file: https://github.com/onesaitplatform/onesait-cloud-platform-dashboard-wrapper/blob/main/vue/src/components/VueWrapperComponent.vue . In type of integration the this case, this component automatically get loads the needed platform libraries needed inserting and adds them in to the header section, so the you only this need to do is to include the component and using use it with the necessary parameters.
...
In the github project also exist There is also an application example with this component in the GitHub repository.
Initial considerations
In this integration with via wrapper component, we are going have some CSS initial you need to give an initial css style to the component. We need engine container. Specifically, you will have to include:
height → fixed in pixels, for example: 700px
width → may be fixed or percentage: 80%
position → “absolute” always
...
Other Another main consideration is that because we don’t hace some template backend engine is necessary to include , since there is not a back-end template engine, you need to provide the headerlibs (or initial header fragment ) in that we can include in the dashboards) from the main vue 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 you use a custom graphics library, you will have to load it yourself before loading the dashboard.
If we you 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 loadedthe loading of the dashboard or of a specific gadget, that is to say, where the dashboard or gadget have finished their render, you have two events, one for the individual loading of each gadget and another for the complete loading (all gadgets must have been rendered correctly).
...
Wrapper parameters
In the wrapper there are some parameters that we can use, you have several parameters, some of them which are required and other are optionalsto render the component, while others are optional:
id (required) → identification identifier of the dashboard instance. This param parameter will identify our your dashboard container of dashboad. It will be useful in cases that we have more than one dashboard where you have several dashboards at the same time and you want to access each one with the identifier. Any identifying string value are posiblewill be valid, for example “inst1“.
token (required) → this will be the oauth2 OAuth bearer token bearer generated after the a user login. This token will be included without the beginning “bearer “ stringstarting “bearer” part. Through this token, the user's permissions are checked.
dashboard (required) → id for of the dashboard that we you want to load. It’s It corresponds to the last final part of the url URL of any dashboard or integration urlURL. This param parameter is reactive, so if we you change it, the component will render the new dashboard instantly,allowing us you to switch from one to swap the dashboardother quickly.
platformbase (required) → base url for the onesaitplatform instalation URL of the platform installation where the dashboards dashboard are. The onesaitplatform version must be 2.1.3 or earlier for example Por ejemplo 'httpshigher. For example “https://gradius.onesaitplatform.com'com”
editmode → default defaults to false. When it’s true we access to If you change it to true, you will access the dashboard in edit mode.
model → if we you want to load the dashboard 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 without having to go to the platform to look for it, you can include it in its entirety in this parameter.
i18n → false by default, and then it will not load i18n in the dashboard. If it’s changed to true, the component will get from go to the platform the i18n json. Like model parameter it can have the model json itself.to look for the internationalization settings of the dashboard. If it is passed an internationalization JSON, it works like the previous parameter
api → output object with api of some dashboard rendererparams → that will be overwritten with the specific dashboard’s API.
params → parameter to include the URL parameters in a JSON. In this case, the format will be a JSON whose key is the parameter to include and the value that you want to use. This parameter is reactive, so if you change it, the dashboard will be reloaded, just like if you use the gadget's unique display parameter “$gadgetid“.
parámetro para incluir los URL parameters. En este caso el formato será un JSON con clave el parámetro a incluir y el valor que queramos usar. Este parámetros es reactivo, por lo que si cambiamos el mismo el dashboard se recargará. Así como si usamos el parámetro de visualización única del gadget “$gadgetid“.
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 you can interact with some capacilities like datalink, reading datasources and many more in VueJS app and event , even in local enviroment because there isn’t is no conflict for developing in this way. With this API we you can create a custom, powerful UI for the dashboard for viewing or editing it.
This API can be accessed is accessible both from the global window and form "api" parameter . In the global windows thre will be one entry of the component and from the window object. In this window object, there will be an API for each dashboard with loaded, the key of the “id” parameach being the id given in the component.
...
With this API we 're going , you will be able to do different operations that we you can inspect see in its definition:
...
api.sendValue (gadgetOrigin, key, value) → it works exactly like the sendValue of the template gadget. There’ll be an It will be necessary to indicate the id of the gadget origin that we want to trigger its relationship because datalink works from origin gadget, since it works with datalink relationships (gadget to gadget). The ID gadget id can be obtained from the “Styling” "Styling" option of itselfthat gadget:
...
api.sendFilter (gadgetOrigin, key, value, op, typeAction) → works like sendFilter. We need to include tje origin ID, origin field, origin value the gadget's sendFilter. You must indicate the id of the origin gadget, its field, value, and operator (“=“,”>”,”<”, …) which by default is if “=“ is not passed, and the action is “filter“ like normal way of use, which if it is not passed will be filter with normal operation.
api.ds → subapi with multidatasource api chaining operations. With this api you can retrieve data from datasource in any part of the Vue application
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 Multidatasources-datadiscovery queries in Gadget Template
api.setModel(dashboard)/getModel → setting or getting with these operations, you will be able to write or retrieve (set or get) 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 you can retrieve or override the behavior of the drop element in the dashboard (when using drag and drop in the wrapper).
api.enableEventEdit/disableEventEdit → you can enable or and 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 purposesediting. If it is activated, every time you click the gadget's "edit" button, a gadgetselect event will be sent, in which the gadgetselect’s JSON will be included, for external editing tasks, for example.
...
api.datalink/api.params → access to the datalink and url parameter access. With this subapi we can generate new datalinks or params in the dashboardservice. Within these, it is possible to generate new datalink connections or parameters.
api.sendParam/api.sendParams → Simple o multiple param sended single or multiple sending of parameters to the dashobard. It works without relaoding dashboard. You can send parameters without having to reload the dashboard.
...
api.gmanagerService → gadget manager service for reading operations of the gadgets in the dashboardgadgetmanager service with which you can perform query operations on dashboard gadgets.
api.setInlineDragType(type) → with this function we can set the draw type of the gadget that we whan you want to use in the inline drag (directly drag the cursor in empty zonean unoccupied area). This param parameter depends on having “gridOptions.enableEmptyCellDrag” to be true if no this edition will be disabledenabled: if it is not enabled, a gadget cannot be added using this method.
api.forceRender → when we have made any changes to the dashboard we can call it to refresh the changes and force the render of the dashboard.
force render of the dashboard, for use it when we change model or structure things.
api.favoriteService → (From version 3.0) Allows you access to access the services of your favorite gadgets, to be able to favorite gadget services, in order to create, modify, delete or consult query them.