Personalizar Construtor de IU páginas usando componentes

  • Versão de lançamento: Yokohama
  • Atualizado 30 de jan. de 2025
  • 5 min. de leitura

    • 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 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 de 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.

    Biblioteca de componentes mostrando uma lista de componentes disponíveis.

    Você pode adicionar componentes à sua página Construtor de IU das seguintes maneiras.

    Tabela 1. Maneiras de adicionar um componente a uma página
    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.

    Adicionar ícone de conteúdo selecionado na fase mostrando a janela da caixa de ferramentas com a guia Componentes selecionada.
    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.

    Animação que mostra como selecionar o ícone + Adicionar em um componente e adicionar um componente.
    Na árvore de conteúdo em Construtor de IU

    Na árvore de conteúdo, selecione + Adicionar conteúdo e selecione um componente.

    Seta preta apontando para a opção + adicionar conteúdo na árvore de conteúdo ao lado da janela da caixa de ferramentas com a guia Componentes selecionada.
    No menu flutuante acima da página em Construtor de IU

    Em um layout de coluna ou componente, selecione o ícone de Menu, selecione Adicionar antes ou Adicionar depois dee selecione um componente.

    Seta apontando para o menu expandido na fase.

    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 quiser em uma página Construtor de IU, 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.

    Árvore de conteúdo mostrando a hierarquia de layouts de três colunas com colunas que contêm componentes, incluindo Seletor de cores, Avatar e Texto estilizado.

    Para obter mais informações, consulte Layouts de coluna.

    Configurar componentes no Construtor de IU

    Existem três maneiras de configurar um componente no painel de configuração.
    • Configure as propriedades do componente.
    • Adicione substituições de estilo CSS.
    • Configure manipuladores de eventos para os componentes.
    Guias do painel de configuração usadas para configurar, estilizar e adicionar eventos a componentes.
    Configurar guia
    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 low-code de Construtor de IU. Para obter mais informações sobre como configurar componentes, consulte Componetes do Next Experience.
    Para cada propriedade na guia de configuração do componente, você pode escolher entre as seguintes opções.

    Os ícones de script e vinculação de dados dinâmicos são exibidos quando você passa o mouse sobre um campo.

    • 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 dadosdinâ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 alterar os estilos das folhas de estilos em cascata (CSS) para componentes individuais. Mude bordas de cor, tamanho da fonte e assim por diante.
    Guia Eventos
    Configure mapeamentos de eventosno nível da página e no nível da variante. Adicione também eventos expedidos e manipulados 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 > Recarregar fase. Recarregar a fase mostra suas mudanças, mas não as salva. Para salvar seu trabalho, selecione Salvar no canto superior direito.

    Exibição de experiência com o menu Abrir selecionado mostrando as opções Desenvolvedor e Recarregar fase.

    Predefinições de componente em Construtor de IU

    Use predefinições de componente para configurar automaticamente componentes em páginas compatíveis. Construtor de IU modelos de página contêm controladores que as predefinições usam para definir valores de configuração de componente. Para obter mais informações, consulte Configurar componentes automaticamente usando predefinições.

    Propriedades do componente de título configuradas por uma predefinição.

    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 de componente são exibidas ou ocultas com base nas políticas de IU.

    Seções de propriedade do componente expandidas para exibir todas as propriedades disponíveis.

    Editor de fórmulas do 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órmulas do componente oferece suporte aos tipos de transformação lógica, aritmética, comparação, negação e funcional.

    Editor de fórmula de componente com uma fórmula de exemplo.

    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 no editor de fórmulas do componente, consulte Funções compatíveis no 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 se baseia no rótulo do componente quando você adiciona um componente a uma página. Você pode alterar 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.

    Caixa de rótulo do componente em que você adiciona ou edita um rótulo de componente que é exibido na árvore de conteúdo.

    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 em 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.

    Opções de visibilidade do componente na guia de configuração.

    Componentes duplicados

    Crie uma cópia exata de um componente configurado na 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.

    Menu de componentes com seta apontando para a opção duplicada.