Imagem (tipo de controle) no Jitterbit App Builder
Um controle de Imagem exibe uma imagem da biblioteca de imagens unificada do App Builder em um painel na camada de UI. Esta biblioteca contém tanto fotos que você faz upload quanto os conjuntos de ícones incorporados do App Builder, então o mesmo controle de Imagem pode exibir uma foto enviada pelo usuário, um logotipo estático ou um dos ícones incorporados, dependendo de qual imagem você selecionar e como você configurar Image Purpose.
Adicionar um controle de Imagem
Para adicionar um novo controle de Imagem a um painel, use o diálogo Add a Control e selecione Imagem como o Tipo de Controle:
Converter um controle existente em um controle de Imagem
Para alterar um controle existente e usar o tipo de controle de Imagem:
-
Navegue até o controle, usando o Live Designer ou o App Workbench:
-
Na visualização do aplicativo, abra a página contendo o controle e selecione Action Drawer > Live Designer.
-
No App Workbench, abra a guia Pages, depois no painel Pages, localize a página contendo o controle e clique duas vezes em sua linha ou clique no ícone Open record. No painel Page Panel Layout, encontre o painel que contém o controle e clique em Controls.
-
-
Se você estiver no Live Designer, clique no controle na visualização da página; isso preencherá o Live Designer com opções de edição para esse controle. Se você estiver no App Workbench, no painel Controls, localize o controle e clique duas vezes em sua linha ou clique no ícone Open record no final de sua linha; o App Builder abre um diálogo semelhante ao do Live Designer.
-
Na guia Control Properties, defina o campo Tipo de Controle como Imagem.
-
Na guia Imagem, use o campo Imagem para pesquisar e selecionar uma imagem. A lista suspensa inclui tanto fotos carregadas quanto os conjuntos de ícones incorporados do App Builder; consulte Categorias de ícones para os conjuntos de ícones disponíveis.
-
Defina Image Purpose como Ícone ou Foto para corresponder ao tipo de imagem selecionado. Esta configuração controla apenas como a imagem é renderizada; ela não filtra quais imagens estão disponíveis para seleção.
-
(Opcional) Defina Badge Source (Column) para um valor de coluna para exibir um crachá numérico na imagem. Consulte Badges com botões para obter detalhes.
-
Clique em Salvar.
Atualize a visualização do aplicativo para confirmar a atualização.
Categorias de ícones
Os ícones são organizados por categorias em listas suspensas de seleção, como as presentes no campo Ícone no diálogo Menu Item ou no campo Imagem em um controle de Botão ou Imagem. Conforme você digita no campo de pesquisa da lista suspensa, os ícones correspondentes aparecem em uma lista agrupada sob títulos de categoria que representam diferentes fontes de ícones.
As seguintes categorias estão disponíveis:
| Categoria | Fonte | Descrição |
|---|---|---|
| Brands | Font Awesome Brands | Logotipos de empresas e serviços (por exemplo, youtube, youtube-square). |
| Solid | Font Awesome Solid | O estilo de ícone Font Awesome padrão e preenchido. |
| Regular | Font Awesome Regular | Uma variante contornada e não preenchida do estilo de ícone Font Awesome. |
| Material Filled | Google Material Icons | Uma variante preenchida do sólido da biblioteca de ícones Material do Google. |
| Material Rounded | Google Material Icons | Uma variante da biblioteca de ícones Material do Google com cantos arredondados. |
| Material Sharp | Google Material Icons | Uma variante da biblioteca de ícones Material do Google com cantos afiados. |
Nota
O Google distribui sua biblioteca Material Icons como uma fonte com contorno, "Material Icons Outlined." O App Builder aplica um preenchimento a essa fonte e expõe o resultado aqui como Material Filled para se alinhar com o estilo sólido do Font Awesome.
Para mais informações sobre como alternar estilos de ícone atualmente em uso, consulte Alterar ícone do botão de preenchimento sólido para regular.
Fazer upload e substituir uma foto
Associe um controle Image com um controle File para permitir que os usuários façam upload de uma nova foto que substitua a exibida atualmente. Defina a opção Image Purpose do controle Image associado como Photo para este caso de uso.
App Builder 4.67 e versões anteriores
No App Builder 4.67 e versões anteriores, ícones incorporados e imagens enviadas são armazenados separadamente, portanto o seguinte comportamento difere do descrito nesta página:
- Ícones incorporados são exibidos usando um tipo de controle Icon separado. Para exibir um ícone dinamicamente, passe o nome CSS do ícone (por exemplo,
times-circle-o) para o controle Icon. - O campo Image nos controles Image, Checkbox e List lista apenas imagens enviadas, não os conjuntos de ícones incorporados.
Consulte Categorias de ícone para ver os conjuntos de ícones disponíveis no App Builder.