Diseño de una barra de menú interactiva y dinámica en la aplicación Qodly

En el blog de esta semana, daremos un vistazo a la navegación. La navegación es un elemento clave de toda aplicación web. Un sistema de navegación bien estructurado permite a los usuarios encontrar rápidamente lo que necesitan y mejora su experiencia global.

Con 4D Qodly Pro, la gestión de la navegación es simple y flexible. Usando el componente Page Loader, puede cargar páginas dinámicamente basándose en las acciones del usuario.

En este blog, exploraremos cómo configurar una barra de navegación eficiente utilizando 4D Qodly Pro. Utilizaremos nuestra aplicación Performance Review como ejemplo, que puede descargar desde GitHub (enlace por añadir). Cubriremos su diseño, interacciones y gestión de permisos para crear una experiencia fluida adaptada a cada rol de usuario.

Aplicación de evaluación de rendimiento

Carga de páginas con el cargador de páginas

Cargar una página con 4D Qodly Pro es intuitivo. Simplemente arrastre y suelte el componente Page Loader en su interfaz y asócielo con una fuente de datos textuales.

El Page Loader carga automáticamente la página correspondiente al valor almacenado en la fuente de datos. Al actualizar este valor, los usuarios pueden navegar sin problemas entre las diferentes páginas de la aplicación.

Elegir el tipo de navegación adecuado

Ahora que entendemos cómo cargar páginas utilizando el cargador de páginas, necesitamos determinar cómo modificar dinámicamente esta fuente de datos para facilitar una navegación fluida e intuitiva.

Existen tres tipos principales de navegación:

• Barra de menús: una barra de navegación tradicional, siempre visible, ideal para un acceso rápido.
• Menú hamburger: un menú plegable al que se accede a través de un icono, perfecto para aplicaciones móviles.
• Menú lateral: situado en un lateral, adecuado para aplicaciones complejas con varias secciones.

 

El tipo de navegación debe elegirse en función de las necesidades específicas de su aplicación y de los usuarios a los que se dirige. Un sistema de navegación bien diseñado mejora la experiencia del usuario y garantiza un fácil acceso a las funcionalidades claves.

Para la aplicación Performance Review, optamos por una barra de menús clásica. Este enfoque permite un acceso rápido a las diferentes secciones al tiempo que garantiza una experiencia fluida tanto en dispositivos de escritorio como en tabletas.

Creación de una barra de navegación

Nuestra barra de navegación está diseñada para ser sencilla, eficiente y fácil de usar. Estas son sus principales características:

• Una barra de navegación de altura fija con una opción adhesiva para permanecer visible en la parte superior.
• El icono y el nombre de la aplicación.
• Un menú desplegable de Recursos Humanos que contiene:
  • Colaborador
  • Comentarios
  • Formación
• Un botón Gerente (Manager).
• Un botón Colaborador.
• El nombre del usuario conectado.
• Un botón Cerrar sesión (Logout).

 

 

Creación de la barra superior

La barra de navegación se muestra en la parte superior de la pantalla en todo momento. Para lograr esto, creamos una caja de estilo con una propiedad sticky:

• position: sticky asegura que la barra permanezca visible durante el desplazamiento.
  
• top: 0 y left: 0 posicionan la barra en la parte superior izquierda de la página.

 

 

Añadir el icono y el título de la aplicación

Utilizamos una caja de estilo con Flexbox para alinear los elementos y mantener la capacidad de respuesta a través de varios tamaños de pantalla.

En esta caja:

• Un componente Imagen para el icono.
• Un componente Texto para mostrar el nombre de la aplicación.

Creación de los menús

Se añade una segunda caja de estilo (utilizando Flexbox) para contener tanto el menú desplegable como los dos botones de navegación.

Creación del menú desplegable Recursos humanos

Para crear el menú desplegable, utilizamos un componente personalizado llamado Popover. Puede descargar este componente de GitHub.

• Arrastre y suelte el componente Popover en su página.
• En la sección del menú, añada un texto estático titulado Recursos Humanos.
• En la sección de superposición, inserte tres botones denominados Colaborador, Revisiones y Formación.

Para más detalles sobre los componentes personalizados, consulte nuestra entrada anterior del blog: «Ampliar nuestra aplicación Qodly con componentes personalizados»

Añadir el botón Gerente y Colaborador

Simplemente añada dos botones separados etiquetados como «Gerente « y «Colaborador».

Creando el área de información

Una tercera caja de estilo (utilizando Flexbox) se utiliza para mostrar el nombre del usuario conectado y ofrecer una acción de cierre de sesión.

• Un componente Texto, vinculado a la fuente de datos Nombre de usuario, muestra el nombre del usuario conectado en la parte derecha de la barra de navegación.

• El botón Salir permite a los usuarios cerrar la sesión rápidamente. En el evento onClick del botón, asigne la acción de cierre de sesión de estándar por autenticación.

Para obtener más información sobre la autenticación, consulte esta entrada anterior del blog: Integrando la autenticación de usuarios en sus aplicaciones Qodly.

Implementando Interacciones de Navegación

La navegación se gestiona a través de una variable llamada pageName, que actúa como fuente de datos para el cargador de páginas.

• Cada elemento del menú está asociado a una acción que actualiza el valor de pageName.
• Cuando el usuario presiona un botón, se carga dinámicamente la página correspondiente.
• Para cada botón, aplicamos la acción Set Datasource en el evento onClick:
  • pageName = «CollaboratorPage» para mostrar la página Colaborador.
  • pageName = «ManagerPage» para mostrar la página del Gerente.
  • Y así sucesivamente…

Este enfoque garantiza una experiencia de navegación fluida y rápida sin recargar la aplicación.

Gestión de AUTORIZACIONEs

No todos los botones del menú son visibles para todos los usuarios. Su visibilidad depende de los roles de usuario:

• Colaborador: acceso sólo a la página Colaborador.
• Administrador: acceso a las páginas Administrador y Colaborador.
• RH: acceso a todas las páginas.

Utilizamos la gestión de estados para controlar dinámicamente qué opciones son visibles en función del rol del usuario conectado.

Gestión de múltiples roles

Un Gerente tiene un doble rol:

• Como colaborador, realiza su propia evaluación de rendimiento.
• Como Gerente, revisa y valida las evaluaciones de rendimiento de los miembros de su equipo.

Para ello, definimos dos fuentes de datos:

• userInfo.maxRole: representa el rol más alto asignado al usuario.
• userInfo.role: representa el rol actualmente activo que el usuario está utilizando.

 

Alimentación de las fuentes de datos:

Durante la autenticación, utilizando la función ds.authentify(), la información del usuario se almacena en el almacenamiento de sesión:

var $obj : Object
$obj :=Session.storage

If ($obj.Employee=Null)
Use ($obj)
$obj .Employee:=New shared object
End use
End if

Use ($obj.Employee)
$obj .Employee.ID:=$employee.ID
$obj .Employee.name:=$employeeFirstname+" "+$employee.Lastname
$obj .Employee.role:="Colaborador"
$obj .Employee.maxRole:="Colaborador"
End Use

Se proporciona una función de ayuda getUserInfo() para recuperar los detalles del usuario dentro de la página Web:

exposed Function getUserInfo: Object
If (Session=Null)
return Storage .Employee
Else
return Session .storage.Employee
End if

En el evento onClick del botón de inicio de sesión, se llaman ambas funciones:

• ds.authentify()
• ds.getUserInfo()

 

Creación y configuración de estados:

• Haga clic en el botón «+», para añadir estados.

 

 

• Cree un estado maxManager, en el que el menú Recursos Humanos esté oculto (display: none).

 

 

• Crear un estado maxColaborador, en el que las opciones Recursos Humanos, Gerente y Colaborador estén ocultas. Dado que un Colaborador sólo tiene acceso a una página, el menú de navegación resulta innecesario.

 

 

Definir reglas de visualización condicionales:

Queremos:

• Si userInfo.maxRole = «hr», mostrar el estado por defecto.
• Si userInfo.maxRole = «manager», mostrar el estado Manager.
• Si userInfo.maxRole = «collaborator», mostrar el estado Collaborator.

Estas reglas se implementan fácilmente utilizando el editor de configuración de estados condicionales de Qodly Studio.

Para más detalles sobre la gestión de estados, de un vistazo a nuestra entrada de blog anterior: Haga que sus aplicaciones Qodly sean dinámicas e interactivas con estados.

Existen otros estados para gestionar el menú, la ventana de inicio de sesión o el elemento de menú seleccionado. Depende de usted explorar cómo se configura, y no dude en unirse al foro si tiene alguna pregunta.

Optimización para diferentes tamaños de pantalla

Nuestra aplicación está diseñada tanto para ordenadores de escritorio como para tabletas. Para garantizar una experiencia de usuario óptima, la barra de navegación es totalmente adaptable.

• Ocultando ciertos elementos cuando la pantalla es demasiado pequeña (por ejemplo, el nombre de la aplicación y el nombre del usuario conectado).
• Reorganizar el menú en columnas en pantallas pequeñas para maximizar el espacio.

 

La ocultación dinámica de elementos se gestiona mediante peticiones media CSS (por ejemplo, utilizando max-width), mientras que Flexbox con la opción Wrap garantiza que el menú se ajuste automáticamente en función del espacio disponible.

• Pantalla grande

• Pantalla mediana

• Pantalla pequeña

Para más información sobre la personalización CSS en Qodly Studio, consulte nuestro blog anterior: Personalice sus interfaces Qodly con CSS.

Siguientes pasos

Ahora tiene los elementos esenciales para crear una barra de navegación interactiva y dinámica con 4D Qodly Pro.

Le animamos a compartir sus implementaciones y hacer preguntas en el Foro 4D para seguir participando con la comunidad.