Usando parâmetros de estado do cliente em 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é Tudo > 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 IUpara obter mais informações sobre como criar experiências.
3. Crie uma página em Construtor de IU ou abra uma página.
4. Selecione um layout de coluna - Adicionar conteúdo na árvore de conteúdo em Corpo .
5. Em Layouts , selecione Duas colunas .
6. Selecione o primeiro componente - Adicionar conteúdo na árvore de conteúdo em Coluna 1 .

   

   1. Em Pesquisa , tipo sty .
   2. Selecione Texto estilizado componente.

      

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

      

7. Selecione o segundo componente - Adicionar conteúdo na árvore de conteúdo em Coluna 2 .
   1. Em Pesquisa , tipo botão .
   2. Selecione Botã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 Botão icônico 1 na árvore de conteúdo, selecionando Menu e selecionando Adicionar após .

   

   1. Em Pesquisa , tipo 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, aquele chamado Preenchimento com seta quadrada para baixo .

      

9. Selecione Save (Salvar).
   O componente de texto estilizado e os dois componentes icônicos do botão são salvos e aparecem no palco.

   

10. Adicione um parâmetro de estado do cliente acessando Dados e scripts , apontando para Parâmetros de estado do cliente e selecionando Adicionar novo (mais) ícone.
    1. Mude o. Nome inserindo contagem .
    2. Mude o. Tipo para Número .
    3. Defina o. Valor inicial inserindo o número 0 .
    4. Selecione 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 Texto e selecione Vincule dados ou use scripts ícone.

       

    3. Em Tipos de dados , selecione estados do cliente .
    4. Clique duas vezes em contagem pílula.
    5. Selecione Aplicar.

       

       . Texto o campo muda para contagem .

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 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 Novo valor e selecione Vincule dados ou use scripts ícone.

       

    7. Em Tipos de dados , selecione estados do cliente .
    8. Clique duas vezes em contagem pílula.
    9. Selecione Fórmulas .
    10. Na lista, selecione Matemática .
    11. Clique duas vezes em ADICIONAR pílula.
    12. Em certo 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 que você usou para o primeiro botão, mas selecione a SUBCÁPSULA em vez da pílula DE ADIÇÃO.
    1. Selecione o botão inferior na fase.
    2. No painel de configuração, selecione 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 Novo valor e selecione Vincule dados ou use scripts ícone.
    7. Em Tipos de dados , selecione estados do cliente .
    8. Clique duas vezes em contagem pílula.
    9. Selecione Fórmulas .
    10. Na lista, selecione Matemática .
    11. Clique duas vezes em SUB pílula.
    12. Em certo na parte superior, remova o texto e digite 1 .
    13. Selecione Aplicar.
    14. Selecione Adicionar.
14. Teste o contador selecionando Visualização .
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 à medida que aumentava e diminuía.

Para obter informações técnicas detalhadas sobre o componente Botão, consulte API e visão geral do botão .

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