Saltar al contenido

El menú admite objetos de datos en Jitterbit App Builder

Los menús admiten la capacidad de utilizarse con un objeto de datos. Esta función admite lo siguiente:

  • Etiquetas dinámicas, permitiendo cosas como "Bienvenido {{Username}}"
  • Enlaces dinámicos, incluyendo criterios de vinculación en esos enlaces
  • Imágenes dinámicas como perfiles de usuario
  • Temas condicionales
  • Reglas de visibilidad que podrían controlar la visibilidad de los elementos del menú

Menucontrol

Cómo configurar un menú existente con un objeto de datos

  1. Selecciona App Workbench > UI Layer - Menu.
  2. En el panel Menus, haz clic en el icono del menú existente.
  3. En el panel Menu, haz clic en Edit.
  4. En el campo Source Rule, selecciona el objeto de datos a utilizar.
  5. Haz clic en Save.

Cómo configurar un nuevo menú con un objeto de datos

  1. Selecciona App Workbench > UI Layer - Menu.
  2. Haz clic en + Menu en el panel Menus.
  3. Asigna un Name para el menú. Por ejemplo: North Sales Menu.
  4. Haz clic en el icono Menu Item Themes para configurar cualquier información de tema del menú.
  5. Selecciona el objeto de datos apropiado del desplegable Source Rule.
  6. Haz clic en Save.

Después de configurar la información anterior, si utilizas un menú nuevo en lugar del Application Menu predeterminado, también necesitas seleccionarlo en la configuración de la aplicación:

  1. Ve a App Workbench.
  2. En el panel App Settings, haz clic en More > Edge Case.
  3. Haz clic en la pestaña Regions - Controls.
  4. En Application Menu, Mobile Menu, o System Menu, selecciona el nuevo menú. El cambio se aplica inmediatamente.

Consulta Menu visibility para conocer qué controla cada uno de estos menús.

Aplicar un tema condicional a un elemento del menú

Un tema condicional establece el estado o estilo de un elemento del menú cuando se cumple una condición en una columna de la regla de origen del menú. Por ejemplo, puedes ocultar un elemento del menú cuando una columna booleana en la regla de origen es true. El menú ya debe tener una Source Rule (consulta las secciones anteriores).

Para aplicar un tema condicional a un elemento del menú, sigue estos pasos:

  1. Selecciona App Workbench > UI Layer - Menu.

  2. En el panel Menus, busca el menú que tiene la regla de origen, después abre el elemento del menú que deseas formatear, como se describe en Add menu items. Si el elemento es nuevo, guárdalo primero, porque el campo Conditional Theme aparece solo después de que el elemento se haya guardado.

  3. Haz clic en la pestaña Source Features.

  4. Junto a Conditional Theme, haz clic en el icono . Se abre el diálogo Styles, mostrando cualquier estilo existente y formatos condicionales del elemento.

  5. Haz clic en + Conditional Formatting. Se abre el diálogo Apply a Style.

  6. En Condition, configura cuándo se aplica el tema:

    • Source Column: Selecciona una columna de la regla de origen del menú.

    • Operator: Selecciona cómo comparar la columna con la expresión. Por ejemplo: =. El campo Expression aparece después de que selecciones un operador.

    • Expression: Ingresa el valor para comparar, o selecciona otra columna de la regla de origen. Por ejemplo: true.

    • Unconditional: Selecciona para aplicar la configuración independientemente de cualquier condición. Esto oculta los otros campos de condición.

  7. En Settings, configura qué sucede cuando se cumple la condición:

  8. Haz clic en Save. El formato condicional aparece en el diálogo Styles. Cierra el diálogo y regresa a la aplicación para actualizar el navegador y confirmar que el elemento del menú se comporta como se esperaba.

Cómo insertar una imagen en un menú

Puede haber casos de uso en los que quieras mostrar una imagen dentro de un Menú. Con esta nueva función, tienes la capacidad de mostrar una imagen dentro de la región del Menú, y esa imagen puede basarse en información almacenada en el objeto de datos que conectas al Menú. Este ejemplo asume que ya tienes un objeto de datos con una Columna que captura la información de UUID de la imagen.

Nota

Las imágenes se pueden almacenar en el objeto de datos como UUID, cadena base64 o tipo de columna binaria con la imagen misma en ella.

Menuimage

Para localizar un UUID de imagen almacenado localmente

  1. Haz clic en Look & Feel en la barra superior.
  2. Haz clic en la pestaña Images.
  3. Usa el menú desplegable Collection para seleccionar la colección donde subiste la imagen para que se almacene localmente.
  4. En el panel Images, abre la imagen para la que quieres obtener el valor de UUID.
  5. Selecciona la parte del valor de Relative URL que aparece después de /image/. Por ejemplo: 50e85d87-e283-4953-983f-0bc3e18b3a7e.
  6. Copia el valor a tu portapapeles.
  7. El valor de UUID es lo que quieres almacenar en una columna en el objeto de datos o regla que se referencia desde el menú.

Para agregar una imagen a un menú desde un objeto de datos

  1. Selecciona App Workbench > UI Layer - Menu.

  2. En el panel Menus, selecciona el menú al que quieres agregar la imagen. La Source Rule del menú debe ser el objeto de datos o regla que contiene la columna de imagen.

  3. En el panel Menu Items, haz clic en + Menu Item.

  4. En la pestaña Settings, confirma que Menu Control Types esté configurado en Menu Item e ingresa un Name.

  5. Haz clic en la pestaña Source Features.

  6. Usa el menú desplegable Source Column para seleccionar la columna que contiene la imagen. Por ejemplo: Avatar.

  7. Establece Control Type en Image.

  8. Haz clic en Save.

  9. (Opcional) En la columna Alignment del panel Menu Items, establece la alineación del elemento. Por ejemplo: Right.

  10. Regresa a la capa de interfaz de usuario de la aplicación, actualiza tu navegador web y verifica los resultados.

Información adicional

Si estás buscando agregar una imagen de logo personalizado a una App, consulta Cómo agregar un logo a una app