How to use JS libraries and CSS styles in our Dashboards?

Intro

We can add libraries and styles to our Dashboards in a simple and intuitive way. To do it, we will only have to add them in the dashboard configuration screen.

Thus, we can use libraries such as bootstrap, Vuejs, etc. or whatever we need for the presentation layer and our gadgets.

We can add links and scripts by referring to the cdns or by adding the code directly.

We will now explain an example where we will add the necessary libraries and styles of bootstrap 4.2.1 and Vue.js to use them in our HTML Live gadgets.

Steps

The steps to follow would be:

Access the dashboard configuration screen when creating it or, if it is already created, click on this icon in the dashboard list.

In the configuration screen, a section appears for you to include the scripts and styles.

For this case, add the libraries and styles of Bootstrap 4.2.1 and 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>

Next, we save the changes and access the dashboard.

Example

create a LiveHTML gadget:

Access its Edit mode:

In the HTML editor, add the following sample code for the Bootstrap library:

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

Pess the button and close the Edit window.

This would be the result:

For the gadget example with Vue.js , create again a LiveHTML gadget.

Add this in the HTML editor:

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

In the JS editor:

//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(){

};

And this would be the result: