Imagen (tipo de control) en Jitterbit App Builder

Un control de Imagen muestra una imagen de la biblioteca de imágenes unificada de App Builder en un panel de la capa de interfaz de usuario. Esta biblioteca contiene tanto las fotos que subes como los conjuntos de iconos integrados de App Builder, por lo que el mismo control de Imagen puede mostrar una foto cargada por el usuario, un logotipo estático o uno de los iconos integrados, dependiendo de cuál imagen selecciones y cómo configures el Propósito de imagen.

Añadir un control de Imagen

Para añadir un nuevo control de Imagen a un panel, usa el diálogo Añadir un control y selecciona Imagen como el Tipo de control:

Convertir un control existente a un control de Imagen

Para cambiar un control existente para usar el tipo de control Imagen:

1. Navega hasta el control, usando ya sea el Diseñador activo o el Banco de trabajo de la aplicación:

   • Desde la vista previa de la aplicación, abre la página que contiene el control y selecciona Cajón de acciones > Diseñador activo.

   • Desde el Banco de trabajo de la aplicación, abre la pestaña Páginas, luego en el panel Páginas, ubica la página que contiene el control y ya sea haz doble clic en su fila o haz clic en el icono Abrir registro. En el panel Diseño del panel de página, busca el panel que contiene el control y haz clic en Controles.

2. Si estás en el Diseñador activo, haz clic en el control en la vista de página; esto poblará el Diseñador activo con opciones de edición para ese control. Si estás en el Banco de trabajo de la aplicación, en el panel Controles, busca el control y ya sea haz doble clic en su fila o haz clic en el icono Abrir registro al final de su fila; App Builder abre un diálogo similar al del Diseñador activo.

3. En la pestaña Propiedades del control, establece el campo Tipo de control a Imagen.

4. En la pestaña Imagen, usa el campo Imagen para buscar y seleccionar una imagen. El menú desplegable incluye tanto fotos cargadas como los conjuntos de iconos integrados de App Builder; ve Categorías de iconos para los conjuntos de iconos disponibles. Si el registro de la imagen seleccionada tiene una Imagen oscura vinculada, el control automáticamente renderiza esa variante oscura en su lugar cuando el modo oscuro está activo; ve Imágenes de colección y modo oscuro para cómo se resuelve esto.

5. Establece el Propósito de imagen a Icono o Foto para coincidir con el tipo de imagen que seleccionaste. Esta configuración controla solo cómo renderiza la imagen; no filtra cuáles imágenes están disponibles para seleccionar.

6. (Opcional) Establece la Fuente de distintivo (Columna) a un valor de columna para mostrar un distintivo numérico en la imagen. Ve Distintivos con botones para detalles.

7. Haz clic en Guardar.

Actualiza la vista de la aplicación para confirmar la actualización.

Categorías de iconos

Los iconos se organizan por categorías en menús desplegables de selección como los presentes en el campo Icono en el diálogo Elemento de menú o el campo Imagen en un control Botón o Imagen. Conforme escribes en el campo de búsqueda del menú desplegable, aparecen iconos coincidentes en una lista agrupada bajo encabezados de categoría que representan diferentes fuentes de iconos.

Las siguientes categorías están disponibles:

Para más información sobre cómo cambiar los estilos de icono actualmente en uso, consulta Cambiar el relleno de un icono de sólido a regular.

Cargar y reemplazar una foto

Vincula un control Image con un control File para permitir que los usuarios carguen una nueva foto que reemplace la que se muestra actualmente. Establece el Image Purpose del control Image vinculado en Photo para este caso de uso.

Desactivar la variante de imagen oscura

Si el registro de una imagen tiene una Dark Image vinculada, un control Image que la muestre cambia a la variante oscura siempre que dark mode esté activo. Para un caso excepcional donde un control específico debe mostrar siempre la imagen exacta seleccionada, como en una lista donde la miniatura junto a una opción debe coincidir con la imagen exacta de esa opción, añade un enlace de parámetro Disable Dark Image establecido en true:

1. Abre el Live Designer en una página que tenga el control Image.
2. Selecciona el control Image para abrir sus propiedades.
3. Haz clic en el icono junto a Control Type para abrir el diálogo Parameter Bindings.
4. Haz clic en Create. Se abre el diálogo Parameter Binding.

5. Configura el enlace de parámetro:

   • Parameter: Selecciona Disable Dark Image.
   • Type: Selecciona Static Value.
   • Value: Ingresa true.

6. Haz clic en Save. El nuevo enlace aparece en la cuadrícula Parameter Bindings con su casilla Active seleccionada.

App Builder 4.67 y anteriores

En App Builder 4.67 y anteriores, los iconos integrados y las imágenes cargadas se almacenan por separado, por lo que el siguiente comportamiento difiere de lo que describe esta página:

• Los iconos integrados se muestran mediante un tipo de control Icon separado. Para mostrar un icono dinámicamente, pasa el nombre CSS del icono (por ejemplo, times-circle-o) al control Icon.
• El campo Image en los controles Image, Checkbox y List enumera solo las imágenes cargadas, no los conjuntos de iconos integrados.

Consulta Categorías de iconos para ver los conjuntos de iconos disponibles en App Builder.