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 enumerá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 creación y configuración de un nuevo menú en App Builder.

Menús predeterminados y página de inicio

De forma predeterminada, cada nueva aplicación tiene los siguientes menús y página de inicio:

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

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

  • Home es la página predeterminada que se usa como página de inicio de la aplicación.

Puedes crear tus propios menús y también 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 enumera 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 Menus.

  4. Ingresa la siguiente información:

    crear un menú

    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 Home como página de inicio de la aplicación y establece un menú llamado Application Menu para que se muestre en el lado derecho de la barra de herramientas superior, visible en todas las páginas. Puedes cambiar estas configuraciones, como seleccionar tu propia página o 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:

    menú de la aplicación

    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 que sea 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 que sea 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 la seleccionas, muestra iconos con algunos ajustes útiles como auditoría, perfil de usuario, idiomas y otros. Sin embargo, todos estos ajustes 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 búscalo 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 añadiendo 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: Utiliza el desplegable para seleccionar a cuál de las páginas de tu aplicación debe vincularse este elemento.

  • Opciones de Enlace: Los campos disponibles en esta pestaña dependen de si se selecciona una página en el campo Vincular a Página de la pestaña Configuración:

    • Si se selecciona una página, esta pestaña muestra estos campos:

      • Estado Inicial de Página Vinculada: Selecciona el estado inicial en el que se carga la página vinculada: Predeterminado, Agregar o Editar.

      • Destino del Enlace: Elige dónde se abrirá la página vinculada; ya sea en la ventana actual, en una nueva pestaña, etc.

      • Reemplazar Página en el Historial: Elige a dónde regresa el botón < Atrás después de que se carga la página vinculada; consulta Configurar cómo se abren las páginas vinculadas para obtener más detalles.

    • Si no se selecciona ninguna página en Vincular a Página, esta pestaña muestra este campo:

      • Enlace Externo: Ingresa un enlace a otra página en el servidor de App Builder o a un recurso web externo; la URL ingresada debe comenzar con https:// o http://. Una vez que se ingresa un valor, también aparece el campo Destino del Enlace.

    Si el destino del enlace de un elemento de menú cambia a uno que no admite Reemplazar Página en el Historial (por ejemplo, al cambiar de Vincular a Página a un Enlace Externo que no se abre en la pestaña del navegador actual), App Builder desactiva automáticamente Reemplazar Página en el Historial en lugar de dejarla habilitada sin efecto.

  • 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 pasa el ratón sobre el elemento.

    • Imagen: Utiliza el desplegable para buscar y seleccionar una imagen para asociar con el elemento.

    • Icono: Utiliza el 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 estar Visible u Oculta en la aplicación.

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

    • Activo: Esta casilla 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.

Agregar un menú a un panel de Formulario

Cualquier menú que hayas creado también se puede mostrar directamente dentro de un panel Formulario, en lugar de solo asignarlo a un rol de menú desde Configuración de Aplicación. Para hacer esto, añade un control Menú Insertado al panel. Consulta Menú Insertado para obtener más detalles sobre cómo configurar el control.