Saltar al contenido

Cambiar dinámicamente un icono en Jitterbit App Builder

Descripción general

Normalmente, un icono o imagen en una página se fija en tiempo de diseño, pero también puedes hacer que cambie dinámicamente según los datos subyacentes. Por ejemplo, en una página que muestra a las personas invitadas a un evento, puedes mostrar un icono de pulgar hacia arriba o hacia abajo según si cada persona asiste.

Los iconos dinámicos dependen del control Imagen: App Builder resuelve tanto sus conjuntos de iconos integrados como cualquier imagen que cargues a través de la misma biblioteca de imágenes unificada, por lo que una columna de Objeto de negocio o un control de Lista puede hacer referencia a un icono integrado por nombre, o a cualquier imagen por su GUID de URL relativa. Esta página cubre dos técnicas para seleccionar un icono basado en datos: una declaración IIF, mejor para dos o tres opciones fijas, y un control de Lista impulsado por una columna de datos, que se adapta a cualquier número de opciones.

Para ver una lista de los conjuntos de iconos que se incluyen con App Builder, incluido Font Awesome, consulta Categorías de iconos. Para explorar los iconos nombrados disponibles en la biblioteca Font Awesome específicamente, consulta fontawesome.com.

Si usas App Builder 4.67 o anterior, consulta App Builder 4.67 y anterior en su lugar.

Esta página cubre lo siguiente:

Buscar el GUID de URL relativa de una imagen

Ambas técnicas en esta página pueden hacer referencia a un icono integrado directamente por nombre (consulta los ejemplos a continuación). Para hacer referencia a una imagen cargada en su lugar, o para evitar escribir el nombre exacto del icono, usa su GUID de URL relativa, un identificador único para un registro específico en la biblioteca de imágenes. Para buscar este valor para una imagen ya en la biblioteca:

  1. Abre la imagen en App Builder.

  2. Copia el valor del campo URL relativa que aparece después de .../image/.

    image_24.png

Usar una declaración IIF

Para un estado con solo dos o tres opciones fijas, puedes insertar una declaración IIF en tu Objeto de negocio para determinar qué icono mostrar, haciendo referencia a cada opción por nombre o por GUID de URL relativa. Por ejemplo, para indicar asistencia a un evento, podrías usar una expresión como IIF(Status = Accept, 'thumbs-up', 'thumbs-down'), usando directamente el nombre de cada icono integrado. Para hacer referencia a una imagen cargada en su lugar, sustituye su GUID de URL relativa (buscado arriba) por el nombre.

image_25.png

Este enfoque funciona bien para un par de opciones fijas, pero no es escalable. Agregar un tercer estado, como un icono de signo de interrogación para una invitación que aún no ha sido aceptada o rechazada, significa escribir una declaración IIF más grande y complicada, y cada estado adicional significa más lógica que mantener. Para un estado con más opciones, o uno que pueda crecer con el tiempo, usa un control de Lista con una columna de Icono en su lugar.

Usar un control de Lista con una columna de Icono

Un control de Lista se usa típicamente para mostrar una lista de valores de texto, pero también puede mostrar una imagen junto al texto, o solo la imagen. Como el icono proviene de una columna en la tabla subyacente en lugar de la lógica que mantienes, esta técnica se adapta a cualquier número de estados: agregar una nueva opción solo significa agregar una nueva fila, no reescribir una declaración IIF.

Para mostrar un icono dinámico de esta manera, necesitas una columna que almacene el GUID de URL relativa de cada fila, para que el control de Lista pueda buscar la imagen correcta por registro. Continuando con el ejemplo de asistencia a un evento, ahora ampliado a un tercer estado Maybe:

  1. Crea una tabla Status con las columnas StatusID, Status e Icon.
  2. Completa la columna Icon con el GUID de URL relativa de cada estado (buscado como se describe arriba), una fila por estado, por ejemplo Accept, Decline y Maybe.
  3. Crea un Objeto de Negocio que se une a la tabla Status, trayendo su columna Icon. Por ejemplo, un objeto llamado Employee (Status).
  4. Construye un panel en ese Objeto de Negocio y agrega un control List usando las columnas StatusID y Status del objeto para mostrar las opciones.
  5. En los Atributos Adicionales del control, establece Icon (Column) en la columna Icon. Un control List siempre renderiza este valor como un icono.

Una vez configurado, App Builder resuelve el valor Icon de cada fila contra la biblioteca de imágenes y muestra el icono correspondiente junto a la opción de esa fila, de la misma manera que ya utiliza el valor Status de la fila como la etiqueta de la opción.