Criar um contador no Construtor de IU

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é Todos > Estrutura do Now Experience > Construtor 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 para obter mais informações sobre como criar experiências.
3. Criar uma página no Construtor de IU 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 sty.
   2. Selecione o componente de texto estilizado.

      

   3. No painel de configuração, selecione Nenhum - Configure o componente manualmente.

      

7. Adicione o segundo componente selecionando + Adicionar conteúdo na árvore de conteúdo na Coluna 2.
   1. Em Pesquisar, digite botão.
   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.

      

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 botão 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.

      

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 count.
    2. Altere o Tipo para Número.
    3. Defina o Valor inicial inserindo o número 0.
    4. Selecione o X para fechar a janela.

       

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.

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

        

    13. Selecione Aplicar.
    14. Selecione Adicionar.
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 1.
    13. Selecione Aplicar.
    14. Selecione Adicionar.
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.

    

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 APIdo botão.

Para obter informações técnicas detalhadas sobre o componente de texto estilizado, consulte Visão geraldo texto estilizado.