Ir para o conteúdo

Alterando dinamicamente um ícone no Jitterbit App Builder

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

Para fins deste documento, nos referimos a ícones nomeados usando a biblioteca Font Awesome de ícones. O App Builder é fornecido com Font Awesome, bem como conjuntos de ícones adicionais descritos em Categorias de ícones. Para ver uma lista dos ícones nomeados disponíveis no Font Awesome, consulte fontawesome.com.

Controle de ícone

O tipo de controle Ícone permite passar o nome CSS de um ícone (como times-circle-o) e ele o 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 uma instrução IIF no seu Objeto de Negócio e deixar que ela determine qual ícone exibir. Por exemplo, se você quiser indicar a presença em um evento, 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 fica complicado conforme você precisa acomodar mais opções. Para nosso exemplo, você também pode querer exibir um ícone de interrogação se a pessoa ainda não aceitou ou recusou seu convite.

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

  1. Para continuar com o exemplo acima, você precisará criar uma tabela Status com colunas para StatusID, Status e Icon.
  2. Certifique-se de inserir informações incluindo os títulos dos ícones na tabela Status para cada Status. Por exemplo: Sim, Não, Talvez
  3. Em seguida, crie um Objeto de Negócio que se une à tabela Status. O nosso é chamado Employee (Status). Traremos a coluna Icon da tabela Status para uso.
  4. Para usar essas informações no seu app, 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 StatusID e Status de Status (List) para exibir as opções.

Usar uma coluna é quase sempre superior a uma instrução IIF, porque uma instruçã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 relativa de imagem

A instrução IIF usada para instruir qual Ícone exibir pode fazer referência ao GUID de URL Relativa da imagem. Para obter o valor GUID da imagem, visualize a Imagem no App Builder e copie o valor do campo URL Relativa que aparece após .../image/. Este valor agora pode ser usado na instrução IIF de acordo.

image_24.png

Exemplo de um GUID de URL relativa de imagem

image_25.png

Exemplo de instrução IIF fazendo referência ao GUID de URL relativa de imagem

Controle de lista

O controle de Lista é tipicamente 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 de Lista, você simplesmente precisa ir para Atributos Adicionais e selecionar a coluna que armazena seu ImageID como o valor de Ícone. Usar a Finalidade de Imagem de 'Ícone' permitirá efetivamente que você tenha ícones dinâmicos. Como um desenvolvedor pode adicionar à biblioteca de Imagens de um aplicativo, este método para um 'ícone' dinâmico é um pouco mais robusto do que usar o controle de Ícone.

Para fazer uso de um Controle de Lista para ícones dinâmicos, você precisa ter uma coluna para armazenar seu ImageID na tabela que fornece os valores da Lista. Dessa forma, você pode vincular cada um dos valores da lista a uma imagem particular na Coleção do seu App. Da mesma forma que você extrai um valor de Título 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.