Personalize Construtor de IUpáginas que usam componentes

  • Versão de lançamento: Zurich
  • Atualizado 31 de jul. de 2025
  • 5 min. de leitura
  • Saiba em que está um componente Construtor de IU. Além disso, veja como os componentes funcionam no Construtor de IU.

    Os componentes são os elementos-base do Construtor de IUpágina. 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 ao Construtor de IUpágina para criar ou personalizar sua experiência de espaço ou portal. Por exemplo, adicionar um Fluxo de atividades componente para sua página que permite que os usuários vejam suas atividades de solicitação de viagem.

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

    Você pode adicionar componentes ao Construtor de IUdas 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 de adicionar conteúdo (mais) e selecione Componentes e selecione um componente.

    Adicionar ícone de conteúdo selecionado na fase que mostra 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 mostrando como selecionar o ícone Adicionar em um componente e adicionar um componente.

    Em Conteúdo árvore em Construtor de IU

    Na árvore de conteúdo, selecione - Adicionar conteúdo e, em seguida, selecione um componente.

    Seta preta apontando para adicionar a opção de 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 Menu e selecione Adicionar antes ou Adicionar após e selecione um componente.

    Seta apontando para o menu expandido no palco.

    Layouts de coluna em Construtor de IU

    Adicione layouts de coluna e colunas ao seu Construtor de IUpágina 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 cabeçalhos. Você pode ter o máximo de layouts de coluna em um Construtor de IUpágina como você 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 no Conteúdo árvore.

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

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

    Configure componentes em Construtor de IU

    Há três maneiras de configurar um componente no painel de configuração.
    • Configure as propriedades do componente.
    • Adicione substituições de estilo CSS.
    • Configurar manipuladores de eventospara os componentes.
    Guias do painel de configuração usadas para configurar, estilizar e adicionar eventos a 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, cabeçalhos e rótulos. Componentes como listas e formulários exigem configuração significativa. Para componentes de ícone e imagem, selecione uma variedade de opções ou use um ícone ou imagem personalizada. Você pode modificar as propriedades do componente com Construtor de IUEditor JSON de código baixo de. Para obter mais informações sobre como configurar componentes, consulte Componentes do Next Experience.
    Para cada propriedade na guia Configurar componente, você pode escolher uma das seguintes opções.

    Os ícones dinâmicos de vinculação de dados e script 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.
    • Dinâmico vinculação de dados: 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 de Folhas de estilo em cascata (CSS) de componentes individuais. Altere as bordas de cor, o tamanho da fonte e assim por diante.
    Guia Eventos
    Configurar nível de página e nível de variante mapeamentos de eventos. Também adicione eventos expedidos e tratados 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 reutilizar seus componentes. Além disso, você pode apontar para os campos de configuração para ver os dados dos ícones ou opções de script para cada campo.

    À medida que 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 Abrir menu 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 Fase Recarregar.

    Predefinições de componente em Construtor de IU

    Uso predefinições de componentepara configurar automaticamente componentes em páginas compatíveis. Construtor de IUos 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.

    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. Para abrir e fechar seções, selecione 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 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 de componente

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

    Editor de fórmulas de componente com um exemplo de fórmula.

    Cada função adicionada ao editor de fórmulas de componente é concluída automaticamente. O editor de fórmulas de 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 de componente, consulte Funções compatíveis no Construtor de IUeditor de fórmulas de componente.

    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 ele seja exclusivo. Selecione o nome do componente no painel de configuração para ver o ID do componente.

    Caixa 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 dinâmica de dados ou editando um valor de propriedade com script.

    Defina o. Valor de teste para testar o que acontece quando a visibilidade é definida como verdadeiro, falso ou nenhum.

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

    Componentes duplicados

    Crie uma cópia exata de um componente configurado no Construtor de IUPágina, exceto 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 componente com seta apontando para a opção Duplicar.