Ir para o conteúdo

Alterando dinamicamente um ícone no Jitterbit App Builder

Visão geral

Um ícone ou imagem em uma página normalmente fica fixo no momento do design, mas você também pode fazer com que ele mude dinamicamente com base nos dados subjacentes. Por exemplo, em uma página que mostra as pessoas convidadas para um evento, você pode exibir um ícone de polegar para cima ou para baixo dependendo se cada pessoa vai comparar.

Ícones dinâmicos dependem do controle Image: o App Builder resolve tanto seus conjuntos de ícones integrados quanto quaisquer imagens que você carregue através da mesma biblioteca de imagens unificada, portanto uma coluna de Business Object ou um controle List pode referenciar um ícone integrado pelo nome, ou qualquer imagem pelo seu GUID de URL relativa. Esta página aborda duas técnicas para selecionar um ícone com base em dados: uma instrução IIF, mais adequada para duas ou três opções fixas, e um controle List acionado por uma coluna de dados, que funciona para qualquer número de opções.

Para uma lista dos conjuntos de ícones que acompanham o App Builder, incluindo Font Awesome, consulte Categorias de ícones. Para procurar os ícones nomeados disponíveis na biblioteca Font Awesome especificamente, consulte fontawesome.com.

Se você estiver usando o App Builder 4.67 ou anterior, consulte App Builder 4.67 e anteriores em seu lugar.

Esta página aborda o seguinte:

Procurar o GUID de URL relativa de uma imagem

Ambas as técnicas nesta página podem referenciar um ícone integrado diretamente pelo nome (veja os exemplos abaixo). Para referenciar uma imagem carregada em seu lugar, ou para evitar digitar o nome exato do ícone, use seu GUID de URL relativa, um identificador exclusivo para um registro específico na biblioteca de imagens. Para procurar esse valor para uma imagem já na biblioteca:

  1. Abra a imagem no App Builder.

  2. Copie o valor do campo Relative URL que aparece após .../image/.

    image_24.png

Usar uma instrução IIF

Para um status com apenas duas ou três opções fixas, você pode inserir uma instrução IIF no seu Business Object para determinar qual ícone exibir, referenciando cada opção pelo nome ou pelo GUID de URL relativa. Por exemplo, para indicar presença em um evento, você pode usar uma expressão como IIF(Status = Accept, 'thumbs-up', 'thumbs-down'), usando o nome de cada ícone integrado diretamente. Para referenciar uma imagem carregada em seu lugar, substitua seu GUID de URL relativa (procurado acima) pelo nome.

image_25.png

Esta abordagem funciona bem para algumas opções fixas, mas não escala. Adicionar um terceiro estado, como um ícone de interrogação para um convite que ainda não foi aceito ou recusado, significa escrever uma instrução IIF maior e mais complicada, e cada estado adicional significa mais lógica para manter. Para um status com mais opções, ou um que possa crescer com o tempo, use um controle List com uma coluna Icon em seu lugar.

Usar um controle List com uma coluna Icon

Um controle List normalmente é usado para exibir uma lista de valores de texto, mas também pode exibir uma imagem junto ao texto, ou apenas a imagem. Como o ícone vem de uma coluna na tabela subjacente em vez de uma lógica que você mantém, essa técnica funciona para qualquer número de estados: adicionar uma nova opção apenas significa adicionar uma nova linha, não reescrever uma instrução IIF.

Para exibir um ícone dinâmico dessa forma, você precisa de uma coluna que armazene o GUID de URL relativa de cada linha, para que o controle List possa procurar a imagem certa por registro. Continuando o exemplo de presença em um evento, agora expandido para um terceiro status Maybe:

  1. Crie uma tabela Status com as colunas StatusID, Status e Icon.
  2. Popule a coluna Icon com o GUID de URL relativa de cada status (consultado conforme descrito acima), uma linha por status, por exemplo Accept, Decline e Maybe.
  3. Crie um Business Object que se une à tabela Status, trazendo sua coluna Icon. Por exemplo, um objeto chamado Employee (Status).
  4. Construa um painel nesse Business Object e adicione um controle List usando as colunas StatusID e Status do objeto para exibir as opções.
  5. Nos Atributos adicionais do controle, defina Icon (Column) para a coluna Icon. Um controle List sempre renderiza esse valor como um ícone.

Após a configuração, o App Builder resolve o valor Icon de cada linha em relação à biblioteca de imagens e exibe o ícone correspondente ao lado da opção dessa linha, da mesma forma que já usa o valor Status da linha como rótulo da opção.