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

Introducción

Mediante esta forma de integración, podrás incluir tu dashboard, de forma nativa, en una aplicación VueJS y dotarla de capacidades del Dashboard 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

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

En este ejemplo, tendrás que apuntar las URLs a una instalación de plataforma (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 el caso de tener una aplicación VueJS generada con el cliente del mismo, 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 necesarias y las añade al header, por lo que no es necesario más que añadir componente y usarlo con los parámetros necesarios.

Open

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, vas a tener que dar un estilo css inicial al contenedor del motor. En concreto, 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

Open

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 usas una librería de graficado personalizada, la tendrás que cargar tú mismo antes de la carga del dashboard.

Si necesitamos conocer la carga del dashboard o de un gadget en concreto, 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 identificará a tu contenedor de dashboards. Será útil en casos en los que tengas varios dashboards a la vez y 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 quieres 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 lo cambias, el componente renderizará el nuevo dashboard instantáneamente, permitiéndote cambiar de uno a otro de forma rápida.

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

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

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

• i18n → false por defecto para no cargar el i18n en el dashboard. Si 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 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 un JSON. En este caso el formato será un JSON con clave el parámetro a incluir y el valor que queramos usar. Este parámetro es reactivo, por lo que si lo cambias, el dashboard se recargará, así como si usamos el parámetro de visualización única del gadget “$gadgetid“.

API de wrapper

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

Con este api vas a poder hacer diferentes operaciones que 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 → sub-API con las operaciones de multidatasource api chaining. Con este API, podrás recuperar datos de datasource en cualquier parte de la aplicación Vue Consultas multidatasources-datadiscovery en Gadget Template

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

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

• api.enableEventEdit/disableEventEdit → puedes activar y desactivar la edición por eventos. Si está activada, hará que cada vez que des al botón “edit” del gadget, se envíe un evento gadgetselect, en el que se incluirá el JSON del 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. Puedes enviar parámetros sin necesidad de recargar el dashboard,

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

• api.setInlineDragType(type) → elige tipo de gadget 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 está activado, no se podrá añadir gadget mediante este método.

• api.forceRender → cuando hayas realizado algún cambio en el dashboard, 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.