--- 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 --- # Adicionar conteúdo com guias às páginas do Construtor de IU # Adicionar conteúdo com guias às páginas do Construtor de IU {#ariaid-title1} * Versão de lançamento: Xanadu * * Atualizado 1 de ago. de 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 8 min. de leitura Use o componente Guias para adicionar conteúdo com guias a páginas em Construtor de IU. Crie navegação adicional em sua página Construtor de IU adicionando um componente de Guias à sua página. Use o componente Guias para aninhar componentes em guias na sua página. As guias podem ser configuradas como guias horizontais na parte superior do conteúdo ou como guias verticais no lado esquerdo ou direito do conteúdo. Figura 1. Exemplo de componente da guia As guias podem ser organizadas no painel de configuração para reordenar como são exibidas na página Construtor de IU. Adicione rótulos e ícones personalizados às guias para fornecer identificadores visuais exclusivos para navegar pelas guias. Essas mudanças podem ser exibidas em tempo real conforme você edita o componente Guias. Você pode adicionar um dos seguintes tipos de guias à sua página Construtor de IU : * Guia de contêiner vazio * Guia[Repetidor](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-repeater-ui-builder "No Construtor de IU, um repetidor é um componente que atua como um loop básico que repete os dados fornecidos em vários componentes. Os repetidores usam uma matriz ou uma matriz de objetos. Os repetidores vinculam valores a uma propriedade de matriz de dados. Por exemplo, [{\"task\": \"A\"},{\"task\": \"B\"}], repete o conteúdo dentro dele duas vezes.") * Guia Lista relacionada * Guias de coleção de páginas {#tabs-components__ul_anm_nst_c5b} O componente de guias é compatível com qualquer combinação de guias estáticas, guias repetidas, guias de lista relacionada e guias de coleção de páginas. Como alternativa, você ainda pode usar o modo da guia Janela de visualização para adicionar uma série de janelas de visualização. ## Adicionar guias de contêiner vazias {#ariaid-title2} Use uma guia de contêiner vazia para criar manualmente um conjunto estático de guias em sua página. ### Antes de Iniciar Função necessária: administrador ### Procedimento 1. Navegar até TodosEstrutura do Now ExperienceConstrutor de IU. 2. Abra uma experiência para trabalhar ou crie uma experiência selecionando CriarExperiência. Consulte [Configure como os usuários interagem com suas aplicações no Construtor de IU](https://servicenow-prod.fluidtopics.net/lLqYhwc21ggWGJvxakpXWA "Saiba o que é uma experiência em Construtor de IU. Entenda o que uma experiência contém.") para obter mais informações sobre como criar experiências. 3. Crie ou abra uma página ou variante de página. Para obter mais informações sobre como criar uma página em Construtor de IU, consulte [Criação de uma página no Construtor de IU](https://servicenow-prod.fluidtopics.net/oXLwDAYTDqDRVYtO2ECqbg "Crie uma página em Construtor de IU para um portal, espaço ou aplicação personalizada para que você possa criar uma experiência na Web para seus usuários."). 4. Selecione o botão + Adicionar conteúdo na fase para abrir a caixa de ferramentas. 5. Selecione um layout de coluna única. 6. Em seguida, selecione o ícone + na coluna para abrir a caixa de ferramentas. 7. Adicione um componente de Guias à sua página. Para obter mais informações sobre como adicionar um componente a uma página, consulte [Adicionar e configurar componentes](https://servicenow-prod.fluidtopics.net/Aqc1bei9skOZ0arABedMFw#add-components "Saiba como adicionar componentes à sua página em Construtor de IU. Uma página é criada adicionando componentes."). 8. Selecione + Adicionar guia na fase. 9. Selecione Iniciar a partir de um contêiner vazio. 10. Selecione Avançar. 11. No formulário, preencha os campos. {#add-a-tab-component__table_usy_s1c_wtb__entry__2} | Campo | Descrição | |-|-| | Rótulo da guia | Rótulo da guia a ser exibida na página. | | Ícone | Ícone a ser exibido ao lado do rótulo da guia. Os ícones não são necessários. | | Ocultar guia | Se a guia deve ser ocultada ou exibida. | [Tabela 1. Formulário de configurações da guia] {#add-a-tab-component__table_usy_s1c_wtb} 12. Selecione Criar. A nova guia é exibida no componente Guias. 13. Selecione a nova guia. 14. Selecione o ícone +. 15. Selecione o componente que você deseja adicionar à guia. Os componentes são exibidos na guia na qual estão aninhados na árvore de conteúdo. Para obter mais informações, consulte [Adicionar e configurar componentes](https://servicenow-prod.fluidtopics.net/Aqc1bei9skOZ0arABedMFw#add-components "Saiba como adicionar componentes à sua página em Construtor de IU. Uma página é criada adicionando componentes."). ### Resultado Sua página mostra as duas guias que você criou. Selecione cada guia para configurá-las, adicionar estilo ou adicionar um manipulador de eventos. Para obter mais informações sobre estilo, consulte [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."). Para obter mais informações sobre como adicionar um manipulador de eventos, consulte [Gerenciar ações nas páginas do Construtor de IU (recurso avançado)](https://servicenow-prod.fluidtopics.net/DGcmaC3dw6Q7Mii9xIi4fw "Aprenda a trabalhar com eventos para que você possa adicionar ações a componentes, páginas, recursos de dados e ações declarativas em Construtor de IU."). ## Adicionar guias de repetidor {#ariaid-title3} Use o componente Guias para criar um conjunto de guias de repetidor vinculando-as a uma matriz de dados. ### Antes de Iniciar Função necessária: administrador ### Por Que e Quando Desempenhar Esta Tarefa Você pode usar guias de [repetidor](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-repeater-ui-builder "No Construtor de IU, um repetidor é um componente que atua como um loop básico que repete os dados fornecidos em vários componentes. Os repetidores usam uma matriz ou uma matriz de objetos. Os repetidores vinculam valores a uma propriedade de matriz de dados. Por exemplo, [{\"task\": \"A\"},{\"task\": \"B\"}], repete o conteúdo dentro dele duas vezes.") para criar várias guias com base na matriz de dados fornecida. Você pode passar o ícone, o rótulo, a contagem e os campos como uma chave no objeto. Use a chave de rótulo para adicionar nomes às guias. Use a chave de campo para passar informações para as guias do repetidor. Você pode vincular um agente de dados, estado do cliente ou um script de cliente ao provedor de matriz de dados para retornar a matriz de objetos com o esquema correto. ### Procedimento 1. Navegar até TodosEstrutura do Now ExperienceConstrutor de IU. 2. Abra uma experiência para trabalhar ou crie uma experiência selecionando CriarExperiência. Consulte [Configure como os usuários interagem com suas aplicações no Construtor de IU](https://servicenow-prod.fluidtopics.net/lLqYhwc21ggWGJvxakpXWA "Saiba o que é uma experiência em Construtor de IU. Entenda o que uma experiência contém.") para obter mais informações sobre como criar experiências. 3. Crie ou abra uma página ou variante de página. Para obter mais informações sobre como criar uma página em Construtor de IU, consulte [Criação de uma página no Construtor de IU](https://servicenow-prod.fluidtopics.net/oXLwDAYTDqDRVYtO2ECqbg "Crie uma página em Construtor de IU para um portal, espaço ou aplicação personalizada para que você possa criar uma experiência na Web para seus usuários."). 4. Selecione o botão + Adicionar conteúdo na fase para abrir a caixa de ferramentas. 5. Selecione um layout de coluna única. 6. Em seguida, selecione o ícone + na coluna para abrir a caixa de ferramentas. 7. Adicione um componente de Guias à sua página. Para obter mais informações sobre como adicionar um componente a uma página, consulte [Adicionar e configurar componentes](https://servicenow-prod.fluidtopics.net/Aqc1bei9skOZ0arABedMFw#add-components "Saiba como adicionar componentes à sua página em Construtor de IU. Uma página é criada adicionando componentes."). 8. Selecione + Adicionar guia na fase. 9. Selecione Usar um repetidor. 10. Selecione Avançar. 11. Insira um rótulo para a guia do repetidor no campo Espaço reservado para rótulo da guia. Este rótulo é atribuído à primeira guia do repetidor e é a única guia exibida na visualização da página. 12. Selecione Editar no campo Matriz de dados. 13. Configure a matriz de dados no editor JSON. {#add-repeater-tab__table_spf_5sb_5kb__entry__3} | Chave | Tipo de dados | Descrição | |-|-|-| | ícone | Cadeia de caracteres | Nome do ícone que aparece em Construtor de IU. | | rótulo | Cadeia de caracteres | Obrigatório. Nome de exibição da guia em Construtor de IU. | | contagem | Número | Valor a ser fornecido no rótulo da guia. Vincule dinamicamente a um agente de dados ou a um client script que será exibido no rótulo. | | campos | Objeto | Objeto que pode ser usado para armazenar informações e passar para os componentes nas guias. | [ ] {#add-repeater-tab__table_spf_5sb_5kb} 14. Selecione Aplicar. O campo de matriz de dados exibe a configuração da matriz de dados. 15. Selecione Criar. A nova guia do repetidor aparece na página e na árvore de conteúdo. 16. Selecione Salvar. 17. Adicione componentes à guia do repetidor. 18. Selecione ![o botão Visualizar que abre sua página no tempo de execução, que é uma visualização de como a página aparece em uma página da Web.]() para verificar se as guias do repetidor são exibidas corretamente na página. ## Adicionar guias de lista relacionada {#ariaid-title4} Crie um conjunto de guias em uma página vinculando a uma lista relacionada. ### Antes de Iniciar Função necessária: administrador ### Por Que e Quando Desempenhar Esta Tarefa A guia da lista relacionada preenche automaticamente as guias com base no registro que sua página está exibindo. Por exemplo, por padrão, as listas relacionadas à tabela do usuário são Funções, Grupos, Delegados e Domínios de visibilidade. Se sua página estiver exibindo um registro de usuário, a criação de uma guia de lista relacionada adicionará todas as quatro listas relacionadas como guias em sua página. Você pode visualizar a página para ver as listas relacionadas que foram adicionadas. Um controlador de registro é necessário para criar guias de lista relacionada. Para adicionar um controlador à sua página, consulte [Vincular dados a Construtor de IU páginas usando controladores (recurso avançado)](https://servicenow-prod.fluidtopics.net/5gsUs5SRTqPcjjRLgxlrPw#controllers "Os controladores simplificam a vinculação de dados e a lógica de eventos para habilitar predefinições de componente em Construtor de IU.") para obter mais informações. ### Procedimento 1. Navegar até TodosEstrutura do Now ExperienceConstrutor de IU. 2. Abra uma experiência para trabalhar ou crie uma experiência selecionando CriarExperiência. Consulte [Configure como os usuários interagem com suas aplicações no Construtor de IU](https://servicenow-prod.fluidtopics.net/lLqYhwc21ggWGJvxakpXWA "Saiba o que é uma experiência em Construtor de IU. Entenda o que uma experiência contém.") para obter mais informações sobre como criar experiências. 3. Crie ou abra uma página ou variante de página. Para obter mais informações sobre como criar uma página em Construtor de IU, consulte [Criação de uma página no Construtor de IU](https://servicenow-prod.fluidtopics.net/oXLwDAYTDqDRVYtO2ECqbg "Crie uma página em Construtor de IU para um portal, espaço ou aplicação personalizada para que você possa criar uma experiência na Web para seus usuários."). 4. Selecione o botão + Adicionar conteúdo na fase para abrir a caixa de ferramentas. 5. Selecione um layout de coluna única. 6. Em seguida, selecione o ícone + na coluna para abrir a caixa de ferramentas. 7. Adicione um componente de Guias à sua página. Para obter mais informações sobre como adicionar um componente a uma página, consulte [Adicionar e configurar componentes](https://servicenow-prod.fluidtopics.net/Aqc1bei9skOZ0arABedMFw#add-components "Saiba como adicionar componentes à sua página em Construtor de IU. Uma página é criada adicionando componentes."). 8. Selecione + Adicionar guia na fase. 9. Selecione Exibir listas relacionadas a um registro. 10. Selecione Avançar. 11. No formulário, preencha os campos. {#add-related-list-tab__table_usy_s1c_wtb__entry__2} | Campo | Descrição | |-|-| | Rótulo da guia de espaço reservado | Rótulo de espaço reservado a ser exibido na guia de visualização da sua página. | | Ocultar guia | Se você deseja ocultar ou exibir a guia. | | Controlador de registro | Controlador de registro com a lista relacionada. | [Tabela 2. Formulário de configurações da guia] {#add-related-list-tab__table_usy_s1c_wtb} 12. Selecione Criar. A nova guia da lista relacionada é exibida na seção Guias do painel de configuração. Somente uma guia de espaço reservado aparece na visualização da página. O ícone verde ao lado da guia da lista relacionada na árvore de conteúdo mostra quantas guias aparecem na sua página. 13. Selecione Salvar. 14. Exiba e teste sua página selecionando ![o botão Visualizar que abre sua página no tempo de execução, que é uma visualização de como a página aparece em uma página da Web.](). ## Adicionar guias de coleção de páginas {#ariaid-title5} Use as guias de coleção de páginas para recriar as mesmas guias em várias páginas em Construtor de IU. ### Antes de Iniciar Função necessária: administrador ### Por Que e Quando Desempenhar Esta Tarefa Uma coleção de páginas é um grupo de páginas pré-criadas e disponíveis globalmente. Use as guias de coleção de páginas para renderizar cada página em uma coleção de páginas como uma guia. Você pode selecionar uma coleção de páginas existente ou criar a sua própria. Um controlador é necessário para adicionar uma coleção de páginas. Para obter mais informações sobre coleções de páginas, consulte [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."). ### Procedimento 1. Navegar até TodosEstrutura do Now ExperienceConstrutor de IU. 2. Abra uma experiência para trabalhar ou crie uma experiência selecionando CriarExperiência. Consulte [Configure como os usuários interagem com suas aplicações no Construtor de IU](https://servicenow-prod.fluidtopics.net/lLqYhwc21ggWGJvxakpXWA "Saiba o que é uma experiência em Construtor de IU. Entenda o que uma experiência contém.") para obter mais informações sobre como criar experiências. 3. Crie ou abra uma página ou variante de página. Para obter mais informações sobre como criar uma página em Construtor de IU, consulte [Criação de uma página no Construtor de IU](https://servicenow-prod.fluidtopics.net/oXLwDAYTDqDRVYtO2ECqbg "Crie uma página em Construtor de IU para um portal, espaço ou aplicação personalizada para que você possa criar uma experiência na Web para seus usuários."). 4. Selecione o botão + Adicionar conteúdo na fase para abrir a caixa de ferramentas. 5. Selecione um layout de coluna única. 6. Em seguida, selecione o ícone + na coluna para abrir a caixa de ferramentas. 7. Adicione um componente de Guias à sua página. Para obter mais informações sobre como adicionar um componente a uma página, consulte [Adicionar e configurar componentes](https://servicenow-prod.fluidtopics.net/Aqc1bei9skOZ0arABedMFw#add-components "Saiba como adicionar componentes à sua página em Construtor de IU. Uma página é criada adicionando componentes."). 8. Selecione + Adicionar guia na fase. 9. Selecione Adicionar uma coleção de páginas. 10. Selecione Avançar. 11. Selecione uma coleção de páginas na lista ou crie uma coleção selecionando + Criar coleção. Para criar sua própria coleção de páginas, consulte [Criar uma coleção de páginas em várias páginas de IU](https://servicenow-prod.fluidtopics.net/JGnN1ZSKtmXOTUbhqQxsLg "Crie uma coleção de páginas para acomodar o conteúdo com guias que pode ser usado em várias experiências."). 12. Selecione Adicionar. A nova guia de coleção de páginas é exibida na seção Guias do painel de configuração. Somente uma guia de espaço reservado é exibida na visualização da página. 13. Selecione Salvar. 14. Exiba e teste sua página selecionando ![o botão Visualizar que abre a variante de página.]().