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


---

# Construtor de IU tutorial

# Construtor de IU tutorial {#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

Aprenda a usar os conceitos básicos de Construtor de IU para criar uma página chamada Meu Tutorial.

## Antes de Iniciar

Função necessária: ui_builder_admin

Neste tutorial Construtor de IU, você executa as seguintes tarefas para criar uma [página](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-page-ui-builder "Coleção de layouts de coluna, colunas e componentes. Crie ou personalize várias páginas do Construtor de IU para experiências de espaço e portal.") 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.").
* Mude o layout da página para ter duas colunas. Para obter mais informações, consulte [Organizar componentes nas páginas do Construtor de IU](https://servicenow-prod.fluidtopics.net/W5Y8aZAAxPm3_iU~bzWHkw "Os layouts de coluna organizam os componentes em uma página Construtor de IU. Saiba como os layouts de coluna são usados em Construtor de IU.").
* Crie sua página adicionando dois [componentes](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-component-ui-builder "Use a biblioteca de componentes do Construtor de IU para criar páginas. Os componentes têm uma interface que um usuário final pode exibir e interagir. Os componentes podem se comunicar por meio de eventos e propriedades. Os componentes usados com frequência incluem Cabeçalho, Imagem, Lista, Formulário e Botão.")de contêiner .
* Renomeie os componentes do contêiner na árvore de conteúdo.
* Adicione um componente de título e um componente de botão ao primeiro contêiner. Adicione um componente de visualização de dados ao segundo contêiner. 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.").
* Configure seus componentes da seguinte forma:
  * Vincule o botão ao site ServiceNow®.
  * Conecte o componente de visualização de dados a uma fonte de dados para exibir os dados da tarefa. Para obter mais informações sobre recursos de dados, consulte [Expor dados dinamicamente em páginas do Construtor de IU (recurso avançado)](https://servicenow-prod.fluidtopics.net/BDUmENQY96OSsVG1qIX2QQ "Sincronize dados entre ServiceNow tabelas e dados com as páginas que você cria com Construtor de IU. As páginas exibem dados sincronizados em tempo real e atualizam dados/tabelas quando um usuário insere informações.").
  {#uib-tutorial__ul_yn2_xyq_24b}
* Salve sua página com frequência.
* Visualize sua página para ver como ela aparece em um navegador.
{#uib-tutorial__ul_fgz_xhc_24b}

## Procedimento

1. Navegar até TodosEstrutura do Now ExperienceConstrutor de IU.  
   Você também pode digitar <kbd class="ph userinput">Construtor de IU</kbd> diretamente no Navegador de filtros.Figura 1. Iniciar Construtor de IU
2. Na página inicial Construtor de IU, escolha uma experiência na qual você deseja trabalhar.  
   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.

   | Para executar esta tarefa | Faça o seguinte |
   | Criar 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. ![Botão Criar do zero.]() 4. Insira o nome da sua nova página. O nome pode ser o que você quiser. Neste exemplo, você pode digitar <kbd class="ph userinput">Minha página de tutorial</kbd>. 5. No campo Caminho, um caminho é inserido automaticamente com base no nome da página. Neste exemplo, o Caminho é <kbd class="ph userinput">my-tutorial-page</kbd>. O caminho é o URL da página. Você pode mudar este caminho para o que quiser, mas o caminho deve ser exclusivo. O caminho deve estar em letras minúsculas e não conter espaços. A visualização da URL mostra qual será o caminho da sua página. 6. Selecione Continuar. 7. (Opcional) Adicione parâmetros ao URL da página. 8. Selecione Parece bom. 9. Insira o nome da variante de página. O nome pode ser o que você quiser. Neste exemplo, você pode digitar <kbd class="ph userinput">Minha variante de primeira página</kbd>. 10. Adicione um público para a variante de página selecionando + Adicionar público. Neste exemplo, selecione Administrador. 11. Selecione Continuar. 12. Na próxima tela, selecione Criar dinâmico. 13. Selecione Criar. 14. Depois que sua página é criada, a tela do editor de páginas é exibida. Você pode alterar configurações avançadas, como as configurações de URL e as configurações de variante. Para este tutorial, você pode ignorar essas opções avançadas. Para obter mais informações sobre como alterar configurações avançadas, consulte [Criar uma página do Construtor de IU: configurações avançadas](https://servicenow-prod.fluidtopics.net/DPjKZHSFSIvEPq~A~sv0iQ#work-pages__create_page_advanced_settings). {#uib-tutorial__ol_ncw_hms_tjb} Figura 2. Editor de páginas do Construtor de IU |
   |-|-|

   {#uib-tutorial__choicetable_n3q_gmd_jjb}  
   Parabéns! Você criou sua página de tutorial! 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. Altere o layout da página para um layout de duas colunas.  
   Para obter mais informações sobre layouts, consulte [Organizar componentes nas páginas do Construtor de IU](https://servicenow-prod.fluidtopics.net/W5Y8aZAAxPm3_iU~bzWHkw "Os layouts de coluna organizam os componentes em uma página Construtor de IU. Saiba como os layouts de coluna são usados em Construtor de IU.").

   | Para executar esta tarefa | Faça o seguinte |
   | Mude o layout da página para duas colunas | 1. Selecione o nível Corpo da árvore de conteúdo para realçar a página. 2. Selecione + Adicionar conteúdo na árvore de conteúdo. 3. Selecione o layout Duas colunas. 4. O layout de duas colunas é exibido. {#uib-tutorial__ol_igv_b1x_d4b} |
   |-|-|

   {#uib-tutorial__choicetable_hgv_b1x_d4b}
5. Adicione um componente de título e um componente de botão à coluna esquerda.

   | Para executar esta tarefa | Faça o seguinte |
   | Adicionar um componente de título ao contêiner da coluna esquerda | Você pode adicionar componentes à página de maneiras diferentes. Para obter mais informações sobre como adicionar componentes à sua página, consulte [Tabela 1](https://servicenow-prod.fluidtopics.net/LMCt0RiXG4slkbM3HcNAXA#work-components__addcomponentstable). 1. Selecione o botão + no meio da coluna esquerda. 2. Digite <kbd class="ph userinput">Título</kbd> no campo de pesquisa. 3. Selecione o componente Título para adicioná-lo ao contêiner. Um componente de título é uma maneira de adicionar texto ou um título à sua página. 4. Selecione Nenhum na lista de predefinições no painel de configuração. 5. Selecione o nome do componente no painel de configuração para ver o rótulo e o ID do componente. Você pode alterá-los para o que quiser, desde que sejam exclusivos. 6. Selecione Aplicar. 7. Configure o componente de título. Os autores de componentes configuram componentes para expor as propriedades apropriadas necessárias para configurar seus componentes. * Defina o estilo como Cabeçalho-primário. O estilo muda a classe do texto do título, como fonte, peso e cor. 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. * Insira <kbd class="ph userinput">Meu Tutorial</kbd> como o texto do título no campo Rótulo. * Deixe o Nível como 1. {#uib-tutorial__ul_yc3_dlx_d4b} {#uib-tutorial__ol_r1g_4fl_vnb} |
   | Adicionar e configurar um componente de botão ao contêiner da coluna esquerda | Adicione um componente de botão à sua página. Configure o botão alterando o texto e a aparência dele. Em seguida, altere o que acontece quando você clica no botão adicionando um manipulador de eventos para o botão. O manipulador de eventos adiciona uma ação ao botão para vincular à página inicial ServiceNow®. Portanto, quando você clica no botão, a página inicial ServiceNow® é aberta em uma nova guia do navegador. Para obter mais informações sobre como configurar componentes, consulte [Componentes](https://developer.servicenow.com/dev.do#!/reference/now-experience/sandiego/components). 1. Selecione o + na borda inferior do componente de título que adicionamos na seção anterior. 2. Digite <kbd class="ph userinput">Botão</kbd> no campo de pesquisa. 3. Selecione o componente Botão na lista. Para obter mais informações sobre como adicionar componentes à sua página, consulte a [Tabela 1](https://servicenow-prod.fluidtopics.net/LMCt0RiXG4slkbM3HcNAXA#work-components__addcomponentstable). 4. Selecione o nome do componente no painel de configuração para ver o rótulo e o ID do componente. Você pode alterá-los para o que quiser, desde que sejam exclusivos. 5. Configure o componente do botão da seguinte forma. * Insira <kbd class="ph userinput">Página inicial</kbd> no campo Rótulo para mudar o nome do botão. * Altere o Tamanho para Grande. * Insira página <kbd class="ph userinput">inicial</kbd> no campo de pesquisa Ícone. * Selecione Contorno da página inicial. {#uib-tutorial__ul_gxl_w1x_g4b} 6. Adicione um manipulador de eventos para configurar qual ação se aplica ao botão. * Selecione a guia Eventos no painel de configuração. * Em Botão clicado, selecione + Adicionar um novo manipulador de eventos. * Em Manipuladores de eventos herdados, selecione Vincular ao destino. * Clique em Selecionar destino. * Na tela Selecionar destino, selecione URL externa. * Digite sua URL. Para este tutorial, digite <kbd class="ph userinput">https://www.servicenow.com</kbd> Selecione OK. * Selecione Adicionar. Para obter mais informações sobre manipuladores 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."). {#uib-tutorial__ul_crn_zxd_24b} 7. Selecione Salvar. É sempre uma boa ideia salvar sua página com frequência enquanto trabalha. 8. Selecionar Exibição. 9. Teste o botão que você criou nas etapas anteriores. {#uib-tutorial__ol_nvw_kwd_24b} |
   |-|-|

   {#uib-tutorial__choicetable_q1g_4fl_vnb}  
   Você adicionou e configurou o componente Cabeçalho e Botão para sua página.

6. Adicione um componente de visualização de dados ao contêiner.  
   Um componente de visualização de dados contém dados que você exibe de maneira visual. Configure os parâmetros do componente de visualização de dados. Em seguida, adicione um recurso de dados a ele.

   | Para executar esta tarefa | Faça o seguinte |
   | Adicionar e configurar um componente de visualização de dados ao contêiner da coluna à direita | Você pode adicionar componentes à página de maneiras diferentes. Para obter mais informações sobre como adicionar componentes à sua página, consulte [Tabela 1](https://servicenow-prod.fluidtopics.net/LMCt0RiXG4slkbM3HcNAXA#work-components__addcomponentstable). 1. Selecione o botão + no meio da coluna direita. 2. No campo Pesquisar, comece a digitar <kbd class="ph userinput">Visualização de dados</kbd> até ver o componente Visualização de dados e selecione o componente para adicioná-lo à sua página. 3. Selecione o nome do componente no painel de configuração para ver o rótulo e o ID do componente. Você pode alterá-los para o que quiser, desde que sejam exclusivos. 4. Adicione um recurso de dados ao seu componente de visualização de dados para trazer dados da conta do cliente. * Selecione o componente de visualização de dados e selecione a guia Configurar. * Selecione Adicionar fonte de dados. * Digite <kbd class="ph userinput">Tarefa [task]</kbd> no campo de pesquisa e procure uma tarefa que esteja disponível em sua instância Construtor de IU. * Selecione Adicionar esta fonte. {#uib-tutorial__ul_wrt_122_24b} 5. Selecione o menu suspenso Tipo de visualização de dados e selecione Dial. Você pode escolher uma variedade de tipos de visualização para melhor atender aos seus dados. 6. Selecione Cabeçalho e borda no painel de configuração. 7. Insira <kbd class="ph userinput">Minhas tarefas</kbd> no campo Título do gráfico. {#uib-tutorial__ol_k31_whl_vnb} |
   |-|-|

   {#uib-tutorial__choicetable_j31_whl_vnb}  
   Você adicionou um componente de visualização de dados à coluna direita e o configurou. Você também adicionou um recurso de dados para trazer dados da conta do cliente.
7. Salve a nova página uma última vez.

   | Para executar esta tarefa | Faça o seguinte |
   | Salvar sua página | 1. No canto direito de Construtor de IU, selecione Salvar. 2. Agora que você salvou sua página, pode acessá-la em sua experiência a qualquer momento. {#uib-tutorial__ol_nd1_c5m_vnb} |
   |-|-|

   {#uib-tutorial__choicetable_md1_c5m_vnb}
8. Agora visualize sua página para ver como ela aparece em um navegador.

   | Para executar esta tarefa | Faça o seguinte |
   | Visualizar sua página | 1. Selecione Visualizar no cabeçalho Construtor de IU. 2. Consulte o título na coluna esquerda da página. 3. Selecione o botão Página inicial. A página inicial ServiceNow® é aberta em outra guia do navegador. Feche a guia do navegador para voltar à página de visualização. 4. Veja a visualização de dados da conta do cliente na coluna direita da página.Figura 3. Visualizar sua página de tutorial {#uib-tutorial__ol_dyg_qg2_24b} |
   |-|-|

   {#uib-tutorial__choicetable_cyg_qg2_24b}  
   Parabéns! Você concluiu o tutorial Construtor de IU.

## Resultado

1. Página criada em Construtor de IU.
2. Mudou o layout da sua página para ter duas colunas.
3. Adicionou um componente de título como título à coluna esquerda.
   * O texto do título foi alterado.
   * O rótulo do título foi alterado.
   {#uib-tutorial__ul_osc_jcr_24b}
4. Adição de um componente de botão abaixo do componente de título.
   * Configurado seu botão.
   * Adicionado um manipulador de eventos para o botão.
   * Adição de um manipulador de eventos para configurar um link para uma página da Web. Quando você clica no botão, ele abre a página da Web.
   {#uib-tutorial__ul_hdx_kcr_24b}
5. O rótulo da coluna direita foi alterado.
6. Adição de um componente de visualização de dados.
   * Configurado o componente de visualização de dados.
   * Adição de um recurso de dados para trazer dados da tarefa.
   {#uib-tutorial__ul_twx_qcr_24b}
7. Sua nova página foi salva.
8. Visualizou sua página.
{#uib-tutorial__ol_pbw_tvm_vnb}