Alterando Dinamicamente um Ícone¶

Os ícones são geralmente estáticos e imutáveis, mas às vezes você precisará mostrar um ícone diferente com base nos dados. Por exemplo, em uma página que mostra as pessoas que foram convidadas para um evento, você pode mostrar um ícone de polegar para baixo ou polegar para cima para indicar se elas estão participando ou não. Abaixo estão exemplos de como você pode implementar um ícone dinâmico em seu aplicativo.

Para o propósito deste documento, nos referimos a ícones nomeados usando a biblioteca de ícones Font Awesome. App Builder vem com o Font Awesome. Para ver uma lista dos ícones nomeados disponíveis, veja fontawesome.com.

Controle de Ícone¶

O tipo de controle Icon permite que você passe o nome CSS de um ícone (como times-circle-o) e ele procura na biblioteca de ícones para exibir. Não é possível adicionar à biblioteca de ícones.

Se você tiver apenas 1 ou 2 ícones, provavelmente poderá inserir um IIF declaração em seu Objeto de Negócios e permita que isso determine qual ícone exibir. Por exemplo, se você quiser denotar a presença em um evento, você teria algo como IIF(Status = Accept, 'thumbs-up', 'thumbs-down'). Este cenário funciona bem quando você tem apenas algumas opções para escolher, mas ficará complicado, pois você precisa acomodar mais opções. Para o nosso exemplo, você também pode querer mostrar um ícone de ponto de interrogação se a pessoa ainda não aceitou ou recusou o convite.

No caso acima, você precisará fazer um maior e mais complicado IIF declaração para acomodar o terceiro estado, ou você pode alterar seu modelo de dados para incluir uma coluna que armazene o ícone. As etapas abaixo o guiarão pelo caso em que você altera seu modelo de dados.

Para continuar com o exemplo acima, você precisará criar um Status tabela com colunas para StatusID, Status, e Icon.
Certifique-se de inserir informações, incluindo os títulos dos ícones, no Status tabela para cada Status. Por exemplo: Sim, Não, Talvez
Em seguida, crie um Objeto de Negócio que se junte ao Status tabela. O nosso é chamado Employee (Status). Traremos o Icon coluna do Status tabela para uso.
Para usar essas informações em seu aplicativo, certifique-se de que seu painel seja construído no objeto recém-criado. Crie um controle chamado Status como um Tipo de Controle de Lista usando Status (Lista)'s StatusID e Status para exibir as opções.

Usar uma coluna é quase sempre superior a uma declaração IIF, porque uma declaração IIF exigirá que você implemente uma nova lógica quando tiver um novo estado para considerar, mas se você tiver uma coluna em uma tabela de status, poderá permitir que um usuário configure os ícones usados.

GUID de URL Relativo à Imagem¶

O IIF declaração usada para instruir qual ícone exibir pode referenciar o GUID de URL relativo da imagem. Para obter o valor do GUID da imagem, visualize a imagem em App Builder e copie o valor do campo URL relativa que aparece depois .../image/. Este valor agora pode ser usado no IIF declaração em conformidade.

Exemplo de um GUID de URL relativo de imagem

Exemplo de declaração IIF referenciando URL GUID relativa à imagem

Controle de Lista¶

O controle List é normalmente usado para exibir uma lista de valores de texto, mas também pode exibir uma imagem junto com o texto, ou apenas a imagem em si. Ao configurar o controle List, você simplesmente precisa ir para Additional Attributes e selecionar a coluna que armazena seu ImageID como o valor Icon. Usar o Image Purpose de 'Icon' efetivamente permitirá que você tenha ícones dinâmicos. Como um desenvolvedor pode adicionar à biblioteca de imagens de um aplicativo, esse método para um 'ícone' dinâmico é um pouco mais robusto do que usar o controle Icon.

Para usar um List Control para ícones dinâmicos, você precisa ter uma coluna para armazenar seu ImageID na tabela que fornece os valores da List. Dessa forma, você pode vincular cada um dos valores da lista a uma imagem específica na Collection do seu App. Da mesma forma que você extrai um valor Title de um objeto de lista para exibi-lo como texto na lista, você também extrairá um ImageID do objeto de lista para exibir essa imagem junto com o texto.