Personalizar Construtor de IU páginas usando componentes
Saiba o que é um componente em Construtor de IU. Veja também como os componentes funcionam no Construtor de IU.
Componentes são os elementos base da sua página Construtor de IU. Os componentes variam de elementos principais, como botões e etiquetas, a componentes de experiência mais complexos, como listas e formulários.
Você pode adicionar esses componentes à sua página Construtor de IU para criar ou personalizar seu espaço ou experiência no portal. Por exemplo, adicionar um componente de Fluxo de atividades à sua página que permite que os usuários vejam a atividade de solicitação de viagem.
Você pode adicionar componentes à sua página Construtor de IU das seguintes maneiras.
| Local | Exemplo |
|---|---|
| Diretamente de uma página em Construtor de IU (opção 1) | Selecione o ícone adicionar conteúdo (mais), selecione a guia Componentes e selecione um componente. |
| Diretamente de uma página em Construtor de IU (opção 2) | Em um layout de coluna ou componente, selecione o ícone adicionar antes (mais) ou adicionar depois (mais) e selecione um componente. |
| Na árvore de conteúdo em Construtor de IU | Na árvore de conteúdo, selecione + Adicionar componente e selecione um componente. |
| No menu flutuante acima da página em Construtor de IU | Em um layout de coluna ou componente, clique no ícone Menu, selecione Adicionar antes ou Adicionar depoise selecione um componente. |
Layouts de coluna no Construtor de IU
Adicione layouts de coluna e colunas à sua página Construtor de IU primeiro. Em seguida, adicione componentes às colunas em um layout de coluna para criar e personalizar sua página. Pense em um layout de coluna como uma parte definida da tela onde você adiciona componentes como listas e títulos. Você pode ter quantos layouts de coluna em uma página Construtor de IU quiser, com até seis colunas em qualquer layout de coluna. Vários componentes podem ser adicionados a uma única coluna. Exiba a estrutura da sua página na árvore de conteúdo.
Para obter mais informações, consulte Layouts de coluna.
Configurar componentes no Construtor de IU
- Configure as propriedades do componente.
- Adicione substituições de estilo CSS.
- Configure manipuladores de eventos para os componentes.
- Guia Configurar
- As propriedades do componente variam de acordo com cada componente. A configuração do componente pode ser simples, como é o caso de elementos simples, como botões, títulos e rótulos. Componentes como listas e formulários exigem configuração significativa. Para componentes de ícone e imagem, selecione entre uma variedade de opções ou use um ícone ou imagem personalizada. Você pode modificar as propriedades do componente com o editor JSON de baixo código de Construtor de IU. Para obter mais informações sobre como configurar componentes, consulte Next Experience Components.
- Para cada propriedade na guia de configuração do componente, você pode escolher uma das opções a seguir.
- Estático: use dados de uma lista ou insira seus próprios dados. Os dados não se conectam a uma fonte de dados externa.
- Vinculação de dados dinâmicos: uma maneira de vincular uma propriedade de componente a um recurso de dados, propriedade de página ou estado do cliente.
- Script: insira o código JavaScript para preencher um valor de propriedade.
- Guia Estilos
- Você pode mudar os estilos de Folhas de estilo em cascata (CSS) para componentes individuais. Altere as bordas de cor, o tamanho da fonte e assim por diante.
- Guia Eventos
- Configure mapeamentos de evento no nível de página e no nível de variante. Adicione também eventos expedidos e processados para sua variante. Os componentes de experiência mais complexos dependem muito de dados dinâmicos fornecidos por um recurso de dados. Vincular dados dinâmicos a um componente é um recurso importante. Você expõe dinamicamente dados de tabelas, registros ou outros elementos em sua página. A exposição de dados permite que você reutilize seus componentes. Além disso, você pode apontar para os campos de configuração para ver os dados dos ícones ou as opções de script para cada campo.
Conforme você adiciona e configura componentes na página, a fase mostra seu trabalho. Se você fizer mudanças e as atualizações não forem carregadas na fase, selecione o ícone de menu Abrir e selecione Desenvolvedor > Forçar recarregamento da fase. Recarregar a fase mostra suas mudanças, mas não as salva. Para salvar seu trabalho, selecione Salvar no canto superior direito.
Predefinições de componente no Construtor de IU
Use predefinições para configurar automaticamente os componentes em páginas compatíveis. Construtor de IU Os modelos de página contêm controladores que as predefinições usam para definir valores de configuração do componente. Para obter mais informações, consulte Configurar componentes automaticamente usando predefinições.
Seções de propriedades do componente
As propriedades do componente são agrupadas em seções de propriedades semelhantes. Abra e feche seções selecionando as setas à direita dos títulos de propriedade. Os administradores do Construtor de IU podem selecionar quais propriedades de configuração do componente serão exibidas ou ocultadas com base nas políticas de IU.
Editor de fórmulas de componente
Use o editor de fórmulas do componente Construtor de IU no painel de configuração para vincular ou modificar fórmulas. Você pode inserir texto, vinculações de dados e/ou fórmulas. As fórmulas podem consistir em qualquer combinação dos três tipos de entrada. O editor de fórmula do componente oferece suporte a tipos de transformações lógicas, aritméticas, de comparação, de negação e funcionais.
Cada função adicionada ao editor de fórmulas do componente é preenchida automaticamente. O editor de fórmulas do componente exibe um rótulo para cada entrada da função para que você saiba quais parâmetros cada função requer. Para obter mais informações sobre as funções compatíveis com o editor de fórmulas do componente, consulte Funções compatíveis com o editor de fórmulas do componente Construtor de IU.
ID do componente
Use o ID do componente ao adicionar um script ou vincular dados ao componente como uma forma de fazer referência ao componente. Um ID de componente é criado automaticamente e é baseado no rótulo do componente quando você adiciona um componente a uma página. Você pode mudar o ID do componente para o que quiser, desde que seja exclusivo. Selecione o nome do componente no painel de configuração para ver o ID do componente.
Visibilidade do componente
Selecione o ícone de olho no painel de configuração para definir a visibilidade do componente. A visibilidade do componente é baseada em uma propriedade do próprio componente, não de quem o está exibindo. Você pode mostrar ou ocultar um componente com base nas condições. Por exemplo, ocultar uma imagem se ela tiver um link quebrado.
Você pode definir a visibilidade com base na vinculação de dados dinâmicos ou editando um valor de propriedade com script.
Defina o valor de Teste para testar o que acontece quando a visibilidade é definida como verdadeira, falsa ou nenhuma.
Componentes duplicados
Crie uma cópia exata de um componente configurado na sua página Construtor de IU, exceto para o nome e o ID. Um componente duplicado copia todas as propriedades, vinculações e eventos. Para obter mais informações, consulte Duplicar um componente.