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 y página de inicio

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

• Menú de Aplicación 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.

• Inicio es la página predeterminada utilizada como la página de inicio de la aplicació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 actualmente existen. 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:

   

   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 usas temas, elige uno aquí para aplicar estilos a los elementos del menú.

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

   5. Public: Actívalo 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 del menú para obtener más información).

Visibilidad del menú

Cuando se crea una nueva aplicación, App Builder automáticamente configura Inicio como la página de inicio de la aplicación y establece un menú 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, 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:

   

   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 Inicio.

   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 el menú desplegable, hay una opción creada por el sistema llamada System Menu. Cuando se selecciona, 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 del 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 en 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 la lista desplegable para seleccionar a cuál de las páginas de tu aplicación debe vincularse este elemento.

• Opciones de Vínculo: 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 que se carga la página vinculada: Predeterminado, Agregar o Editar.

    • Destino del Vínculo: Elige dónde se abrirá la página vinculada; si en la ventana actual, en una nueva pestaña, etc.

    • Reemplazar Página en 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 más detalles.

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

    • Vínculo Externo: Ingresa un vínculo 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 Vínculo.

  Si el destino del vínculo de un elemento de menú cambia a uno que no admite Reemplazar Página en Historial (por ejemplo, cambiar de Vincular a Página a un Vínculo Externo que no se abre en la pestaña del navegador actual), App Builder desactiva automáticamente Reemplazar Página en Historial en lugar de dejarlo habilitado 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 pase el cursor sobre el elemento.

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

  • Icono: Usa la lista 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).

• Características de Origen: Esta pestaña aparece solo cuando el menú tiene una Regla de Origen. En esta pestaña, están disponibles los siguientes campos, utilizando las columnas de esa regla de origen:

  • Columna de Origen: Selecciona la columna en la regla de origen que proporciona los datos del elemento, como un UUID de imagen.

  • Tipo de Control: Selecciona Botón o Imagen para determinar cómo se muestran los valores.

  • Tema Condicional: Después de guardar el elemento, haz clic en el icono para aplicar un estado o estilo al elemento solo cuando se cumple una condición en una columna de la regla de origen, por ejemplo para ocultar el elemento. Consulta Aplicar un tema condicional a un elemento de menú.

  • Columna de Distintivo: Selecciona la columna en la regla de origen cuyo valor aparece como un distintivo numérico en el elemento.

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 puede mostrarse directamente dentro de un panel de Formulario, en lugar de solo asignarse a un rol de menú desde Configuración de Aplicación. Para hacer esto, agrega un control de Menú Insertado al panel. Consulta Menú Insertado para obtener detalles sobre la configuración del control.