How to use Template Parameters in Gadget Templates?

EN | ES

The templates parameters are the parameters that will be required from the user of the template and will have to be filled in when using it.

When filling in the form, the parameter will be replaced by the value selected for it.

To use them, drag them to the TEMPLATE CODE HTML&CSS text editor (DROP ZONE). From version 2.1.3-gradius, this will also work in the JavaScript section.

Text Label Parameter:

This parameter will be replaced by the string that is written in the form when you use the template in the dashboard.

All of these comments contain a name parameter to differentiate them from each other. Besides, you can use the same comment in several places of the code if you want to specify the same string in different parts of the code, thus not having to fill in several fields of the form that appears when selecting the template for use.

Number Label Parameter:

This parameter will prompt for a number on the form after selecting the template to use.

Label with data from a Data Source:

This parameter is replaced by the value of the datasource that you select in the form.

Label with Data Source parameter name:

This is replaced by the name of the data source field that you select in the form.

This is useful if you want to write the name of the data source parameter to use it in your html code.

For example, if you create a template displaying a graph, you can put this in the values ​​of the axes so that, in the previous form, you can choose which fields will be shown in each axis.

Label that will be loaded with the value chosen from a list:

Here, we will save some options that the user of the template can later select, and the comment will be replaced by the selected option.

In the options field, you must put the different options separated by commas.

You can test the template by accessing Show Gadget Template, where you can change the parameters to values ​, and select a datasource to check if the template meets the expected requirements.

Create an example template with parameters to see how to use them

For the example, you will create a simple value gadget:

First step, go to the screen to create the template gadget.

Give it an identifier and a description.

Insert the code, which has a text type parameter and another type Label, with a Data Source parameter name.

<style>
  .card-count{
   color: #2e43ab;
    font-weight: bold;
    font-size: -webkit-xxx-large;
   padding-left: 20px;
  }
  .card-title{
   color: #000000;
    font-weight: bold;
    font-size: x-large;    
  }
   
.card-green{
  color:green;
   
  }
  .my-card{
      padding: 15px;
  }
   .card-icon{    
      padding-top: 0px;
      padding-left: 0px;
      padding-bottom: 25px;
      padding-right: 25px;
  }
   
</style>
 
 
<div class="my-card">
 
 
 <md-icon class="card-icon" style="font-size:35px">assessment</md-icon>
 <label class="card-title"><!--label-osp  name="title" type="text"--></label><br>
 <label class="card-count">{{ds[0].<!--label-osp  name="ontology field" type="ds_parameter"-->}}</label>
       
 
</div>

Save and go to your dashboard.

Drag the icon where you want your template gadget to appear.

Select the template and a form to fill out will appear.

After entering the datasource and the title text, and selecting the value to display, you will see the gadget in your dashboard with this appearance: