--- sourceDocument: Criar ou modificar aplicações do Xanadu sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/xanadu/application-development Release : - xanadu ft:locale : - pt-BR ft:publication_title : - Criar ou modificar aplicações do Xanadu ft:clusterId : - cadev bundleId : - cadev workflow : - Creator --- # Personalizar Construtor de IU páginas usando componentes # Personalizar Construtor de IU páginas usando componentes {#ariaid-title1} * Versão de lançamento: Xanadu * * Atualizado 1 de ago. de 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 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. Você pode adicionar componentes à sua página Construtor de IU das seguintes maneiras. {#work-components__addcomponentstable__entry__2} | 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 conteúdo e selecione um componente. | | 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 depoisde e selecione um componente. | [Tabela 1. Maneiras de adicionar um componente a uma página] {#work-components__addcomponentstable} ## Layouts de coluna no Construtor de IU {#work-components__section_krt_tdk_znb} 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. Para obter mais informações, consulte [Layouts de coluna](https://servicenow-prod.fluidtopics.net/3omZyAviJAKMbB1NaMnMwg#column-layout "Layouts de coluna são usados para projetar e organizar Construtor de IU páginas."). ## Configurar componentes no Construtor de IU {#work-components__config_components} 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](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-event-handler-ui-builder "Uma ação realizada quando ocorre um evento.") para os componentes. {#work-components__ul_lxw_c2k_znb} ![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](https://developer.servicenow.com/dev.do#!/reference/next-experience/components?&query=&order_by=nameAsc&limit=120&offset=0&categories[]=uib_component&categories[]=uib_macroponent-component&categories[]=uib_facades). : Para cada propriedade na guia de configuração do componente, você pode escolher entre as seguintes opções. * 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](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-data-binding-ui-builder "O processo de associação de dados a um elemento de IU que exibe as informações.")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. {#work-components__ul_uh3_dh4_trb} 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 eventos](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-event-mapping-ui-builder "O processo de identificação de um manipulador de eventos a ser executado quando ocorre um evento.")no 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](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-data-resource-ui-builder "Uma maneira dinâmica e reutilizável de definir quais dados buscar para os componentes de uma página."). 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. ## Predefinições de componente em Construtor de IU {#work-components__section_cnm_cpt_25b} Use [predefinições de componente](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-component-preset-ui-builder "Use para aplicar valores de configuração predefinidos e mapeamentos de eventos aos componentes. As predefinições aplicam configurações pré-criadas às propriedades do componente e aos manipuladores de eventos. As predefinições estão disponíveis somente para determinados componentes.") 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](https://servicenow-prod.fluidtopics.net/ZCfG~NRN4Uv8wEwuW9yWsw#presets "Use predefinições de componente para configurar automaticamente componentes em páginas compatíveis."). ## Seções de propriedades do componente {#work-components__section_esm_5gk_dsb} 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. ## Editor de fórmulas do componente {#work-components__section_mkq_ydx_trb} 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. 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](https://servicenow-prod.fluidtopics.net/Aqc1bei9skOZ0arABedMFw#uib_supported_functions "Saiba mais sobre as várias funções compatíveis com o editor de fórmulas do componente Construtor de IU."). ## ID do componente {#work-components__component_id} 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. ## Visibilidade do componente {#work-components__section_ljd_ydk_znb} 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. ## Componentes duplicados {#work-components__section_fwf_bc5_x5b} 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](https://servicenow-prod.fluidtopics.net/ZLSoKIPcE8Pme6LuSsYsIw "Duplique um componente configurado para reutilizar em uma página."). * **[Configurar componentes automaticamente usando predefinições](https://servicenow-prod.fluidtopics.net/ZCfG~NRN4Uv8wEwuW9yWsw#presets)** Use predefinições de componente para configurar automaticamente componentes em páginas compatíveis. * **[Alterar a aparência padrão dos componentes](https://servicenow-prod.fluidtopics.net/QWNyu_ceLHhT70tNgR5rPw#add-styling-to-component)** Defina os estilos dos componentes e wrappers para mudar a aparência padrão. * **[Duplicar um componente](https://servicenow-prod.fluidtopics.net/ZLSoKIPcE8Pme6LuSsYsIw)** Duplique um componente configurado para reutilizar em uma página. * **[Coleções de páginas](https://servicenow-prod.fluidtopics.net/gLsGiAuGdSo1DW8XDCy~Fg)** Coleções de páginas são grupos de páginas que podem ser usados em várias experiências. * **[Alterar visualizações de dados no Construtor de IU](https://servicenow-prod.fluidtopics.net/L_tf4RW_SJIBDjG62g3WjA)** Altere as visualizações de dados em tempo real usando uma lista suspensa para visualizar dados em sua experiência. * **[Adicionar conteúdo com guias às páginas do Construtor de IU](https://servicenow-prod.fluidtopics.net/~zVZYcTTE_VKKYkKuuLhYQ#tabs-components)** Use o componente Guias para adicionar conteúdo com guias a páginas em Construtor de IU. * **[Adicionar uma barra lateral contextual](https://servicenow-prod.fluidtopics.net/jzEWHNN9Hkk1wBHxfXfQjQ)** Adicione uma barra lateral contextual a uma página com Construtor de IU para exibir conteúdo relacionado usando uma estrutura de guia vertical. * **[Adicionar formulários a páginas do Construtor de IU](https://servicenow-prod.fluidtopics.net/3t5qRXeWMNQhVqmslwjgcw)** Use o componente Formulário para adicionar um ou mais formulários a Construtor de IU páginas. * **[Criar modais em Construtor de IU](https://servicenow-prod.fluidtopics.net/pJuIhY6fWu1eS90PEx6cyQ)** Use modais em Construtor de IU com componentes para fornecer alertas ou chamadas para ação para um usuário. Construtor de IU vem com modais para economizar tempo e esforço. * **[Estenda sua experiência de IU com componentes da janela de visualização](https://servicenow-prod.fluidtopics.net/ifPjcQFknMqdSc79CNh8wg)** Janelas de visualização são componentes especializados que permitem estender sua experiência sem precisar possuir a página primária em Construtor de IU. Você pode trabalhar com janelas de visualização de três maneiras. Você pode adicionar um componente de janela de visualização ou uma guia habilitada para janela de visualização a uma página ou adicionar uma janela de visualização ao componente da barra lateral contextual. * **[Criar popovers no Construtor de IU](https://servicenow-prod.fluidtopics.net/biPrMNYKJ2VfBhRIayPWKw#uib-popover)** Use popovers em uma página do Construtor de IU para sobrepor informações contextuais ou funcionalidades para ajudar os usuários a concluir tarefas. * **[Criar caixas de diálogo não modais no Construtor de IU](https://servicenow-prod.fluidtopics.net/em6eBRj5~xnoY6fhyOZ9OQ)** Use caixas de diálogo não modais em uma página do Construtor de IU para adicionar uma janela flutuante que permite que você interaja com o conteúdo da janela e da página abaixo. * **[Criar um contador no Construtor de IU](https://servicenow-prod.fluidtopics.net/6GUuEizrXdZBO_RW6SWk5w)** Crie um contador simples adicionando o componente de texto estilizado e dois botões a uma página de experiência. Use um parâmetro de estado do cliente para implementar a funcionalidade para que, quando os botões forem selecionados, a contagem aumente ou diminua.