➕ Crear Aplicación y Menús

El Módulo de Gestión de Aplicaciones es el espacio donde podrás dar vida a nuevas aplicaciones dentro del portal, configurar los roles que existirán en ellas y diseñar la estructura de navegación mediante menús, submenús y permisos de acceso.

El proceso de creación de una aplicación incluye la configuración de:

Aplicación Roles Permisos Menús Submenús, si aplica Submenús anidados, si aplica Asignación de permisos, si aplica

Esta opción está habilitada para usuarios administradores con acceso al módulo de Arquitectura / Gestión de Aplicaciones.

---

🧭 Flujo general de creación

El formulario se encuentra organizado por secciones tipo acordeón. Cada sección representa una parte de la configuración necesaria para crear una aplicación y su estructura de navegación.

El flujo recomendado es el siguiente:

1. Aplicación
2. Rol
3. Permiso
4. Menú
5. Submenú, si aplica
6. Submenú anidado, si aplica
7. Asignación de permisos, si aplica

El sistema muestra u oculta algunas secciones de acuerdo con la información registrada previamente. Por ejemplo, primero se crea la aplicación, después se habilita la creación del rol, posteriormente los permisos y finalmente los menús o submenús.

---

🧩 Crear aplicación

La sección Aplicación es el primer paso del registro.

En esta sección se captura la información principal de la aplicación que será administrada dentro del sistema.

Para crear una aplicación:

1. Captura el Nombre de la aplicación.
2. Captura una Descripción, si aplica.
3. Haz clic en el botón 'Agregar' correspondiente para confirmar el registro.

Al crear el aplicativo este debera de mostrar en la parte superior derecha, en el diagrama del arbol de creación:

Campos de aplicación

Campo	Descripción
Nombre	Nombre de la aplicación. Este valor debe coincidir con el Client ID que se registrara en Keycloak.
Descripción	Descripción opcional para identificar el propósito de la aplicación dentro del sistema.

Importante: El nombre de la aplicación debe capturarse correctamente, ya que debe coincidir con el Client ID que se registrara en Keycloak.

Cuando la aplicación se registre correctamente, el sistema continuará con el flujo y permitirá configurar el rol relacionado.

---

👤 Crear rol

La sección Rol permite registrar el rol que estará asociado a la aplicación creada.

El rol define el tipo de acceso que podrá tener un usuario dentro de la aplicación.

Para crear un rol:

1. Selecciona la aplicación previamente registrada.
2. Captura el Nombre del rol.
3. Captura una Descripción, si aplica.
4. Indica si se requiere dar de alta un grupo para el rol.
5. Confirma el registro.

Al crear el/los roles requeridos debera de mostrar en la parte superior derecha, en el diagrama del arbol de creación:

Campos del rol

Campo	Descripción
Aplicación	Aplicación a la que se asignará el rol.
Nombre	Nombre del rol.
Descripción	Descripción opcional para identificar el propósito del rol.
¿Requieres dar de alta un grupo para tu rol?	Permite indicar si el rol tendrá un grupo asociado.

El sistema convierte el nombre del rol a mayúsculas para mantener una estructura uniforme.

---

🏷️ Grupo asociado al rol

Durante la creación del rol, el sistema pregunta si se requiere dar de alta un grupo para el rol.

Si seleccionas Sí, se habilitará el campo Captura el nombre del grupo.

Al capturar el nombre del grupo, el sistema generará una vista previa del rol con el grupo asociado.

Ejemplo:

GRUPO_ROL

Importante: El nombre del grupo no debe contener espacios.

Si seleccionas No, el rol se registrará sin grupo asociado.

Una vez registrado el rol, el sistema permitirá continuar con la creación del permiso.

---

🔐 Crear permiso

La sección Permiso permite registrar los permisos que posteriormente se utilizarán para controlar el acceso a menús, submenús o roles.

Para crear un permiso:

1. Selecciona el rol al que deseas asociar el permiso.
2. Selecciona el permiso que deseas registrar.
3. Confirma el registro.

Campos del permiso

Campo	Descripción
Rol	Rol al que se asignará el permiso.
Permiso	Nombre identificador del permiso que se desea registrar.

El listado de permisos disponibles se carga desde la configuración de permisos globales de la aplicación.

Los permisos son importantes porque controlan qué opciones de navegación podrá ver o utilizar el usuario.

Una vez registrado el permiso, el sistema permitirá continuar con la creación del menú.

---

🧭 Crear menú

La sección Menú permite registrar una opción principal de navegación dentro de la aplicación.

El menú puede funcionar de dos formas:

• Como una opción que abre directamente una vista.
• Como un contenedor que agrupa submenús.

Para crear un menú:

1. Selecciona el Permiso que controlará el acceso al menú.
2. Captura el Título del menú.
3. Captura la ruta o configuración técnica requerida.
4. Define el tipo de menú.
5. Indica si el menú requiere submenús.
6. Completa la información del microfrontend, si aplica.
7. Selecciona el canal permitido.
8. Confirma el registro.

Campos del menú

Campo	Descripción
Permiso	Permiso que se aplicará al menú. Este permiso controla el acceso y visibilidad del menú para el usuario.
Título	Nombre del menú tal como aparecerá en la interfaz.
Path	Ruta del menú dentro de la aplicación. Se utiliza para el enrutamiento. Ejemplo: /dashboard/ventas.
URI	Identificador único del menú, usado para integraciones o control de permisos.
Orden	Número que determina la posición del menú dentro de la lista.
Ícono	Nombre del ícono de Material Icons que se mostrará junto al título. Ejemplo: airplay.
Tipo	Tipo de menú. Puede ser link para rutas simples o sub si tendrá submenús anidados.
Active Flag	Indica si el menú se mostrará abierto o cerrado por defecto en la interfaz.
Remote Entry	URL del archivo remoteEntry.js que carga el módulo federado del menú.
Remote Name	Nombre del remoto configurado en el host para identificar el módulo.
Badge Type	Tipo de insignia visual que se aplicará al menú, si aplica.
Badge Value	Texto o número que se mostrará dentro de la insignia.
Exposed Module	Nombre del módulo expuesto dentro del remoto.
Micro Frontend Type	Tipo de microfrontend asociado al menú.
Canal permitido	Canal donde el menú estará visible para el usuario.
¿Su menú requiere submenús?	Indica si el menú tendrá submenús relacionados.
¿Habilitar modo offline?	Indica si el menú contará con comportamiento offline.

---

🔗 Tipo de menú

El campo Tipo permite definir cómo se comportará el menú dentro de la navegación.

Tipo link

Utiliza este tipo cuando el menú abrirá directamente una ruta o vista.

Ejemplo:

Tipo: link
Path: /dashboard

Cuando el menú es de tipo link, debe contar con la configuración necesaria para cargar la vista correspondiente.

Tipo sub

Utiliza este tipo cuando el menú funcionará como contenedor de submenús.

Ejemplo:

Tipo: sub
Título: Administración

Cuando el menú es de tipo sub, se recomienda indicar que el menú sí requiere submenús.

---

📌 Regla para menú con submenús

Si en la pregunta ¿Su menú requiere submenús? seleccionas Sí, el sistema habilitará la sección Submenú después de confirmar el menú.

En este caso, el menú funcionará como contenedor de navegación y podrá agrupar una o varias opciones hijas.

---

📌 Regla para menú sin submenús

Si en la pregunta ¿Su menú requiere submenús? seleccionas No, el menú deberá contar con la información necesaria para abrir directamente una vista.

En este caso, es importante capturar correctamente:

• Path
• Exposed Module
• Remote Entry
• Remote Name
• Ícono
• Tipo
• Canal permitido

Si esta información no se captura correctamente, la vista puede no cargar dentro del Shell.

---

🌳 Crear submenú

La sección Submenú permite registrar una opción hija dentro de un menú principal.

Esta sección se habilita cuando el menú requiere submenús.

Para crear un submenú:

1. Selecciona el menú padre en el campo Menú a.
2. Selecciona el permiso que controlará el acceso al submenú.
3. Captura el Título del submenú.
4. Captura el Path o ruta correspondiente.
5. Completa los datos técnicos del microfrontend, si aplica.
6. Captura el orden de visualización.
7. Selecciona el canal permitido.
8. Indica si el submenú requiere otro submenú.
9. Indica si el submenú será visible desde el menú.
10. Confirma el registro.

Campos del submenú

Campo	Descripción
Menú a	Menú padre al que estará asociado el submenú. Debe haber sido creado previamente.
Permiso	Permiso que controlará el acceso al submenú.
Título	Nombre del submenú tal como se mostrará en la interfaz.
Path	Ruta de navegación para el submenú dentro de la aplicación.
Exposed Module	Nombre del módulo expuesto desde el microfrontend asociado al submenú.
Remote Entry	URL del archivo remoteEntry.js que carga el módulo federado del submenú.
Remote Name	Nombre del remoto configurado en el host para identificar el módulo del submenú.
Orden	Posición en la que se mostrará el submenú.
Canal permitido	Canal donde estará visible el submenú.
¿Su submenú requiere otro submenú?	Indica si el submenú tendrá un nivel adicional de anidamiento.
¿Su submenú será visible desde el menú?	Indica si el submenú se mostrará dentro de la navegación del menú.

---

📌 Regla para submenú con otro submenú

Si en la pregunta ¿Su submenú requiere otro submenú? seleccionas Sí, el sistema habilitará la sección Submenú anidado.

En este caso, el submenú funcionará como contenedor de otro nivel de navegación.

---

📌 Regla para submenú visible en menú

La pregunta ¿Su submenú será visible desde el menú? permite definir si el submenú aparecerá o no dentro de la navegación.

• Si seleccionas Sí, el submenú será visible para los usuarios que tengan permisos.
• Si seleccionas No, el submenú no se mostrará directamente en el menú lateral.

Esta configuración puede utilizarse cuando una ruta debe existir en la aplicación, pero no necesariamente mostrarse como opción visible en el menú.

---

🌿 Crear submenú anidado

La sección Submenú anidado se habilita cuando un submenú requiere otro nivel de navegación.

Este nivel permite registrar opciones hijas dentro de un submenú previamente creado.

Para crear un submenú anidado:

1. Selecciona el menú principal relacionado.
2. Selecciona el submenú padre.
3. Selecciona el permiso que controlará el acceso.
4. Captura el título del submenú anidado.
5. Captura el path o ruta de navegación.
6. Captura el módulo expuesto.
7. Completa los datos técnicos del microfrontend, si aplica.
8. Captura el orden de visualización.
9. Selecciona el canal permitido.
10. Indica si será visible desde el menú.
11. Confirma el registro.

Campos del submenú anidado

Campo	Descripción
Menú	Menú principal relacionado.
Submenú	Submenú padre al que estará asociado el submenú anidado.
Permiso	Permiso que controlará el acceso al submenú anidado.
Título	Nombre visible del submenú anidado.
Path	Ruta de navegación.
Exposed Module	Módulo expuesto desde el microfrontend.
Remote Entry	URL del archivo remoto asociado.
Remote Name	Nombre del remoto configurado.
Orden	Define la posición del elemento.
Canal permitido	Canal donde estará visible.
¿Será visible desde el menú?	Define si el submenú anidado se mostrará en la navegación.

---

🔐 Asignar permisos

La sección Asignar permisos permite relacionar permisos con elementos ya creados.

Los permisos pueden asignarse a:

• Menús
• Submenús
• Submenús anidados
• Roles

Esta relación permite controlar qué usuarios podrán visualizar o acceder a cada opción de navegación.

---

Asignar permiso a menú

Para asignar un permiso a un menú:

1. Ingresa a la pestaña Menús.
2. Selecciona el permiso correspondiente.
3. Selecciona el menú al que se aplicará el permiso.
4. Confirma la asignación.

---

Asignar permiso a submenú

Para asignar un permiso a un submenú:

1. Ingresa a la pestaña Submenús.
2. Selecciona el permiso correspondiente.
3. Selecciona el submenú al que se aplicará.
4. Confirma la asignación.

---

Asignar permiso a submenú anidado

Para asignar un permiso a un submenú anidado:

1. Ingresa a la pestaña Submenús anidado.
2. Selecciona el permiso correspondiente.
3. Selecciona el submenú anidado.
4. Confirma la asignación.

---

Asignar permiso a rol

Para asignar un permiso a un rol:

1. Ingresa a la pestaña Roles.
2. Selecciona el rol correspondiente.
3. Selecciona el permiso que deseas asignar.
4. Confirma la asignación.

---

🔢 Orden de menús y submenús

El orden de visualización se controla mediante el campo Orden.

Ejemplo:

Orden: 1
Orden: 2
Orden: 3

Un elemento con orden 1 se mostrará antes que uno con orden 2.

Para definir el orden:

1. Captura el número de orden correspondiente.
2. Verifica que no exista duplicidad en elementos del mismo nivel.
3. Guarda o confirma la configuración.
4. Valida que la navegación se muestre en la posición esperada.

---

✅ Validaciones del formulario

Durante la captura de información, el sistema puede mostrar mensajes de validación cuando un campo requerido no ha sido completado.

Ejemplo:

Este campo es requerido.

Antes de guardar, valida que los campos obligatorios estén completos.

Campos importantes por sección

Sección	Campos principales a validar
Aplicación	Nombre de aplicación.
Rol	Aplicación, nombre del rol y grupo, si aplica.
Permiso	Rol y permiso.
Menú	Permiso, título, tipo, ícono, remote entry, remote name, canal permitido y configuración de ruta si no requiere submenús.
Submenú	Menú padre, permiso, título, path, exposed module, canal permitido y visibilidad.
Submenú anidado	Menú, submenú padre, permiso, título, path, exposed module y canal permitido.

---

💾 Finalizar registro

Para finalizar el registro:

1. Revisa que la información capturada sea correcta.
2. Verifica que la estructura del árbol sea la esperada.
3. Confirma que los roles, permisos, menús y submenús estén relacionados correctamente.
4. Confirma la información en cada sección.
5. Espera el mensaje de confirmación del sistema.

El sistema puede mostrar mensajes como:

Aplicación creada correctamente.
Rol creado correctamente.
Permiso creado correctamente.
Menú creado correctamente.
Submenú creado correctamente.
Permiso asignado correctamente.

---

🔄 Generar otra aplicación

Al finalizar la configuración, el sistema puede mostrar la opción Generar otra aplicación.

Esta opción permite reiniciar el flujo para comenzar el registro o configuración de una nueva aplicación, sin tener que salir del módulo.

---

✅ Resultado esperado

Al finalizar el proceso:

• La aplicación quedará registrada.
• El rol quedará asociado a la aplicación.
• Los permisos quedarán creados correctamente.
• Los menús quedarán configurados con su permiso correspondiente.
• Los submenús quedarán relacionados con su menú padre, si aplica.
• Los submenús anidados quedarán relacionados con su submenú padre, si aplica.
• La estructura se visualizará en el árbol jerárquico.
• Los usuarios podrán visualizar las opciones de menú de acuerdo con sus roles y permisos asignados.

Los cambios se verán reflejados cuando el usuario actualice la página, vuelva a cargar la aplicación o inicie una nueva sesión.

---

📌 Consideraciones importantes

• El flujo de creación es progresivo; algunas secciones se habilitan hasta completar la información previa.
• La aplicación debe crearse antes de registrar roles.
• El rol debe crearse antes de registrar permisos.
• El permiso debe crearse antes de registrar menús.
• El menú debe indicar si requiere o no submenús.
• Si el menú requiere submenús, se habilitará la sección Submenú.
• Si el submenú requiere otro nivel, se habilitará la sección Submenú anidado.
• El nombre de la aplicación debe coincidir con el Client ID registrado en Keycloak.
• El nombre del rol debe coincidir con el rol configurado en Keycloak.
• Los permisos controlan el acceso y la visibilidad de menús, submenús y submenús anidados.
• Si se captura un grupo para el rol, no deben utilizarse espacios.
• El campo Canal permitido define dónde estará disponible el menú o submenú.
• El campo Orden define la posición en la que se mostrará el elemento dentro del menú.
• Si un menú será contenedor, utiliza el tipo sub.
• Si un menú navegará directamente a una vista, utiliza el tipo link.
• Una configuración incorrecta puede impedir que el menú o microfrontend cargue correctamente dentro del Shell.

---

🌐 Configuración del microfrontend

Si el menú, submenú o submenú anidado carga un microfrontend, valida cuidadosamente los siguientes campos antes de guardar:

Campo	Uso
Remote Entry	URL donde se encuentra el archivo remoteEntry.js.
Remote Name	Nombre del remoto configurado en el host.
Exposed Module	Módulo o componente expuesto desde el microfrontend.
Micro Frontend Type	Tipo de tecnología o configuración del microfrontend.

Ejemplo de Remote Entry:

https://prod-mfe.alpura.com/crm-ranchos/remoteEntry.js

Advertencia: Si la URL de Remote Entry, el Remote Name o el Exposed Module son incorrectos, la aplicación o vista puede no cargar correctamente dentro del Shell.

---

🧪 Validación posterior

Después de crear la aplicación, se recomienda validar lo siguiente:

1. Que la aplicación aparezca correctamente en el árbol de configuración.
2. Que el rol se encuentre asociado a la aplicación.
3. Que los permisos se hayan registrado correctamente.
4. Que el menú se visualice en la posición esperada.
5. Que los submenús se desplieguen correctamente, si aplica.
6. Que las rutas configuradas abran la vista correspondiente.
7. Que el microfrontend cargue correctamente desde el Shell.
8. Que los usuarios con el rol correspondiente puedan visualizar las opciones configuradas.