---
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


---

# Início rápido do Construtor de IU

# Início rápido 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) 6 min. de leitura

Este início rápido orienta você no processo de criação de sua primeira página em Construtor de IU. Criar sua primeira página é a primeira etapa para entender como criar páginas de interface do usuário para seu espaço ou experiências de portal personalizadas.

## Antes de Iniciar

Função necessária: ui_builder_admin

Neste Construtor de IU início rápido, você executa as seguintes tarefas para criar sua primeira página em Construtor de IU:

* Iniciar Construtor de IU.
* Crie uma página para seu espaço ou experiência de portal personalizada. Para obter mais informações sobre como criar páginas, consulte [Criar 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.").
* Crie sua página adicionando componentes. Para obter mais informações sobre componentes, consulte [Personalizar Construtor de IU páginas usando componentes](https://servicenow-prod.fluidtopics.net/LMCt0RiXG4slkbM3HcNAXA "Saiba o que é um componente em Construtor de IU. Veja também como os componentes funcionam no Construtor de IU.").
* Salve sua página.
* Visualize sua página para ver como ela aparece em um navegador.
{#ui-builder-quick-start__ul_r2c_wjx_d4b}

## Procedimento

1. Navegar até TodosEstrutura do Now ExperienceConstrutor de IU.  
   Figura 1. Iniciar Construtor de IU
2. Selecione uma experiência na qual você deseja trabalhar na página inicial Construtor de IU.  
   Se você não vir nenhuma experiência listada na qual trabalhar, entre em contato com o administrador para obter acesso a uma experiência ou criar uma experiência. Para obter mais informações, 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.").
3. Crie uma página.
   1. Selecione o ícone + na seção Páginas e variantes.  
      ![Botão Criar página na página de exibição de experiência.]()
   2. Selecione Criar uma nova página.  
   3. Em vez disso, selecione → Criar do zero.  

      Você também pode criar páginas usando modelos de página. Consulte [Criar uma página a partir de modelo](https://servicenow-prod.fluidtopics.net/ZZR7QsMHgfbVYvpxDuuhaA "Use um modelo para criar uma página com base em um modelo de página predefinido. Um modelo de página pode ajudar a criar páginas mais rapidamente e manter as páginas consistentes em uma experiência. Os modelos de página podem incluir componentes, recursos de dados e um layout.") para obter mais informações.
   4. Insira <kbd class="ph userinput">Página inicial</kbd> como o nome exclusivo da página no campo Nome.
   5. Especifique um caminho para sua página no campo Caminho da URL. Construtor de IU gera um caminho padrão com base no nome que você forneceu na última etapa.  
      Um caminho padrão é adicionado com base no nome da página. Você também pode criar seu próprio caminho. O caminho é obrigatório e deve ser exclusivo. O caminho pode incluir dígitos (0-9), letras (AZ, az) e alguns caracteres especiais (`"-"`, `"."`, `"_"`, `"~"`), com as palavras separadas por uma barra ou hífen. A visualização da URL mostra o caminho da sua página.  
      Nota:  
      O padrão do escopo da aplicação é o escopo em que o usuário está atualmente dentro de Now Platform®. Para obter mais informações sobre o escopo da aplicação, consulte [Saiba mais sobre segurança e funções](https://servicenow-prod.fluidtopics.net/9Jsyh_1H~dn221ndkZFSJw "Configure a segurança e as funções para sua instância Construtor de IU.").
   6. Selecione Continuar.
   7. **Opcional:** Adicione parâmetros ao URL da página selecionando + Adicionar.  
      Para obter mais informações, consulte [Gerenciar Construtor de IU páginas e variantes de página](https://servicenow-prod.fluidtopics.net/DPjKZHSFSIvEPq~A~sv0iQ "Saiba o que é uma página em Construtor de IU. Entenda os blocos de construção de uma página Construtor de IU, como layouts de coluna e componentes.").
   8. Selecione Parece bom.
   9. Insira <kbd class="ph userinput">Página inicial do gerente</kbd> como o nome da variante de página.
   10. **Opcional:** Adicione um ou mais públicos a esta página.  
       Se um público de que você precisa não estiver listado, você poderá escolher o link Abrir públicos na plataforma para criar um.
   11. **Opcional:** Adicione condições para quando exibir a página ou a guia.
   12. Selecione Continuar.
   13. Na próxima tela, selecione Criar dinâmico.
   14. Selecione Criar para criar sua página em branco.

   Parabéns! Você criou sua primeira página! A página está vazia de conteúdo. Você adiciona componentes à página para criar funcionalidade para ela. Componentes são os blocos de construção de uma página. Construtor de IU vem com muitos componentes prontos para você adicionar à sua página. Os componentes podem ser tão simples quanto um Títuloou tão complexos quanto uma Lista.
4. Selecione Editor para começar a adicionar e personalizar sua página.  
5. Adicione um componente de contêiner à sua página.  
   Um contêiner é o que contém seus componentes. Pense em um contêiner como uma área da página onde você adiciona informações, imagens ou funcionalidade (seus componentes). Você pode ter quantos contêineres quiser em uma página, com quantos contêineres dentro de contêineres, com quantos componentes nos contêineres.
   1. Selecione + Adicionar conteúdo na árvore de conteúdo.  
   2. Selecione o layout de coluna única na caixa de ferramentas.
   3. Selecione Layout de coluna 1 na árvore de conteúdo para realçar o contêiner.  
   4. Selecione o nome do componente no painel de configuração.  
   5. No campo Rótulo do componente, digite <kbd class="ph userinput">Contêiner para o título</kbd>.
   6. No campo [ID do componente](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-component-id-ui-builder "Usado para fazer referência a um componente ao adicionar um script ou vincular dados ao componente. Um ID de componente é criado automaticamente (com base no rótulo do componente) quando você adiciona um componente a uma página, mas o ID do componente pode ser editado."), digite <kbd class="ph userinput">container_for_heading</kbd>.
   7. Selecione Aplicar.  
      Veja se o nome do layout da coluna muda para Contêiner no título da árvore de conteúdo. A árvore de conteúdo é um conceito importante. A árvore de conteúdo é uma maneira fácil de ver o layout estruturado da sua página. A árvore de conteúdo é especialmente importante quando você tem vários componentes na página. Você seleciona o componente na árvore de conteúdo para destacá-lo na página, facilitando a criação da página. Você pode fazer uma pesquisa de texto para um componente.

      Para obter mais informações sobre IDs de componente, consulte [ID do componente](https://servicenow-prod.fluidtopics.net/LMCt0RiXG4slkbM3HcNAXA#work-components__component_id).

   Você adicionou com sucesso o layout da primeira coluna à página.
6. Adicione um componente de título ao layout de coluna.  
   Você pode adicionar componentes à página de maneiras diferentes. Para obter mais informações sobre como adicionar componentes à sua 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.").
   1. Selecione + Adicionar conteúdo na árvore de conteúdo abaixo do layout de coluna criado na etapa 5.  
   2. Digite <kbd class="ph userinput">título</kbd> na pesquisa e selecione o componente Título.
   3. Selecione o novo componente de título na árvore de conteúdo para destacá-lo.
   4. Selecione Nenhum no painel de configuração.
   5. Selecione o nome do componente no painel de configuração.
   6. No campo Rótulo do componente, insira <kbd class="ph userinput">Cabeçalho personalizado</kbd> como o rótulo exclusivo para o componente do título.
   7. No campo ID do componente, insira <kbd class="ph userinput">custom_heading</kbd> como o ID exclusivo do componente de título.
   8. Clique em "Aplicar".  
   {#ui-builder-quick-start__substeps_yhc_4n5_xvb}
7. Personalize o componente de título.
   1. Selecione o componente de título na árvore de conteúdo.
   2. Selecione a guia Configurar no painel de configuração.
   3. No campo Rótulo, insira o texto do título, como <kbd class="ph userinput">Meu novo título</kbd>.
   4. O estilo muda o tamanho do texto do título.  
      Por exemplo, se você selecionar Cabeçalho secundário, o texto será menor. Tamanhos de títulos diferentes são úteis se você tiver dois títulos e quiser que o segundo título seja menor que o título primário. Para obter mais informações sobre como configurar componentes, consulte [Configurar componentes no Construtor de IU](https://servicenow-prod.fluidtopics.net/LMCt0RiXG4slkbM3HcNAXA#work-components__config_components).
   5. Deixe o Nível como 1.
   6. Selecione Salvar.

   {#ui-builder-quick-start__substeps_yjn_t22_bwb}  
   Você adicionou e personalizou um componente de título à sua página.
8. Adicione um layout de segunda coluna à sua página.
   1. Semelhante a antes, selecione + Adicionar conteúdo na árvore de conteúdo.  
   2. Selecione o layout de coluna única na caixa de ferramentas.
   3. Selecione Layout de coluna 1 na árvore de conteúdo para realçar o contêiner.  
   4. Selecione o nome do componente no painel de configuração.
   5. No campo Rótulo do componente, digite <kbd class="ph userinput">Contêiner para conteúdo</kbd>.
   6. No campo ID do componente, digite <kbd class="ph userinput">container_for_content</kbd>.
   7. Selecione Aplicar.  
   8. Selecione Salvar.

   Você adicionou com sucesso o segundo componente de contêiner à sua página.
9. Adicione um componente de imagem à sua página.  
   Uma imagem é uma boa maneira de adicionar um visual à sua página. Neste início rápido, você adiciona uma foto do banco de imagens que vem com Construtor de IU. Mas você pode adicionar qualquer imagem que esteja disponível.
   1. Selecione + Adicionar conteúdo na árvore de conteúdo abaixo do contêiner criado na etapa 8.
   2. Digite <kbd class="ph userinput">imagem</kbd> na pesquisa e selecione o componente Imagem.  
      Uma imagem padrão é carregada no componente de imagem. Você pode adicionar sua própria imagem adicionando um URL à imagem. Você pode usar imagens hospedadas na Internet ou imagens no Now Platform®. Se você usar uma imagem hospedada em um site externo, deverá usar o protocolo `https` para segurança.
   3. Selecione o componente Imagem 1 na árvore de conteúdo para realçar a imagem.  
   4. Selecione Nenhum no painel de configuração.
   5. Selecione o nome do componente no painel de configuração.
   6. No campo Rótulo do componente, digite <kbd class="ph userinput">Minha imagem</kbd>.
   7. No campo ID do componente, digite <kbd class="ph userinput">my_image</kbd>.
   8. Selecione Aplicar.  
   9. Selecione Salvar.

   {#ui-builder-quick-start__substeps_h45_jpl_bwb}  
   Você adicionou um componente de imagem à sua página.

10. Selecione Visualizar no cabeçalho Construtor de IU para visualizar sua página.  
    Parabéns! Você concluiu o Construtor de IU início rápido. Sua página gera uma visualização de como ela aparece no espaço ou na experiência do portal.

## Resultado

1. Criou sua primeira página em Construtor de IU.
2. Adicionou seu primeiro componente de contêiner à página. Você alterou o rótulo do contêiner.
3. Adição de um componente de título como um título ao contêiner. Você alterou o texto do título. Você também alterou o rótulo.
4. Adicionou um segundo componente de contêiner à sua página. Você alterou o rótulo do contêiner.
5. Adição de um componente de imagem. Você alterou o rótulo do componente de imagem.
6. Sua nova página foi salva.
7. Visualizou sua página no navegador.
{#ui-builder-quick-start__ol_pbw_tvm_vnb}

Você concluiu com sucesso o Construtor de IU início rápido!