---
sourceDocument: Interface do usuário da Now Platform Yokohama
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/yokohama/platform-user-interface

 Release :

    - yokohama

ft:locale :

    - pt-BR

ft:publication_title :

    - Interface do usuário da Now Platform Yokohama

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Construtor de IU tutorial da página principal

# Construtor de IU tutorial da página principal {#ariaid-title1}

* Versão de lançamento: Yokohama
* 
* Atualizado 30 de jan. de 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 6 min. de leitura

Saiba como usar o legado Construtor de IUpara criar uma página principal personalizada.

## Antes de Iniciar

Importante:  
O construtor descrito nesta página serve para criar e editar páginas principais em todos os espaços, exceto CSM. Para obter informações sobre o novo Construtor de IU que cria e edita todas as páginas no Espaço de CSM, consulte [Construtor de IU](https://www.servicenow.com/docs/access?context=ui-builder-overview&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US).
Esta tarefa pertence ao legado Construtor de IUque só permite que você crie uma página principal. Use a nova versão do Construtor de IU para criar um Espaço configurável. Para obter mais informações, consulte [Construtor de IU](https://www.servicenow.com/docs/access?context=ui-builder-overview&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US).

Função necessária: Workspace_admin ou ui_builder_admin

## Por Que e Quando Desempenhar Esta Tarefa

Antes de criar sua página principal, vamos ver como Construtor de IUfunciona explorando uma página principal existente.

## Procedimento

1. Navegar até TudoExperiência de espaçoAdministraçãoTodos os espaços e clique em um espaço para abri-lo.
2. Se a página aberta não for editável, clique em aqui link em Para editar este registro, clique aqui para tornar a página editável.
3. Clique em Abrir no Construtor de IU .
4. No painel Gestão de páginas, no Páginas clique em Visão geral do incidente página principal.  
   Esta página principal aparece no painel Fase. Observe o. Status e. Aplicação Campos acima do painel Configuração. . ativo o status significa que a página principal está sendo usada no momento. . Aplicação O campo mostra que a página principal está sendo usada pelo ITSM Espaço do agente. Se você clicou em:
   * Desativar , o status mudaria para Inativo e a página principal não seria mais exibida no espaço.

     Desativar o botão seria substituído pelo Ativar , que permitiria publicar a página principal no espaço.  
     Normalmente, você desativa as páginas principais quando está trabalhando nelas. Por exemplo, para atualizar a página principal atual, você pode:
     1. Clone sua página principal atual.
     2. Trabalhe nele no estado inativo.
     3. Crie a versão atualizada Ativo .
     4. Crie a versão original Inativo .
     {#drag-and-drop-tutorial__ol_wtj_hcj_gkb}
   * Salvar , você salvaria todas as mudanças feitas na página principal. . Status :
     * Ativo , as mudanças aparecem imediatamente no espaço.
     * Inativo , as mudanças são salvas, mas não publicadas.
     {#drag-and-drop-tutorial__ul_pm4_hc3_gkb}
   {#drag-and-drop-tutorial__ul_vyj_1c3_gkb}
5. Clique nos componentes e veja como os parâmetros de configuração mudam no painel Configuração.
6. Clique em Acontecendo agora .  
   O contêiner se torna visível ao redor dos quatro componentes menores. Acontecendo agora é o rótulo do contêiner. Procure no painel Configuração em Rótulo . Os contêineres são como você agrupa outros componentes.
7. Com o contêiner ainda realçado, deslize Mostrar borda controle deslizante para a direita.  
   Uma borda é exibida, que mostra o contêiner.
8. Deslize o. Pode recolher controle deslizante para a direita.  
   Um ícone de acento ( ![Ícone Recolher]()) aparece acima do contêiner. Um agente pode clicar no cursor para recolher o contêiner e tudo nele.
9. No canto superior direito do painel Configuração, clique na seta para a direita (\>) para recolher o painel.
10. No painel Fase, clique no contêiner e, em seguida, clique no ícone de configuração ( ![Ícone de configuração]()).  
    O painel Configuração é reaberto.

    Você também percebe o ícone de movimentação ( ![Capturar componente]()) que você pode usar para arrastar um componente. Não faça isso ainda.

    . Recolhido O controle deslizante no painel Configuração significa que o contêiner começa recolhido e aparece como uma seta para baixo ( ![Ícone Expandir]()) em que um agente pode clicar para expandir o contêiner.

    Agora que você viu como usar as diferentes partes da interface, vamos ver como criar uma página principal.

## Criar novo tutorial de página principal {#ariaid-title2}

Crie uma nova página principal.

### Procedimento

1. Em Páginas clique no ícone de mais para abrir uma nova página principal.  

   Você também pode criar uma nova página clicando em Ações da páginaNova página.
2. Em OK. Vamos obter algumas informações gerais para esta página modal, insira o nome da sua página principal e clique em Criar página principal .  
   Este título aparece acima da fase, mas não na sua página principal.

## Tutorial Adicionar e configurar componentes {#ariaid-title3}

Adicione e configure componentes em uma página principal.

### Procedimento

1. Clique em - Adicionar componente E arraste um componente de imagem para o painel de fase.  
   Os parâmetros da imagem aparecem no painel Configuração.
2. Arraste um componente de visualização de dados muito abaixo da imagem e solte-o.  
   O componente não aparece no painel Fase.
3. Arraste um componente de visualização de dados sobre o componente de imagem, mas não o solte.  
   Mova o componente de visualização de dados ao redor das bordas do componente de imagem.  
   O lado do componente de imagem é realçado quando você move o componente de visualização de dados sobre ele.
4. Segure o componente de visualização de dados sobre o lado esquerdo da imagem e solte-o.  
   O componente de visualização de dados aparece à esquerda do componente de imagem.
5. Clique em e, em seguida, pegue o ícone Mover ( ![Capturar componente]()) acima do componente de visualização de dados, arraste-o sobre a borda inferior do componente de imagem e solte-o.  
   Agora, você sabe como mover um componente no espaço de Aterrissagem. O componente de visualização de dados está em branco. Vamos preenchê-lo para que fique visível.
6. No painel Configuração, no Relatório campo, tipo <kbd class="ph userinput">incidente </kbd>.  
   Uma lista de entradas de digitação antecipada de possíveis entradas é exibida.
7. Clique em Incidentes em aberto por prioridade na lista.  
   Esse relatório é aberto no componente.
8. No painel Configuração, exclua Incidentes em aberto por prioridade e no Widget de PA campo, tipo <kbd class="ph userinput">incidente </kbd>.  
   Uma lista de entradas de digitação antecipada de possíveis entradas é exibida. Essas entradas são Performance Analytics(PA).

   Você só pode colocar uma visualização de dados no componente. Portanto, você pode exibir um relatório ou um widget de PA, mas não ambos. Se você colocar entradas para um relatório e um widget de PA, Construtor de IUexibe somente o relatório.

   Agora você sabe como adicionar e organizar componentes em uma página principal. Agora vamos ver como agrupá-los.

## Tutorial Agrupar e organizar componentes {#ariaid-title4}

Agrupe e organize componentes em uma página principal.

### Procedimento

1. Clique em Ações da página , selecione Excluir página e confirme a exclusão.
2. Selecione o componente de visualização de dados, clique no ícone de lixeira ( ![Ícone de lixeira]()) e, em seguida, o ícone de marca de seleção de exclusão ( ![Exclua componente]()) acima do componente para removê-lo.  
   Agora você excluiu componentes em uma página principal. Se quiser, você também pode remover o componente de imagem.
3. Arraste um componente de contêiner para o painel Fase.
4. No painel Componente, insira um valor em Rótulo para o contêiner e pressione Mostrar borda controle deslizante para a direita para que você possa ver o contêiner.
5. Em Rótulo , adicione um título ao contêiner, por exemplo, <kbd class="ph userinput">Listas importantes </kbd>.
6. Arraste um componente da lista para o contêiner.
7. No painel Componente, no Tabela , insira um valor para a tabela de origem da lista de registros, por exemplo, <kbd class="ph userinput">incidente </kbd>.
8. Arraste outro componente da lista para o contêiner.  
   Você pode soltar a lista dentro ou fora do contêiner. Coloque-o dentro do contêiner.

9. No painel Componente, no Tabela insira um valor para uma tabela diferente de onde a lista de registros vem, por exemplo, tarefa.  
   Agora você tem dois componentes de lista dentro de um componente de contêiner, que tem um rótulo que descreve as listas.
10. Continue adicionando componentes dentro ou fora do contêiner e usando o ícone Mover ( ![Capturar componente]()) para arrastar os componentes para que você possa se acostumar a adicionar, excluir, mover e agrupar componentes.
11. Clique em Salvar.  
    Se você estivesse criando uma página principal real, você também clicaria Ativar . Como você não está criando uma página principal real neste tutorial, vamos excluir esta página principal de prática.

## Exclua um tutorial de página principal {#ariaid-title5}

Exclua uma página principal.

### Procedimento

1. Em Páginas selecione sua página principal.
2. Em Ações da página , clique em Excluir página .

### O que Fazer Depois

Agora você tem uma ideia de como usar Construtor de IU. Você está pronto para [crie sua primeira página principal](https://servicenow-prod.fluidtopics.net/mlj6uyNahjR29SiiphYrwA "Crie uma página principal personalizada para mostrar aos agentes as tarefas importantes que eles podem realizar.").