Page Comparison

ES | EN

...

Introducción

Mediante esta forma de integración, vamos a poder podrás incluir nuestro tu dashboard, de forma nativa, en una aplicación VueJS y dotarla de capacidades del dashboard engine a la mismaDashboard Engine, como por ejemplo, el uso de datasources para obtener datos en la aplicación o la interacción directa mediante el API proporcionado.

Técnicamente, será necesaria una conexión con plataforma vía websocket que realizará el componente de forma automática según la parametría indicada, así como un usuario con rol mínimo developer con permisos en la misma.

Tipos de integración

Integración en aplicación front

...

Vue vía JS

podemos Puedes obtener el componente vue Vue desde el repositorio github GitHub de plataforma aquí: https://github.com/onesaitplatform/onesait-cloud-platform-dashboard-wrapper en . En concreto, este es el archivo principal que incluiremos debes incluir en nuestros tus recursos de proyecto: https://github.com/onesaitplatform/onesait-cloud-platform-dashboard-wrapper/blob/main/js/vue-wrapper-component.js . Se puede ver Hay un ejemplo completo y con muchas funcionalidades en el mismo repositorio, en la carpeta samplede muestra.

En este ejemplo, tendremos tendrás que apuntar las urls URLs a una instalación de plataforma donde recuperaremos (2.1.3 o más) donde recuperarás los recursos necesarios para el motor, así como modificar las configuraciones del platformbase, token y dashboard a uno existente. Para más información se puede leer el readme md del protecto ejemplo: https://github.com/onesaitplatform/onesait-cloud-platform-dashboard-wrapper/blob/main/js/README.md

Integración vía componente Vue

en En el caso de encontrarnos con tener una aplicación Vue VueJS generada con el cliente del mismo podemos incluir, en este caso, , puedes incluir el componente Vue como archivo .vue https://github.com/onesaitplatform/onesait-cloud-platform-dashboard-wrapper/blob/main/vue/src/components/VueWrapperComponent.vue . En este caso, este componente carga las librerías de plataforma añadiéndolas necesarias y las añade al header, por lo que no es necesario más que añadir componente y usarlo con lo los parámetros necesarios.

...

En el repositorio, también existe También hay un ejemplo de aplicación con este componente en el repositorio GitHub.

Consideraciones iniciales

En esta integración vía componente wrapper, vamos vas a tener que dar un estilo css inicial al contenedor del motor. En concreto, vamos vas a tener que incluir:

• height → tendrá que ser fija en pixeles, por ej: 700px

• width → podrá ser fija o porcentual por ej: 80%

• position → absolute siempre

...

Otra consideración muy importante, es que al carecer de un motor de plantillas en back, es necesario proporcionar las headerlibs (o fragmento inicial header que podemos incluir en los dashboard) desde la aplicación Vue. Por ejemplo, si usamos usas una librería de graficado custom personalizada, la tendremos tendrás que cargar nosotros tú mismo antes de la carga del dashboard.

Si necesitamos conocer la carga del dashboard o de un gadget en concreto, se nos proporcionan , es decir, dónde ha terminado el renderizado un dashboard o un gadget, tienes dos eventos, una para la carga individual de cada gadget y otro para la carga completa (todos los gadgets tienen que haberse renderizado correctamente).

...

Parametría del wrapper

...

En el wrapper, se nos presentan varios parámetros de los cuales habrá algunos requeridos para renderizar el componente, mientras que otros son opcionales:

• id (requerido) → identificador de la instancia del dashboard. Este parámetro identificara identificará a nuestro tu contenedor de dashboards. Será útil en casos en los que tengamos tengas varios dashboards a la vez y queramos quieras acceder a cada uno con el identificador. Valdrá cualquier valor string identificativo por ejemplo “inst1“.

• token (requerido) → será el token bearer OAuth generado tras el login de un usuario. Este token irá incluido sin la parte inicial de “bearer “. A través de este token, se comprobarán los permisos del usuario.

• dashboard (requerido) → id del dashboard que queremos quieres cargar. Corresponde con la parte final de url URL de cualquier dashboard o url URL de integración. Este parámetro es reactivo, por lo que si cambiamos el mismo el dashboard se recargará con el lo cambias, el componente renderizará el nuevo dashboard instantáneamente, permitiéndonos permitiéndote cambiar de uno a otro de forma rápida.

• platformbase (requerido) → url URL base de la instalación de plataforma sobre la que queremos operar o recuperar recursos en versión donde están los dashboards. La versión de Onesaitplatform debe ser 2.1.3 o superior. Por ejemplo 'https“https://gradius.onesaitplatform.com”.com'

• editmode → por defecto a false. Si lo activamos accedemos cambias a true, accederás al dashboard en modo edición.

• model → si queremos quieres cargar el modelo del dashboard sin necesidad de ir a plataforma a buscarlo, podemos puedes incluirlo entero en este parámetro.

• i18n → false por defecto para no cargar el i18n en el dashboard. Si es se cambia a true, el componente irá a plataforma a buscar la configuración de internacionalización del dashboard. Si se le pasa un json JSON de internacionalización trabaja como el parámetro anterior.

• api → objeto de salida que se sobrescribirá con el api API del dashboard en concreto.

• params → parámetro para incluir los url URL parameters en un JSON. En este caso el formato será un json JSON con clave el parámetro a incluir y el valor que queramos usar. Este parámetros parámetro es reactivo, por lo que si cambiamos el mismo lo cambias, el dashboard se recargará. Así , así como si usamos el parámetro de visualización única del gadget “$gadgetid“.

API de wrapper

...

Se proporciona un API para poder trabajar con el dashboard desde nuestra aplicación front, incluso desde local (al no haber conflictos debidos a los dominios) y poder incluso generar una UI personalizada y potente sobre el dashboard usándola.

...

Cada contenedor de dashboard genera una API donde puedes interactuar con algunas capacidades como enlace de datos, fuentes de datos de lectura y muchas más en la aplicación VueJS, e incluso en entorno local porque no hay conflicto para desarrollar de esta manera. Con esta API podemos crear una interfaz de usuario personalizada y potente para ver o editar el dashboard.

Este API es accesible, tanto desde la parametría “api“ del componente como desde el objeto window. En este objeto window , se tendrá un api API por cada dashboard cargado con , siendo su clave el id dado en el componente.

...

Con este api vamos vas a poder hacer diferentes operaciones que podemos puedes ver en la definición de la misma:

...

• api.sendValue (gadgetOrigin, key, value) → funciona de forma idéntica al sendValue del gadget plantilla. Habrá que indicar el id del gadget origen ya que trabaja con relaciones de datalink (gadget a gadget). El id del gadget se puede obtener desde la opción “Styling” del mismo:

...

• api.sendFilter (gadgetOrigin, key, value, op, typeAction) → funciona de forma idéntica al sendFilter del gadget. Hay que indicar el id del gadget origen, el campo origen, valor origen, operación (“=“,”>”,”<”, …) que por defecto si no se pasa es “=“, y la acción, que si no se pasa será filter con el funcionamiento normal.

• api.ds → subapi sub-API con las operaciones de multidatasource api chaining. Con este api vamos a poder API, podrás recuperar datos de datasource en cualquier parte de la aplicación Vue MultidatasourcesConsultas multidatasources-datadiscovery queries in en Gadget Template

• api.setModel(dashboard)/getModel → con estas operaciones vamos vas a poder escribir o recuperar el modelo del dashboard.

• api.getDropElementEvent/setDropElementEvent → podemos puedes recuperar o sobrescribir el comportamiento del elemento drop element en el dashboard (cuando se usa drag and drop, arrastrar y soltar, en el wrapper).

• api.enableEventEdit/disableEventEdit → podemos puedes activar /y desactivar la edición por eventos. Si está activadoactivada, hará que cada vez que demos en edición des al botón “edit” del gadget, se envie envíe un evento gadgetselect, en el que se incluirá el json JSON del mismo gadgetselect, para labores por ejemplo de edición externa.

...

• api.datalink/api.params → acceso al servicio del datalink y de parámetros. Dentro de los mismos es posible generar nuevas conexiones de datalink o parámetros.

• api.sendParam/api.sendParams → envío simple o múltiple de parámetros al dashboard. Podremos Puedes enviar parámetros sin necesidad de recargar el dashboard,

...

• api.gmanagerService → servicio gadgetmanager con el que podremos podrás realizar operaciones de consulta sobre los gadgets del dashboard.

• api.setInlineDragType(type) → seteo del elige tipo de gadget al usar la edición con que quieres usar cuando arrastras en modo dibujo (arrastrar directamente el cursos en una zona no ocupada). Este parámetro depende de tener activado “gridOptions.enableEmptyCellDrag”: si no lo está activado, no se podrá añadir gadget mediante este método.

• api.forceRender → cuando hemos hayas realizado algún cambio en el dashboard podemos , podrás llamar a la misma para refrescar los cambios y forzar el renderizado del dashboard.

• api.favoriteService → (A partir de la versión 3.0) Permite acceder a los servicios de los gadgets favoritos, para poder crearlos, modificarlos, eliminarlos o consultarlos.

...