How to configure menu options on Gadgets Template?

EN | ES

For gadgets templates an upturn has been implemented that allows us to add options.

These entries in the header or in the menu can be assigned a personalized description, code and icon.

We can create them from the gadget menu itself or from the API dashboard in the message to create the gadget.

From the gadget menu these would be the steps. We will see them with a simple example:

Select this entry in the gadget menu:

This modal window appears, in which the configured options appear and a form to add new or edit existing ones.

To add a new entry:

There are two options: Create the entry in the menu that appears when you click on the icon of the three dots, or in the Header that will place it in the header of the gadget.

Create an entry with each position to see the difference. Bear in mind that, if you do not assign an image path, the icon that will be shown will be the default one.

The header icon would look like this:

And here you can see the new menu entry:

These options, when pressed, send the assigned code to the function:

vm.receiveValue = function(data){ };

You can assess the variable "data" to see what action must be taken of those that you have implemented. For example, if you click on the header option and make a trace, you will see that the code arrives at the function:

If you want to create the menu options from the DashboardAPI, when creating a Template gadget, you would send in the message the property "customMenuOptions":

`{
"command": "newGadget",
"authorization": "${token}",
"information": {
"dashboard": "identificationDashboard",
"gadgetName": "${newName}",
"gadgetType": "${type}",
"refresh": 10,
"ontology": "HelsinkiPopulation",
"setupLayout": {
"filtersInModal": false,
"hideBadges": true,
"hidebuttonclear":false
},
"customMenuOptions": [{
"id": "customMenu",
"description": "customMenuD",
"position": "menu",
"imagePath": "../../static/images/dashboards/icon_button_controls.svg"
},{
"id": "customMenu2",
"description": "customMenuH",
"position": "header",
"imagePath": "../../static/images/dashboards/icon_button_menu.svg"}]
}
}`