--- sourceDocument: Zurich Crie ou modifique aplicações sourceDocumentLink: https://www.servicenow.com/docs/r/pt-BR/zurich/application-development Release : - zurich ft:locale : - pt-BR ft:publication_title : - Zurich Crie ou modifique aplicações ft:clusterId : - cadev bundleId : - cadev workflow : - Development, Data, and Analytics --- 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: Zurich * * Atualizado 31 de jul. de 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 8 min. de leitura Use o componente Guias para adicionar conteúdo com guias às páginas no Construtor de IU. Crie navegação adicional no Construtor de IUAdicionando um componente de guias à sua página. Use o componente Guias para aninhar componentes em guias em 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 elas são exibidas no Construtor de IUpágina. 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 enquanto você edita o componente de guias. Você pode adicionar um dos seguintes tipos de guias ao seu Construtor de IUpágina: * Guia Contêiner vazia * [Repetidor](https://www.servicenow.com/docs/tycYZYkLtxVDBAc3Hd47nQ#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, [\"tarefa\": \"A\", \"\"tarefa\": \"B\"], repete o conteúdo dentro dela duas vezes."). * Guia da lista relacionada * Guias de coleção de páginas {#tabs-components__ul_anm_nst_c5b} O componente Guias oferece suporte a 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 de guia da janela de visualização para adicionar uma série de janelas de visualização. Adicione 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é TudoEstrutura 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://www.servicenow.com/docs/grAtbx3qopFwcYf7I81E_A "Saiba o que é uma experiência 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 no Construtor de IU, consulte [Crie uma página no Construtor de IU](https://www.servicenow.com/docs/vySiIhP_KVnKNxbc5zJKxw "Crie uma página em Construtor de IUpara um portal, espaço ou aplicação personalizada para que você possa criar uma experiência na web para seus usuários."). 4. Selecione - Adicionar conteúdo botão na fase para abrir a caixa de ferramentas. 5. Selecione um Coluna única layout. 6. Em seguida, selecione E na coluna para abrir a caixa de ferramentas. 7. Adicione um Guias para sua página. Para obter mais informações sobre como adicionar um componente a uma página, consulte [Adicionar e configurar componentes](https://www.servicenow.com/docs/ygUn14C9zdqLsfz79YsLnw#add-components "Saiba como adicionar componentes à sua página em Construtor de IU. Uma página é criada adicionando componentes."). 8. Selecione Adicionar guia no palco. 9. Selecione Comece 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 em sua página. | | Ícone | Ícone a ser exibido ao lado do rótulo da guia. Os ícones não são obrigató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 Guias componente. 13. Selecione a nova guia. 14. Selecione E ícone. 15. Selecione o componente que você deseja adicionar à guia. Os componentes são exibidos na guia em que estão aninhados na árvore de conteúdo. Para obter mais informações, consulte [Adicionar e configurar componentes](https://www.servicenow.com/docs/ygUn14C9zdqLsfz79YsLnw#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 ainda mais, adicionar estilo ou adicionar um manipulador de eventos. Para obter mais informações sobre estilo, consulte [Mude a aparência padrão dos componentes](https://www.servicenow.com/docs/nAPakMJu8hz8veM8SRmbQQ#add-styling-to-component "Defina os estilos para componentes e encapsuladores para mudar a aparência padrão."). Para obter mais informações sobre como adicionar um manipulador de eventos, consulte [Gerencie ações nas páginas do Construtor de IU](https://www.servicenow.com/docs/FYOEMRmCtG7ZaqA7tbp8FA "Saiba como 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."). Adicione guias do repetidor {#ariaid-title3} -------------------------------------------- Use o componente Guias para criar um conjunto de guias do repetidor vinculando guias a uma matriz de dados. ### Antes de Iniciar Função necessária: administrador ### Por Que e Quando Desempenhar Esta Tarefa Você pode usar [repetidor](https://www.servicenow.com/docs/tycYZYkLtxVDBAc3Hd47nQ#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, [\"tarefa\": \"A\", \"\"tarefa\": \"B\"], repete o conteúdo dentro dela duas vezes.")guias para criar várias guias com base na matriz de dados fornecida. Você pode passar o ícone, rótulo, contagem e campos como uma chave no objeto. Use a chave do 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é TudoEstrutura 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://www.servicenow.com/docs/grAtbx3qopFwcYf7I81E_A "Saiba o que é uma experiência 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 no Construtor de IU, consulte [Crie uma página no Construtor de IU](https://www.servicenow.com/docs/vySiIhP_KVnKNxbc5zJKxw "Crie uma página em Construtor de IUpara um portal, espaço ou aplicação personalizada para que você possa criar uma experiência na web para seus usuários."). 4. Selecione - Adicionar conteúdo botão na fase para abrir a caixa de ferramentas. 5. Selecione um Coluna única layout. 6. Em seguida, selecione E na coluna para abrir a caixa de ferramentas. 7. Adicione um Guias para sua página. Para obter mais informações sobre como adicionar um componente a uma página, consulte [Adicionar e configurar componentes](https://www.servicenow.com/docs/ygUn14C9zdqLsfz79YsLnw#add-components "Saiba como adicionar componentes à sua página em Construtor de IU. Uma página é criada adicionando componentes."). 8. Selecione Adicionar guia no palco. 9. Selecione Use um repetidor . 10. Selecione Avançar. 11. Insira um rótulo para a guia do repetidor no Rótulo da guia de espaço reservado campo. Este rótulo é atribuído à primeira guia do repetidor e é a única guia exibida na visualização da página. 12. Selecione Editar em Matriz de dados campo. 13. Configure a matriz de dados no editor JSON. {#add-repeater-tab__table_spf_5sb_5kb__entry__3} | Chave | Tipo de dados | Descrição | |----------|----------------------|------------------------------------------------------------------------------------------------------------------------------------------| | ícones | Cadeia de caracteres | Nome do ícone que aparece em Construtor de IU. | | rótulo | Cadeia de caracteres | Necessário . Nome de exibição da guia em Construtor de IU. | | contagem | Número | Valor a ser fornecido no rótulo da guia. Vincular dinamicamente a um agente de dados ou um script de cliente 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 Save (Salvar). 17. Adicione componentes à guia do repetidor. 18. Selecione ![Botão Visualizar que abre sua página em 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 em sua página. Adicione 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 Lista relacionada preenche automaticamente as guias com base no registro que sua página está exibindo. Por exemplo, por padrão, as listas relacionadas da tabela de usuários são funções, grupos, delegados e domínios de visibilidade. Se a sua página estiver exibindo um registro de usuário, criar 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 IUpáginas que usam controladores (recurso avançado)](https://www.servicenow.com/docs/fcp5KQJqBaGCP2vogH09Jw#controllers "Os controladores simplificam a vinculação de dados e lógica de evento para habilitar predefinições de componente no Construtor de IU.")para obter mais informações. ### Procedimento 1. Navegar até TudoEstrutura 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://www.servicenow.com/docs/grAtbx3qopFwcYf7I81E_A "Saiba o que é uma experiência 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 no Construtor de IU, consulte [Crie uma página no Construtor de IU](https://www.servicenow.com/docs/vySiIhP_KVnKNxbc5zJKxw "Crie uma página em Construtor de IUpara um portal, espaço ou aplicação personalizada para que você possa criar uma experiência na web para seus usuários."). 4. Selecione - Adicionar conteúdo botão na fase para abrir a caixa de ferramentas. 5. Selecione um Coluna única layout. 6. Em seguida, selecione E na coluna para abrir a caixa de ferramentas. 7. Adicione um Guias para sua página. Para obter mais informações sobre como adicionar um componente a uma página, consulte [Adicionar e configurar componentes](https://www.servicenow.com/docs/ygUn14C9zdqLsfz79YsLnw#add-components "Saiba como adicionar componentes à sua página em Construtor de IU. Uma página é criada adicionando componentes."). 8. Selecione Adicionar guia no palco. 9. Selecione Exiba listas relacionadas para 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 para aparecer na guia de visualização da sua página. | | Ocultar guia | Se você deseja ocultar ou exibir a guia. | | Controlador de registros | 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 no Guias do painel de configuração. Apenas 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 Save (Salvar). 14. Para exibir e testar sua página, selecione ![Botão Visualizar que abre sua página em 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 guias de coleção de páginas para recriar as mesmas guias em várias páginas no 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 disponíveis globalmente. Use 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 sua própria coleção. 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://www.servicenow.com/docs/5LJsBNPzfP7iS4EdHsZUWw "As coleções de páginas são grupos de páginas que podem ser usadas em várias experiências."). ### Procedimento 1. Navegar até TudoEstrutura 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://www.servicenow.com/docs/grAtbx3qopFwcYf7I81E_A "Saiba o que é uma experiência 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 no Construtor de IU, consulte [Crie uma página no Construtor de IU](https://www.servicenow.com/docs/vySiIhP_KVnKNxbc5zJKxw "Crie uma página em Construtor de IUpara um portal, espaço ou aplicação personalizada para que você possa criar uma experiência na web para seus usuários."). 4. Selecione - Adicionar conteúdo botão na fase para abrir a caixa de ferramentas. 5. Selecione um Coluna única layout. 6. Em seguida, selecione E na coluna para abrir a caixa de ferramentas. 7. Adicione um Guias para sua página. Para obter mais informações sobre como adicionar um componente a uma página, consulte [Adicionar e configurar componentes](https://www.servicenow.com/docs/ygUn14C9zdqLsfz79YsLnw#add-components "Saiba como adicionar componentes à sua página em Construtor de IU. Uma página é criada adicionando componentes."). 8. Selecione Adicionar guia no palco. 9. Selecione Adicione 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 [Crie uma coleção de páginas em várias páginas de IU](https://www.servicenow.com/docs/DtgwSxE0yZyM5iGjT8GzXw "Crie uma coleção de páginas para acomodar o conteúdo com guias que pode ser usado em todas as experiências."). 12. Selecione Adicionar. A nova guia coleção de páginas é exibida no Guias do painel de configuração. Apenas uma guia de espaço reservado é exibida na visualização da página. 13. Selecione Save (Salvar). 14. Para exibir e testar sua página, selecione ![Botão Visualizar que abre a variante de página.]().