Cambiar dinámicamente un icono en Jitterbit App Builder

Los iconos suelen ser estáticos e inmutables, pero a veces necesitarás mostrar un icono diferente según los datos. Por ejemplo, en una página que muestra a las personas invitadas a un evento, podrías mostrar un icono de pulgar hacia abajo o hacia arriba para indicar si asistirán o no. A continuación se presentan ejemplos de cómo implementar un icono dinámico en tu aplicación.

Para los propósitos de este documento, nos referimos a iconos nombrados utilizando la biblioteca de iconos Font Awesome. App Builder incluye Font Awesome, así como conjuntos de iconos adicionales descritos en Categorías de iconos. Para ver una lista de los iconos nombrados disponibles en Font Awesome, consulta fontawesome.com.

Control de icono

El tipo de control Icono permite pasar el nombre CSS de un icono (como times-circle-o) y lo busca en la biblioteca de iconos para mostrarlo. No es posible agregar a la biblioteca de iconos.

Si solo tienes 1 o 2 iconos, probablemente puedas insertar una declaración IIF en tu Objeto de Negocio y permitir que esa determine qué icono mostrar. Por ejemplo, si deseas indicar la asistencia a un evento, tendrías algo como IIF(Status = Accept, 'thumbs-up', 'thumbs-down'). Este escenario funciona bien cuando tienes solo un par de opciones para elegir, pero se complicará a medida que necesites acomodar más opciones. Para nuestro ejemplo, también podrías querer mostrar un icono de signo de interrogación si la persona aún no ha aceptado ni rechazado su invitación.

En el caso anterior, necesitarás hacer una declaración IIF más grande y complicada para acomodar el tercer estado, o puedes alterar tu modelo de datos para incluir una columna que almacene el icono. Los pasos a continuación te guiarán a través del caso en el que alteras tu modelo de datos.

1. Para continuar con el ejemplo anterior, necesitarás crear una tabla Status con columnas para StatusID, Status e Icon.
2. Asegúrate de ingresar información, incluidos los títulos de los iconos, en la tabla Status para cada Estado. Por ejemplo: Sí, No, Quizás
3. A continuación, crea un Objeto de Negocio que se una a la tabla Status. El nuestro se llama Employee (Status). Traeremos la columna Icon de la tabla Status para usarla.
4. Para usar esta información en tu aplicación, asegúrate de que tu panel esté construido en el objeto recién creado. Crea un control llamado Status como un Tipo de Control de Lista usando StatusID y Status de Status (List) para mostrar las opciones.

Usar una columna casi siempre es superior a una declaración IIF, porque una declaración IIF te requerirá implementar nueva lógica cuando tengas un nuevo estado que considerar, pero si tienes una columna en una tabla de estado, podrás permitir que un usuario configure los iconos utilizados.

GUID de URL relativa de imagen

La declaración IIF utilizada para indicar qué Icono mostrar puede hacer referencia al GUID de URL relativa de la imagen. Para obtener el valor GUID de la imagen, visualiza la Imagen en App Builder y copia el valor del campo URL relativa que aparece después de .../image/. Este valor ahora se puede usar en la declaración IIF según corresponda.

Ejemplo de un GUID de URL relativa de imagen

Ejemplo de declaración IIF que hace referencia al GUID de URL relativa de imagen

Control de lista

El control de Lista se utiliza típicamente para mostrar una lista de valores de texto, pero también puede mostrar una imagen junto con el texto, o solo la imagen en sí. Al configurar el control de Lista, simplemente necesitas ir a Atributos adicionales y seleccionar la columna que almacena tu ImageID como el valor de Icono. Usar el Propósito de Imagen de 'Icono' te permitirá efectivamente tener iconos dinámicos. Dado que un desarrollador puede agregar a la biblioteca de Imágenes de una aplicación, este método para un 'icono' dinámico es un poco más robusto que usar el control de Icono.

Para hacer uso de un Control de Lista para iconos dinámicos, necesitas tener una columna para almacenar tu ImageID en la tabla que proporciona los valores de la Lista. De esta manera, puedes vincular cada uno de los valores de la lista a una imagen particular en la Colección de tu Aplicación. De la misma manera que extraes un valor de Título de un objeto de lista para mostrarlo como texto en la lista, también extraerás un ImageID del objeto de lista para mostrar esa imagen junto al texto.