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


---

# Criar um contador no Construtor de IU

# Criar um contador no 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) 3 min. de leitura

Crie um contador simples adicionando o componente de texto estilizado e dois botões a uma página de experiência. Use um parâmetro de estado do cliente para implementar a funcionalidade para que, quando os botões forem selecionados, a contagem aumente ou diminua.

## Antes de Iniciar

Função necessária: ui_builder_admin


## Procedimento

1. Navegar até TodosEstrutura do Now ExperienceConstrutor de IU.
2. Abra uma experiência para trabalhar ou crie uma experiência selecionando Criar \> Experiê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. [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.") ou abrir uma página.
4. Adicione um layout de coluna selecionando + Adicionar conteúdo na árvore de conteúdo em Corpo.
5. Na guia Layouts, selecione Duas colunas.
6. Adicione o primeiro componente selecionando + Adicionar conteúdo na árvore de conteúdo na Coluna 1.  
   1. Em Pesquisar, digite <kbd class="ph userinput">sty</kbd>.
   2. Selecione o componente de texto estilizado.  
   3. No painel de configuração, selecione Nenhum - Configure o componente manualmente.  
   {#create-simple-counter-component__substeps_ryf_bc3_x1c}
7. Adicione o segundo componente selecionando + Adicionar conteúdo na árvore de conteúdo na Coluna 2.
   1. Em Pesquisar, digite <kbd class="ph userinput">botão</kbd>.
   2. Botão de seleção icônico.  
   3. No painel de configuração, selecione Nenhum - Configure o componente manualmente.
   4. Em Ícone, selecione Preenchimento com seta quadrada para cima.  
   {#create-simple-counter-component__substeps_cxn_2c3_x1c}
8. Adicione o terceiro componente apontando para o Botão icônico 1 na árvore de conteúdo, selecionando o ícone Menu e selecionando Adicionar após.  
   1. Em Pesquisar, digite o <kbd class="ph userinput">botão</kbd> como você fez na etapa anterior.
   2. Selecione Botão icônico como você fez na etapa anterior.
   3. No painel de configuração, selecione Nenhum - Configure o componente manualmente como você fez na etapa anterior.
   4. Em Ícone, selecione um ícone diferente desta vez, o chamado Preenchimento com seta quadrada para baixo.  
   {#create-simple-counter-component__substeps_ebk_jc3_x1c}
9. Selecione Salvar.  
   O componente de texto estilizado e os componentes icônicos de dois botões são salvos e aparecem na fase.

10. Adicione um parâmetro de estado do cliente acessando Dados e scripts, apontando para Parâmetros de estado do clientee selecionando o ícone Adicionar novo (mais).
    1. Altere o Nome inserindo <kbd class="ph userinput">count</kbd>.
    2. Altere o Tipo para Número.
    3. Defina o Valor inicial inserindo o número <kbd class="ph userinput">0</kbd>.
    4. Selecione o X para fechar a janela.  
    {#create-simple-counter-component__substeps_o1t_qc3_x1c}
11. Vincule o componente de texto estilizado ao parâmetro de estado do cliente.
    1. Selecione o componente de texto estilizado na fase.
    2. No painel de configuração, aponte para o campo Texto e selecione o ícone Vincular dados ou usar scripts.  
    3. Na guia Tipos de dados, selecione Estados do cliente.
    4. Clique duas vezes na cápsula de contagem.
    5. Selecione Aplicar.  

       O campo Texto muda para count.
    {#create-simple-counter-component__substeps_akq_xc3_x1c}
12. Agora configure os botões para aumentar ou diminuir o número.
    1. Selecione o botão superior na fase.
    2. No painel de configuração, selecione a guia Eventos.
    3. Selecione + Adicionar manipulador de eventos.
    4. Em Manipuladores de eventos no nível da página, selecione Atualizar parâmetro de estado do cliente.
    5. Em Nome do parâmetro de estado do cliente, selecione contagem.
    6. Aponte para o campo Novo valor e selecione o ícone Vincular dados ou usar scripts.  
    7. Na guia Tipos de dados, selecione Estados do cliente.
    8. Clique duas vezes na cápsula de contagem.
    9. Selecione a guia Fórmulas.
    10. Na lista, selecione matemática.
    11. Clique duas vezes na cápsula ADD.
    12. Na cápsula à direita na parte superior, remova o texto e insira <kbd class="ph userinput">1</kbd>.  
    13. Selecione Aplicar.
    14. Selecione Adicionar.
    {#create-simple-counter-component__substeps_apn_bd3_x1c}
13. Agora configure o segundo botão seguindo o mesmo processo usado para o primeiro botão, mas selecione a cápsula SUB em vez da cápsula ADD.
    1. Selecione o botão inferior na fase.
    2. No painel de configuração, selecione a guia Eventos.
    3. Selecione + Adicionar manipulador de eventos.
    4. Em Manipuladores de eventos no nível da página, selecione Atualizar parâmetro de estado do cliente.
    5. Em Nome do parâmetro de estado do cliente, selecione contagem.
    6. Aponte para o campo Novo valor e selecione o ícone Vincular dados ou usar scripts.
    7. Na guia Tipos de dados, selecione Estados do cliente.
    8. Clique duas vezes na cápsula de contagem.
    9. Selecione a guia Fórmulas.
    10. Na lista, selecione matemática.
    11. Clique duas vezes na cápsula SUB.
    12. Na cápsula direita na parte superior, remova o texto e digite <kbd class="ph userinput">1</kbd>.
    13. Selecione Aplicar.
    14. Selecione Adicionar.
    {#create-simple-counter-component__substeps_g1s_kd3_x1c}
14. Teste o contador selecionando Visualizar.
15. Selecione o botão de seta para cima para aumentar a contagem e o botão de seta para baixo para diminuir a contagem.  
{#create-simple-counter-component__steps_dms_bg3_x1c}

## Resultado

Você adicionou um componente de botão para aumentar a contagem em um e outro componente de botão para diminuir a contagem em um. Você adicionou o componente de texto estilizado para mostrar a contagem conforme ela aumentava e diminuída.

Para obter informações técnicas detalhadas sobre o componente do botão, consulte [Visão geral e API](https://developer.servicenow.com/dev.do#!/reference/next-experience/washingtondc/now-components/now-button/overview)do botão.

Para obter informações técnicas detalhadas sobre o componente de texto estilizado, consulte [Visão geral](https://developer.servicenow.com/dev.do#!/reference/next-experience/washingtondc/now-components/now-stylized-text/overview)do texto estilizado.