ES | EN

Introducción

Podemos añadir librerías y estilos a nuestros Dashboards de manera sencilla e intuitiva, para lo cual tan solo tendremos que añadirlos en la pantalla de configuración del dashboard.

Así podremos utilizar librerías como bootstrap, Vuejs, etc. o cualquiera que necesitemos para la capa de presentación y nuestros gadgets.

Podemos añadir links y scripts haciendo referencia a los cdns o añadiendo el código directamente.

Pasaremos a explicar un ejemplo donde añadiremos las librerías y estilos necesarios de bootstrap 4.2.1 y Vue.js para poder usarlos en nuestros gadgets HTML Live.

Pasos

Los pasos a seguir serían:

Accede a la pantalla de configuración del dashboard al crearlo o, si ya está creado, pulsa sobre el icono

en el listado de dashboards.

En la pantalla de configuración, aparece un apartado para incluir los scripts y los estilos.

Para este caso, añade las librerías y estilos de Bootstrap 4.2.1 y de Vue.js

<!-- Bootstrap 4.2.1 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<!-- Vue.js -->
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

Después, guarda los cambios y accede al dashboard.

Ejemplo

Crea un gadget LiveHTML:

Accede a su edición:

En el editor HTML, añade el siguiente código de ejemplo para la librería Bootstrap:

<div class="card" style="width: 18rem;">
<div class="card-header">
Using front-end component library bootstrap
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">ITEM 1</li>
<li class="list-group-item">ITEM 2</li>
<li class="list-group-item">ITEM 3</li>
</ul>
</div>

Pulsa el botón

y cierra la ventana de edición.

Este sería el resultado:

Para el ejemplo de gadget con Vue.js , nuevamente crea un gadget LiveHTML

Añade en el editor HTML:

<div id="app">
<v-app>
<v-expansion-panel>
<v-expansion-panel-content
v-for="(item,i) in 5"
:key="i"
>
<div slot="header">Item</div>
<v-card>
<v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-progress-circular :value="60" indeterminate></v-progress-circular> 
</v-app>
</div>

En el editor JS:

//This function will be call once to init components

vm.initLiveComponent = function(){
                vm.app = new Vue({ el: '#app' })
};

//This function will be call when data change. On first execution oldData will be null
vm.drawLiveComponent = function(newData, oldData){
};

//This function will be call on element resize
vm.resizeEvent = function(){
}



//This function will be call when element is destroyed
vm.destroyLiveComponent = function(){

};

Y este sería el resultado:

¿Cómo usar librerías JS y estilos CSS en nuestros Dashboards?

Introducción

Pasos

Ejemplo