¿Cómo incluir Dashboards en tu aplicación Vue (Dashboard4Vue Wrapper)

Available in version 2.1.3-gradius

ES | EN

Intro

Mediante esta forma de integración, vamos a poder incluir nuestro dashboard, de forma nativa, en una aplicación VueJS y dotarla de capacidades del dashboard engine a la misma, 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 obtener el componente vue desde el repositorio github de plataforma https://github.com/onesaitplatform/onesait-cloud-platform-dashboard-wrapper en concreto este archivo que incluiremos en nuestros recursos https://github.com/onesaitplatform/onesait-cloud-platform-dashboard-wrapper/blob/main/js/vue-wrapper-component.js . Se puede ver un ejemplo completo y muchas funcionalidades en el mismo repositorio en la carpeta sample.

En este ejemplo, tendremos que apuntar las urls a una instalación de plataforma donde recuperaremos 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 ejemplo https://github.com/onesaitplatform/onesait-cloud-platform-dashboard-wrapper/blob/main/js/README.md

Integración vía componente Vue

en el caso de encontrarnos con una aplicación Vue generada con el cliente del mismo podemos incluir, en este caso, 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 al header por lo que no es necesario más que añadir componente y usarlo con lo parámetros necesarios.

En el repositorio, también existe un ejemplo de aplicación.

Consideraciones iniciales

En esta integración vía componente wrapper, vamos a tener que dar un estilo css inicial al contenedor del motor. En concreto, vamos 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 una librería de graficado custom la tendremos que cargar nosotros antes de la carga del dashboard.

Si necesitamos conocer la carga del dashboard o de un gadget en concreto, se nos proporcionan 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:

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

  • token (requerido) → será el token bearer generado tras el login de un usuario. Este token irá 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 cargar. Corresponde con la parte final de url de cualquier dashboard o url de integración. Este parámetro es reactivo, por lo que si cambiamos el mismo el dashboard se recargará con el nuevo dashboard, permitiéndonos cambiar de uno a otro de forma rápida.

  • platformbase (requerido) → url base de la instalación de plataforma sobre la que queremos operar o recuperar recursos en versión 2.1.3 o superior. Por ejemplo 'https://gradius.onesaitplatform.com'

  • editmode → por defecto a false. Si lo activamos accedemos al dashboard en modo edición

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

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

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

  • params → 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“

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.

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 por cada dashboard cargado con clave el id dado en el componente.

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

  • api.sendValue (gadgetOrigin, key, value) → funciona de forma idéntica al sendValue del gadget. 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 (“=“,”>”,”<”, …) por defecto si no se pasa “=“ y la acción si no se pasa será filter con el funcionamiento normal

  • api.ds → subapi con las operaciones de multidatasource api chaining. Con este api vamos a poder recuperar datos de datasource en cualquier parte de la aplicación Vue https://onesaitplatform.atlassian.net/wiki/spaces/OP/pages/181862451

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

  • api.getDropElementEvent/setDropElementEvent → podemos recuperar o sobrescribir el comportamiento del drop element en el dashboard

  • api.enableEventEdit/disableEventEdit → podemos activar/desactivar la edición por eventos. Si está activado, hará que cada vez que demos en edición al botón “edit” del gadget se envie un evento gadgetselect, en el que se incluirá el json del mismo 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. Podremos enviar parámetros sin necesidad de recargar el dashboard

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

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

  • api.forceRender → cuando hemos realizado algún cambio en el dashboard podemos llamar a la misma para refrescar los cambios

  • 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.