ES | EN
El motor de dashboard, no tiene porque 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 incluiremos un tag html iframe en nuestra aplicación donde se abrirá el motor de dashboards en el que tendremos que incluir una url que nos facilitará plataforma. Las urls pueden ser obtenidas en el propio listado de dashboards:
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. Se tendrá que incluir mediante el parámetro de url, “oauthtoken“ sin la parte “bearer “ inicial, obteniendo una urls 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 nos permitirá visualizar un dashboard de plataforma, con el usuario dado por el token pasado y la url de edición nos permitirá visualizar el dashboard en modo edición.
En modo edición, no se tendrán todos los menús del controlpanel 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 Dashboard Engine Javascript API
Integración en aplicaciones Vue (Wrapper Vue)
Available in version 2.1.3-gradius
Esta integración, consigue incluir el dashboard sin iframes dentro de nuestra aplicación VueJS. Habrá que tener varias consideraciones ya que al trabajar sin iframes tendremos que resolver ciertas partes en la aplicación, pero conseguiremos una integración mucho más nativa, potente y ágil que por iframe. La documentación se encuentra en el siguiente tutorial.
How to include Dashboards in your Vue App? (Vue Wrapper Integration)