¿Cómo configurar opciones de menú en Gadgets Template?

ES | EN

Para los gadgets templates se ha implementado una mejora que nos permite añadir opciones.

A estas entradas en el header o en el menú se les podrá asignar una descripción, un código y un icono personalizados.

Podemos crearlas desde el propio menú del gadget o desde el dashboard API en el mensaje para crear el gadget.

Desde el menú del gadget estos serían los pasos. Los veremos con un ejemplo sencillo:

Selecciona esta entrada en el menú del gadget:

Aparece esta ventana modal, en la cual aparecen las opciones configuradas y un formulario para añadir nuevas o editar las existente.

Para añadir una nueva entrada:

Hay dos opciones: Crear la entrada en el menú que aparece al pulsar en el icono de los tres puntos o en el Header que lo situará en el header del gadget.

Crea una entrada con cada posición para ver la diferencia. Hay que tener en cuenta que si no asignas un image path, el icono que mostrará será el icono por defecto

Así se vería el icono del header:


Y aquí puedes ver la entrada nueva del menú:

Estas opciones, al pulsarse, envían a la función el código asignado:


vm.receiveValue = function(data){ };


Puedes evaluar la variable "data" para ver qué acción hay que realizar de las que hayas implementado. Por ejemplo, si clicas la opción del header y haces una traza, verás que llega el código a la función:


En el caso de querer crear las opciones del menú desde el DashboardAPI, al crear un gadget Template, enviarías en el mensaje la propiedad "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"}]
}
}`