Cambiar un Icono Dinámicamente

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

A los efectos de este documento, nos referimos a íconos con nombre utilizando la biblioteca de íconos Font Awesome. App Builder se entrega con Font Awesome. Para ver una lista de los íconos con nombre disponibles, visita fontawesome.com.

Control de Iconos

El tipo de control Icono le 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 1 o 2 iconos, probablemente pueda insertar uno IIF en su objeto comercial y permita que éste 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. Para nuestro ejemplo, es posible que también quieras mostrar un ícono de signo de interrogación si la persona aún no ha aceptado o rechazado su invitación.

En el caso anterior, necesitarás hacer un ícono más grande y más complicado IIF para acomodar el tercer estado, o puede modificar su modelo de datos para incluir una columna que almacene el ícono. Los pasos a continuación lo guiarán en el caso en el que modifique su modelo de datos.

1. Para continuar con el ejemplo anterior, deberá crear una 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, Tal vez
3. A continuación, cree un objeto comercial que se una a la Status tabla. La nuestra se llama Empleado (Estado). Traeremos la Icon columna de la Status tabla para su uso.
4. Para utilizar esta información en su aplicación, asegúrese de que su panel esté basado en el objeto que acaba de crear. Cree un control llamado Estado como un tipo de control de lista utilizando el comando Estado (Lista) StatusID y Status para mostrar las opciones.

El uso de una columna es casi siempre mejor que una declaración IIF, porque una declaración IIF requerirá que implemente una nueva lógica cuando tenga un nuevo estado para tener en cuenta, pero si tiene una columna en una tabla de estado, podrá permitir que un usuario configure los íconos utilizados.

GUID de URL Relativa de la Imagen

El IIF la declaración utilizada para indicar qué icono se debe mostrar puede hacer referencia al GUID de URL relativo de la imagen. Para obtener el valor GUID de la imagen, vea 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 una 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 List se utiliza normalmente 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 List, simplemente debe ir a Atributos adicionales y seleccionar la columna que almacena su ImageID como el valor Icon. El uso del propósito de imagen de 'Icon' le permitirá tener íconos dinámicos de manera efectiva. Dado que un desarrollador puede agregar a la biblioteca de imágenes de una aplicación, este método para un 'ícono' dinámico es un poco más sólido que usar el control Icon.

Para utilizar un control de lista para íconos dinámicos, necesita tener una columna para almacenar su ImageID en la tabla que proporciona los valores de la lista. De esta manera, puede vincular cada uno de los valores de la lista a una imagen en particular en 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 en la lista, también extraerá un ImageID del objeto de lista para mostrar esa imagen junto con el texto.