---
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 uma barra lateral contextual

# Adicionar uma barra lateral contextual {#ariaid-title1}

* Versão de lançamento: Xanadu
* 
* Atualizado 1 de ago. de 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 min. de leitura

Adicione uma barra lateral contextual a uma página com Construtor de IU para exibir conteúdo relacionado usando uma estrutura de guia vertical.

## Antes de Iniciar

Função necessária: ui_builder_admin

## Por Que e Quando Desempenhar Esta Tarefa

Você pode configurar a barra lateral contextual da mesma forma que configuraria um componente da guia. Cada guia vertical na barra lateral contextual renderiza conteúdo personalizado. Você pode colocar componentes em cada guia para acesso rápido diretamente na página.

Por exemplo, uma página de criação de documentos pode ter o componente de anexos em uma guia, permitindo que você anexe arquivos relacionados ao documento em que está trabalhando. Em outra guia, pode haver um componente de comentários aninhados, permitindo que você adicione e exiba comentários relacionados ao documento.

## 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."). Para obter informações sobre como criar uma variante de página, consulte [Criar uma variante de página](https://servicenow-prod.fluidtopics.net/PM2wVmjGKdButslttxIKsg "Uma variante de página em Construtor de IU é uma variação de uma página que existe no mesmo caminho que tem como meta públicos diferentes usando critérios do usuário.")
4. Na fase, abra a caixa de ferramentas selecionando o botão + Adicionar conteúdo.
5. Selecione o bloco Layout de coluna única.
6. Na coluna, abra a caixa de ferramentas selecionando o ícone +.
7. Selecione o componente da barra lateral contextual para adicioná-lo à sua página.  
   A barra lateral contextual aparece na fase e a seção Guias aparece no painel de configuração.
8. No painel de configuração na seção Guias, selecione o ícone de configurações (ícone ![Configurações]()) para configurar a guia.
   1. No formulário, preencha os campos.  
      {#add-contextual-sidebar__table_usy_s1c_wtb__entry__2}

      | Campo | Descrição |
      |-|-|
      | Rótulo da guia | Rótulo exibido na guia da sua página. |
      | Ícone | Ícone que aparece ao lado do rótulo da guia. Nota: Os ícones não são necessários. |
      | Ocultar guia | Opção para ocultar ou exibir a guia. |
      [Tabela 1. Formulário de configurações da guia]

      {#add-contextual-sidebar__table_usy_s1c_wtb}
   2. Selecione Salvar.
   {#add-contextual-sidebar__substeps_sjd_sfs_wbc}
9. Na fase da barra lateral contextual, abra a caixa de ferramentas selecionando o ícone +.
10. Selecione o componente que você deseja adicionar à guia.  
    O componente é exibido na guia 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.").
11. **Opcional:** Para adicionar outra guia, selecione + Adicionar na seção Guias.
{#add-contextual-sidebar__steps_a5t_tvr_wbc}

## O que Fazer Depois

Para obter informações detalhadas sobre a configuração da barra lateral contextual e suas propriedades, consulte [Configuração de guias UIB](https://developer.servicenow.com/dev.do#!/reference/next-experience/washingtondc/now-components/now-tabs/uib-setup) no site do desenvolvedor ServiceNow.