Saltar al contenido

Cómo crear un menú en Jitterbit App Builder

Los menús son la forma principal de permitir que los usuarios naveguen por sus aplicaciones. Pueden proporcionar acceso a páginas específicas agrupándolas y listándolas en un formato que sea fácil de entender y usar. Algunos se configuran automáticamente cuando se crea una aplicación. Otros menús deben configurarse manualmente. Esta página describe el proceso de creación y configuración de un nuevo menú en App Builder.

Menús predeterminados

Por defecto, cada nueva aplicación tiene estos menús:

  • Página de inicio es el menú de página de inicio predeterminado para la aplicación.

  • Menú de aplicación es el menú que se establece como visible en la barra de herramientas de la aplicación.

  • Móvil define menús que son visibles solo en dispositivos móviles.

Puedes crear tus propios menús así como cambiar cuáles se muestran en tu aplicación.

Crear un menú

Para crear un menú, sigue estos pasos:

  1. Selecciona App Workbench > Capa de UI - Menú. Se abre el panel de Menús.

  2. El panel de Menús lista los menús que existen actualmente. El panel de Diagrama de Menú ilustra la estructura del menú seleccionado, incluidos cualquier submenú y sus elementos.

  3. Haz clic en el botón + Menú en el panel de Menú.

  4. Ingresa la siguiente información:

    crear un menú

    1. Nombre: Un nombre para el nuevo menú. Este es el único campo obligatorio.

    2. Ancho: Un valor de ancho fijo para el nuevo menú.

    3. Temas de elementos del menú: Si usas temas, elige uno aquí para aplicar estilo a los elementos del menú.

    4. Regla de origen: Elige una regla de origen subyacente.

    5. Público: Habilita para permitir que el menú se use en otra aplicación.

  5. Haz clic en el botón Guardar. Ahora puedes interactuar con el panel de Elementos del menú para agregar elementos a tu menú recién creado (consulta Agregar elementos al menú para aprender más).

Cuando se crea una nueva aplicación, App Builder configura automáticamente un menú llamado Página de inicio para ser el menú de la página de inicio y uno llamado Menú de la aplicación que se mostrará en el lado derecho de la barra de herramientas superior, visible en todas las páginas. Puedes cambiar estas configuraciones de visibilidad, como seleccionar tus propios menús para llenar esos roles, siguiendo estos pasos:

  1. Ve a App Workbench.

  2. Haz clic en la pestaña Configuración de la aplicación.

  3. En el panel Configuración de la aplicación, haz clic en Más > Caso extremo.

  4. Selecciona la pestaña Regiones - Controles:

    menú de la aplicación

    1. Bajo Menú de la aplicación, selecciona qué menú debería ser visible en el lado derecho de la barra de herramientas superior. El valor predeterminado es el menú con el mismo nombre.

    2. Bajo Página de inicio, selecciona una página para ser la página de inicio. El valor predeterminado es Inicio.

    3. Bajo Menú móvil, selecciona qué menú verán los usuarios en dispositivos móviles. El valor predeterminado es el menú Móvil.

    4. Bajo Menú del sistema, selecciona un menú que sea visible en el lado izquierdo de la barra de herramientas superior. Por defecto, no hay ninguno.

      Nota

      En el menú desplegable, hay una opción creada por el sistema llamada Menú del sistema. Cuando se selecciona, muestra íconos con algunas configuraciones útiles como auditoría, perfil de usuario, idiomas y otros. Sin embargo, todas estas configuraciones también están disponibles en el menú de hamburguesa a la derecha de la barra de herramientas superior.

Agregar elementos al menú

Para agregar elementos a un menú, localízalo accediendo a App Workbench > Capa de UI - Menú, y encontrándolo en el panel Menús.

Una vez que hayas encontrado el menú al que deseas agregar elementos, puedes hacer clic en el ícono , o hacer doble clic en su fila o su nombre en el panel Diagrama del menú para ver un desglose de sus elementos.

El panel Elementos del menú mostrará todos los elementos existentes en ese menú. Para agregar un nuevo elemento, haz clic en el botón + Elemento del menú y se abrirá el cuadro de diálogo Elemento del menú, que contendrá las siguientes pestañas:

  • Configuraciones: En esta pestaña, están disponibles los siguientes campos:

    • Tipos de Control de Menú: Selecciona Elemento de Menú si estás añadiendo una opción a un menú o Menú Anidado si estás creando un nuevo submenú.

    • Menú Padre: Selecciona el menú padre del elemento que estás creando.

    • Posición: Ingresa un número para definir el orden de visualización de este elemento.

    • Nombre: Ingresa el nombre del nuevo elemento.

    • Enlace a Página: Usa el menú desplegable para seleccionar a cuál de las páginas de tu aplicación debe enlazar este elemento.

  • Opciones de Enlace: En esta pestaña, está disponible el campo Enlace Externo. Úsalo si deseas que el elemento enlace a un recurso web externo. La URL ingresada debe comenzar con https:// o http://.

  • Opciones de Visualización: En esta pestaña, están disponibles los siguientes campos:

    • Etiqueta: Define una etiqueta que aparecerá en el menú.

    • Etiqueta de Tooltip: Define el texto del tooltip que aparecerá cuando un usuario pase el cursor sobre el elemento.

    • Imagen: Usa el menú desplegable para seleccionar una imagen para asociar con el elemento.

    • Ícono: Usa el menú desplegable para seleccionar un ícono para asociar con el elemento.

    • Visibilidad de Etiqueta: Selecciona si la etiqueta debe ser Visible o Oculta en la aplicación.

    • Tema: Si usas temas, elige uno aquí para aplicar estilo al elemento.

    • Activo: Esta casilla determina si el elemento se mostrará en el menú (habilitado por defecto).

Haz clic en Guardar para confirmar tus configuraciones y guardar el nuevo elemento.