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 tus aplicaciones. Pueden proporcionar acceso a páginas específicas agrupándolas y listándolas en un formato fácil de entender y usar. Algunos se configuran automáticamente cuando creas una aplicación. Otros menús debes configurarlos tú mismo. Esta página describe el proceso de crear y configurar un nuevo menú en App Builder.

Menús predeterminados

De forma predeterminada, cada aplicación nueva tiene estos menús:

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

  • Menú de aplicación es el menú configurado para ser visible en la barra de herramientas de la aplicación.

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

También 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 > UI Layer - Menu. Se abre el panel Menus.

  2. El panel Menus lista los menús que existen actualmente. El panel Menu Diagram ilustra la estructura del menú seleccionado, incluyendo cualquier submenú y sus elementos.

  3. Haz clic en el botón + Menu en el panel Menu.

  4. Ingresa la siguiente información:

    create a menu

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

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

    3. Menu Item Themes: Si utilizas temas, elige uno aquí para aplicar estilos a los elementos del menú.

    4. Source Rule: Selecciona una regla de origen subyacente.

    5. Public: Activa esta opción para permitir que el menú se use en otra aplicación.

  5. Haz clic en el botón Save. Ahora puedes interactuar con el panel Menu Items para agregar elementos a tu menú recién creado (consulta Agregar elementos de menú para obtener más información).

Cuando se crea una nueva aplicación, App Builder configura automáticamente un menú llamado Página de inicio para ser el menú de página de inicio y otro llamado Menú de aplicación para mostrarse 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 App Settings.

  3. En el panel App Settings, haz clic en More > Edge Case.

  4. Selecciona la pestaña Regions - Controls:

    application menu

    1. En Application Menu, selecciona qué menú debe ser visible en el lado derecho de la barra de herramientas superior. El predeterminado es el menú con el mismo nombre.

    2. En Home Page, selecciona una página para ser la página de inicio. El predeterminado es Home.

    3. En Mobile Menu, selecciona qué menú verán los usuarios en dispositivos móviles. El predeterminado es el menú Mobile.

    4. En System Menu, selecciona un menú para ser visible en el lado izquierdo de la barra de herramientas superior. De forma predeterminada, no hay ninguno.

      Nota

      En la lista desplegable, hay una opción creada por el sistema llamada System Menu. Cuando se selecciona, muestra iconos 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ú hamburguesa a la derecha de la barra de herramientas superior.

Agregar elementos de menú

Para agregar elementos a un menú, ubícalo accediendo a App Workbench > UI Layer - Menu y encontrándolo en el panel Menus.

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

El panel Menu Items mostrará todos los elementos existentes en ese menú. Para agregar un nuevo elemento, haz clic en el botón + Menu Item y se abrirá el diálogo Menu Item, que contiene las siguientes pestañas:

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

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

    • Menú Principal: Selecciona el menú principal 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.

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

  • Opciones de Vínculo: En esta pestaña, está disponible el campo Vínculo Externo. Úsalo si deseas que el elemento se vincule 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 Información: Define el texto de información que aparecerá cuando un usuario pase el cursor sobre el elemento.

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

    • Icono: Usa el menú desplegable para buscar y seleccionar un icono para asociar con el elemento. Consulta Categorías de iconos para ver los conjuntos de iconos disponibles.

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

    • Tema: Si utilizas temas, elige uno aquí para aplicar estilos al elemento.

    • Activo: Esta casilla de verificación determina si el elemento se mostrará en el menú (habilitado de forma predeterminada).

Haz clic en Guardar para confirmar tu configuración y guardar el nuevo elemento.