Cambiar Dinámicamente un Icono¶

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 las personas que han sido invitadas a un evento, podría mostrar un ícono de pulgar hacia abajo o hacia arriba para indicar si asisten o no. A continuación se muestran ejemplos de cómo puede desplegar un ícono dinámico en su aplicación.

A los efectos de este documento, nos referimos a íconos con nombre que utilizan la biblioteca de íconos de Font Awesome. El Vinyl se envía con Font Awesome. Para ver una lista de los íconos con nombre disponibles, consulte 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 agregar a la biblioteca de íconos.

Si solo tiene 1 o 2 íconos, probablemente pueda insertar uno IIF declaración en su objeto de negocio y permita que 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 sólo tienes un par de opciones para elegir, pero se volverá complicado a medida que necesites acomodar más opciones. Para nuestro ejemplo, es posible que también quieras 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 necesitarás hacer un archivo más grande y más complicado. IIF declaración para acomodar el tercer estado, o puede modificar su modelo de datos para incluir una columna que almacene el icono. Los pasos a continuación lo guiarán a través del caso en el que modifica 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 al Status mesa. El nuestro se llama Empleado (Estado). traeremos el Icon columna de la Status mesa para su uso.
4. Para utilizar esta información en su aplicación, asegúrese de que su panel esté construido sobre el objeto que acaba de crear. Cree un control llamado Estado como tipo de control de lista utilizando Estado (Lista) StatusID y Status para mostrar las opciones.

Usar una columna casi siempre es mejor que una declaración IIF, porque una declaración IIF requerirá que usted implemente una nueva lógica cuando tenga que contabilizar un nuevo estado, pero si tiene una columna en una tabla de estado, podrá permitir un usuario para configurar los iconos utilizados.

GUID de URL Relativa a la Imagen¶

El IIF La declaración utilizada para indicar qué icono mostrar puede hacer referencia a la imagen GUID de URL relativa. Para obtener el valor GUID de la imagen, vea la imagen en Vinyl 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 imagen GUID de URL relativa

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

Control de Lista¶

El control Lista 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 misma. Al configurar el control Lista, simplemente necesita ir a Atributos adicionales y seleccionar la columna que almacena su ID de imagen como el valor de Icono. El uso del propósito de imagen de 'Icono' le permitirá efectivamente tener íconos dinámicos. Dado que un desarrollador puede agregar imágenes a la biblioteca 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 ID de imagen 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 extrae un valor de Título de un objeto de lista para mostrarlo como texto en la lista, también extraerá un ID de imagen del objeto de lista para mostrar esa imagen junto al texto.