How to create a Gadget Template?
- DevPortal Editor (Unlicensed)
- Onesait Platform
Intro
Gadget Template is a type of Gadget that give you the freedom to create any type of gadget from HTML, CSS and JavaScript code. You can obtain data from a datasource or API calls by Ajax for example, and you can use any library previously imported in the dashboard, like ECharts, nvd3, chart.js ... Later we will explain how to do this with a simple example.
This type of gadget is identified in the edition of dashboards with this icon.
You can define a template gadget previously and then use it in dashboards as many times as you need. They can even be made public so that other users can use them.
Creation
To create a new one, access from the menu to:
And click on the button Create Gadget Template:
This form to create a template gadget will appear:
Form of identification, description and a check to mark it as public or not. If you make them public, any user can use them, although not modify them.
The most important part to create a template gadget are text editors.
Clicking on the text editors and pressing the F11 / ESC key enables the full screen mode to facilitate development.
These editors have the functions of auto complete, help, search and show all the code, minimized in a column on the right, to navigate faster between the code, among other functions.
TEMPLATE CODE HTML& CSS (DROP ZONE) and TEMPLATE CODE JS
In the first edit window, add the necessary html and css code.
In the second one, add the JavaScript logic.
//In this second editor are predefined a series of functions that we can use in our gadget, to control certain phases of the gadget cycle as initialize it, with this function:
//This function will be call once to init components
vm.initLiveComponent = function(){
};
//Each time the data is recharged we can map or treat them in this function:
//This function will be call when data change. On first execution oldData will be null
vm.drawLiveComponent = function(newData, oldData){
};
//Here the resize event is captured and allows us to perform some action with our gadget to be resized, for example:
//This function will be call on element resize
vm.resizeEvent = function(){
}
//Capture the event when the gadget is destroyed and you can take some action:
//This function will be call when element is destroyed
vm.destroyLiveComponent = function(){
};
Basic template creation example using ECharts
You can access the library with this url:
https://ecomfe.github.io/echarts-doc/public/en/index.html
For this case, create a gauge-type gadget.
It will look like this in the end:
Create the template gadget
The first step to build it would be to give it a name and a description:
In the html editor you only need a div with an id.
<div id="container" style="height: 100%;width:100%" ></div>
In the JavaScript editor, although the code seems more complex, you are only initializing the gauge graph according to the information provided by the ECharts library.
https://ecomfe.github.io/echarts-doc/public/en/option.html#title
And mapping the data returned from the datasource that we will assign when you drag it to the dashboard.
//Write your controller (JS code) code here
//Focus here and F11 to full screen editor
//This function will be call once to init components
vm.initLiveComponent = function(){
var dom = document.getElementById("container");
vm.myChart = echarts.init(dom);
var app = {};
vm.option = null;
vm.option = {
tooltip : {
formatter: "{b}<br/>{c}",
position: function (pos, params, el, elRect, size) {
var obj = {top: 10};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
return obj;
},
textStyle: {
fontWeight: 'bolder',
fontSize: 12,
fontFamily:'Soho',
color: '#fff'
}
},
toolbox: {
show:false,
feature: {
}
},
series: [
{
name: '',
type: 'gauge',
detail: {formatter:'{value}',
textStyle: {
fontWeight: 'bolder',
fontSize: 12,
fontFamily:'Soho',
color: '#000',
shadowColor : '#000',
shadowBlur: 10
}},
title : {
textStyle: {
fontWeight: 'bolder',
fontSize: 10,
fontStyle: 'italic',
color: 'rgba(0,0,0,0)',
shadowColor : '#fff',
shadowBlur: 10
}
},
data: [{value: 50, name: ''}],
axisLine: {
lineStyle: {
color: [[0.09, '#1e90ff'],[0.82, '#1e90ff'],[1, '#1e90ff']],
width: 3,
shadowColor : '#fff',
shadowBlur: 10
}
}
}
]
};
if (vm.option && typeof vm.option === "object") {
vm.myChart.setOption(vm.option, true);
vm.myChart.resize()
}
};
//This function will be call when data change. On first execution oldData will be null
vm.drawLiveComponent = function(newData, oldData){
if(typeof newData !='undefined' && typeof newData[0].values !='undefined' && newData[0].values.length >=0){
if(newData[0].values.length==0){
vm.option.series[0].max = 100;
vm.option.series[0].min = 0;
vm.option.series[0].data[0].name = newData[0].signalId;
vm.option.series[0].data[0].value = 0;
vm.myChart.setOption(vm.option, true);
vm.myChart.resize();
}else{
var max=1000;
var sum = 0;
for (let index = 0; index < newData[0].values.length; index++) {
const value = newData[0].values[index];
if( value.value!=null && value.value>max){
max = value.value;
}
sum = sum + value.value;
}
var result = sum/newData[0].values.length;
var result= result.toFixed(2);
vm.option.series[0].max = max;
vm.option.series[0].min = 0;
vm.option.series[0].data[0].name = newData[0].signalId;
vm.option.series[0].data[0].value = result;
vm.myChart.setOption(vm.option, true);
vm.myChart.resize();
}
}
};
//This function will be call on element resize
vm.resizeEvent = function(){
vm.myChart.resize();
}
//This function will be call when element is destroyed
vm.destroyLiveComponent = function(){ };
Press
and your gadget is created.
Using it
For this, create a dashboard and will add the libraries that your gadget needs. The best option is to use the ones that are available in a CDN.
In the GLOBAL STYLES, LIBRARIES AND SCRIPTS window, write these entries:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.common.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/extension/bmap.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/extension/dataTool.min.js"></script>
After creating the dashboard, drag the template gadget icon to the position where you want it to appear,
select our template by the identifier "gaugeEchart" which is how you had identified it.
In this step your gadget is already shown. Bear in mind that, depending on the datasource that you select, you will have to modify the mapping of the data that you do, in the function vm.drawLiveComponent. In this example, the average of the values returned in a datasource was shown. You could also have used it to show the last entry value in the ontology, etc. All this varies according to the needs that the gadget must cover in the dashboard.
To access variables defined in the JavaScript part, such as vm.variable, you can access it either using an angular js directive or escaping it with the keys {{vm.variable}}