¿ Cómo integrar Dashboards en tu Web?

El motor de dashboard no tiene por qué usarse sólo dentro de plataforma. Existen varias formas de integrar su funcionalidad en otras aplicaciones o webs, tanto para ver un dashboard diseñado en plataforma de forma pública o privada, como en modo edición, pudiendo delegar esta funcionalidad incluso a una UI personalizada y más acorde para el usuario final.

Integración por iFrame

En esta integración, debes incluir un tag HTML iFrame en tu aplicación donde se abrirá el motor de dashboards en el que tendrás que incluir una URL que facilitará la plataforma. Puedes obtener las URLs en el propio listado de dashboards:

Open

Cualquiera de estas dos URLs necesitará del token OAuth2 bearer de acceso de usuario, que puede ser obtenido mediante un login a plataforma con el usuario. Tendrás que incluir mediante el parámetro de URL, “oauthtoken“ sin la parte “bearer “ inicial, obteniendo una URL del estilo:

https://{platformhost}/controlpanel/dashboards/viewiframe/{dashboard ID}?oauthtoken={bearer token}

https://{platformhost}/controlpanel/dashboards/editfulliframe/{dashboard ID}?oauthtoken={bearer token}

Por ejemplo:

https://lab.onesaitplatform.com/controlpanel/dashboards/viewiframe/14e151a5-ad8a-45a5-abce-1737872c7f8e?oauthtoken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwcmluY2lwYWwiOiJhZG1pbmlzdHJhdG9yIiwiY5xpHW50SWQyOiJvbmVzYWl0cGxhdGZvcm0iLCJ1c2VyX25hbWUiOiJhZG1pbmlzdHJhdG9yIiwic2NvcGUiOlsib3BlbmlkIl0sIm5ibWUiOiJhZG1pbmlzdHJhdG9yIiwiZXhwIjoxNjAxNjQ1OTkzLCJncmFudFR5cGUiOiJwYXNzd29yZCIsInBhcmFtZZXRlcnMiOnsidmVydGljYWwiOm51bGwsImdyYW50X3R5cGUiOiJwYXNzd29yZCIsInVzZXJuYW1lIjoiQWRtaW8pc7RyYXRvciJ9LCJhdXRob3JpdGllcyI6WyJST0xFX0FETUlOSVNUUkFUT1IiXSwianRpIjoiMDBiNWY0MDMtYzBkOC00ZmRiLThhOTAtNmQ0Y2ZjYmQyNjJiIiwiY2xpZW50X2lkIjoib25lc2FpdHBsYXRmb3JtIn0.ooFo-uAFfJ50-0-N5yUUjrOaY7nLTAx51CkC2DFwQLA

Como su nombre indica, la primera URL permitirá visualizar un dashboard de plataforma, con el usuario dado por el token pasado y la URL de edición permitirá visualizar el dashboard en modo edición.

En modo edición, no se tendrán todos los menús del Control Panel, ya que algunos provocarían errores de acceso e incoherencias con este tipo de visualización. Las funcionalidades de incluir elementos, editarlos, salvar el dashboard, etc., están incluidas en el API JS desarrollado para trabajar con el mismo: API JavaScript del Dashboard Engine

Integración en aplicaciones Vue (Wrapper Vue)

Esta integración consigue incluir el dashboard sin iFrames dentro de tu aplicación VueJS. Debes tener varias consideraciones ya que, al trabajar sin iFrames, tendrás que resolver ciertas partes en la aplicación, pero conseguirás una integración mucho más nativa, potente y ágil que por iFrames. La documentación se encuentra en el siguiente tutorial:

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