Vas a añadir la opción Hola a Ajustes. Al pulsarla se abrirá un panel llamado Hola desde mi módulo. Este ejemplo no necesita permisos porque no consulta ni modifica datos de la app.
Preparar el proyecto
- Crea un módulo con la plantilla Básico.
- Abre
src/index.js, o créalo si la plantilla utiliza TypeScript. - Copia el código del siguiente apartado.
Añadir la opción y abrir el panel
export function createModule(host) {
return {
async activate() {},
async deactivate() {},
async contributions(context) {
if (context.surface !== 'settings') return [];
return [{
moduleId: 'example.hello', id: 'hello',
slot: 'SETTINGS_SECTION', section: 'Mis módulos',
label: 'Hola', actionId: 'open', icon: 'standard:settings'
}];
},
async dispatch(action) {
if (action === 'close') return { kind: 'close-panel' };
return {
kind: 'panel', layout: 'form', id: 'hello',
title: 'Hola desde mi módulo', dismissAction: 'close',
fields: [], rows: [],
actions: [{ actionId: 'close', label: 'Cerrar', submitFields: false }]
};
}
};
}
contributions ofrece la opción sólo en Ajustes. dispatch abre el panel al pulsarla y lo cierra con la acción close. El panel no tiene campos ni filas: primero comprobarás que la integración funciona.
Indicar el archivo de entrada
Guarda el código en src/index.js y comprueba estos valores de manifest.json:
"id":"example.hello""entry":"src/index.js""files":["src/index.js"]
Si la plantilla usaba src/index.ts, sustituye esa ruta en entry y files. El código anterior se copia sin cambios en el archivo JavaScript.
Probarlo en el visor
- Guarda el proyecto para actualizar Studio.
- Abre Ajustes en el visor y pulsa Hola.
- Comprueba que aparece el panel y que puedes cerrarlo.
Para dar una función al botón, continúa con Emulación: operaciones y eventos, donde puedes añadir pausa o guardado.
