Cambiar dinámicamente un ícono en Jitterbit App Builder

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

A efectos de este documento, nos referimos a los iconos con nombre que utilizan la biblioteca de iconos Font Awesome. App Builder se entrega con Font Awesome. Para ver una lista de los iconos con nombre disponibles, visite fontawesome.com.

Control de iconos

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 agregarlo a la biblioteca de iconos.

Si solo tiene uno o dos iconos, probablemente pueda insertar uno. IIF en su objeto de negocio y permita que este determine qué icono mostrar. Por ejemplo, si desea indicar la asistencia a un evento, tendría algo como IIF(Status = Accept, 'thumbs-up', 'thumbs-down')Este escenario funciona bien cuando solo tienes un par de opciones para elegir, pero se complicará a medida que necesites incluir más opciones. En nuestro ejemplo, también podrías mostrar un icono de signo de interrogación si la persona aún no ha aceptado o rechazado su invitación.

En el caso anterior, tendrás que crear un icono más grande y complejo. IIF para acomodar el tercer estado, o puede modificar su modelo de datos para incluir una columna que almacene el icono. Los siguientes pasos le guiarán en el caso de modificar su modelo de datos.

1. Para continuar con el ejemplo anterior, deberá crear un Status tabla con columnas para StatusID, Status, y Icon.
2. Asegúrese de ingresar información, incluidos los títulos de los íconos, en el Status Tabla para cada estado. Por ejemplo: Sí, No, Quizás.
3. A continuación, cree un objeto de negocio que se una a la Status tabla. La nuestra se llama Empleado (Estado). Traeremos el Icon columna de la Status Tabla para su uso.
4. Para usar esta información en su aplicación, asegúrese de que su panel esté basado en el objeto recién creado. Cree un control llamado Estado como tipo de control de lista usando la función Estado (Lista). StatusID y Status Para mostrar las opciones.

Usar una columna es casi siempre mejor que una sentencia IIF, ya que esta última requiere desplegar nueva lógica al tener un nuevo estado que considerar. Sin embargo, si tiene una columna en una tabla de estado, podrá permitir que un usuario configure los iconos utilizados.

GUID de URL relativa de la imagen

El IIF La instrucción que indica qué ícono mostrar puede hacer referencia al GUID de la URL relativa de la imagen. Para obtener el valor del GUID de la imagen, visualice la imagen en App Builder y copie el valor del campo URL relativa que aparece después. .../image/Este valor ahora se puede utilizar en el IIF Declaración en consecuencia.

Ejemplo de un GUID de URL relativa de una imagen

Ejemplo de declaración IIF que hace referencia a la GUID de URL relativa de una imagen

Control de lista

El control Lista se usa normalmente para mostrar una lista de valores de texto, pero también puede mostrar una imagen junto con el texto, o solo la imagen. Al configurar el control Lista, simplemente vaya a Atributos adicionales y seleccione la columna que almacena su ID de imagen como valor de Ícono. Usar el propósito de imagen de "Ícono" le permitirá tener íconos dinámicos de forma efectiva. Dado que un desarrollador puede agregar elementos a la biblioteca de imágenes de una aplicación, este método para un "ícono" dinámico es un poco más robusto que usar el control Ícono.

Para usar un control de lista con iconos dinámicos, necesita una columna que almacene su ImageID en la tabla que proporciona los valores de la lista. De esta forma, puede vincular cada valor de la lista a una imagen específica de la colección de su aplicación. De la misma manera que extrae un valor de título de un objeto de lista para mostrarlo como texto, también extrae un ImageID del objeto de lista para mostrar esa imagen junto con el texto.