Atualizar o estado de um componente usando parâmetros de estado do cliente

Crie e vincule um valor de parâmetro de estado do cliente a um componente em Construtor de IU. Ao adicionar valores personalizados aos componentes, esses componentes podem ser atualizados automaticamente por meio de um script.

Antes de Iniciar

Função necessária: ui_builder_admin

Por Que e Quando Desempenhar Esta Tarefa

Você pode adicionar dois componentes a uma página e conectá-los usando scripts e parâmetros de estado do cliente. Comece criando um parâmetro de estado do cliente e vinculando-o a um dos componentes, como um rótulo. Em seguida, você cria um client script e o vincula a um segundo componente, como um botão, usando um manipulador de eventos. Ao criar o manipulador de eventos, vincule o valor do parâmetro de estado do cliente a ele para conectar os dois componentes. Se você clicar em um componente, ele mudará o estado do outro componente. Os estados do cliente são úteis porque você pode adicionar valores personalizados aos componentes que podem ser atualizados automaticamente por meio de um script. Pense em um estado do cliente como um bucket para armazenar informações específicas da página.

Por exemplo, você pode adicionar um botão e um componente de rótulo à sua página. O botão muda o valor do rótulo, como mudar a cor do texto.

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 IU para obter mais informações sobre como criar experiências.
3. Crie ou abra uma página.
   Para obter mais informações, consulte Gerenciar Construtor de IU páginas e variantes de página.
4. Adicione dois componentes à sua página.
   Para obter mais informações, consulte Adicionar e configurar componentes.
5. Para definir um parâmetro de estado do cliente com um valor associado, selecione Parâmetros de estado do cliente no painel inferior esquerdo.
   
6. Selecione + Adicionar.
   
7. Insira um nome para o nome do estado do cliente, tipo e valor inicial.

   O estado do cliente é compatível com cadeias de caracteres, números, booliano e JSON. Por exemplo, você pode inserir o nome como dynamic_label_value, o tipo como Stringe o valor inicial como Valor Inicial.

   
8. Vincule o valor do parâmetro de estado do cliente ao seu componente.
   1. Selecione o componente ao qual você deseja vincular o parâmetro de estado do cliente.
   2. Abra o painel de configuração e selecione a guia Configurar.
   3. Aponte para o campo ao qual você deseja vincular dados e selecione o ícone de vinculação de dados dinâmicos ( ).
      
      O modal de vinculação de dados é exibido.

      

   4. Selecione Estados do cliente na guia Tipos de dados.
   5. Clique duas vezes no client script que você deseja vincular ao componente.
      
   6. Selecione Aplicar.
      
9. Selecione Save (Salvar).
10. Vincule o valor de estado do cliente a um componente e crie um script para conectar o segundo componente ao primeiro.
    1. No painel esquerdo, selecione o ícone + ao lado de Client scripts.
       
    2. Insira um nome de script que descreva a tarefa.
       Por exemplo, você pode inserir Atualizar valor do rótulo porque é isso que você deseja que o script faça.
    3. No Editor de código do Now, adicione seu script.

       Digamos que você escolha uma API para chamar e os parâmetros da API, como um estado e um valor. Por exemplo, você pode chamar o api.setStatee incluir o dynamic_label_value como o primeiro parâmetro e um NOVO VALOR como o segundo parâmetro.

       
11. Adicione um manipulador de eventos ao segundo componente para chamar o novo client script que você criou.
    1. Selecione o componente na página ao qual você deseja vincular o script.
    2. Selecione a guia Eventos.
    3. Selecione + Adicionar um novo manipulador de eventos.
    4. Na seção Scripts dos manipuladores de eventos, selecione o script que você criou e selecione + para adicioná-lo como um manipulador de eventos para o componente.
       
12. Selecione Save (Salvar).
13. Para visualizar sua página e testar os componentes para garantir que eles estejam conectados, selecione Visualizar.
    Quando você seleciona um componente, ele deve mudar o estado do segundo componente. Por exemplo, selecione o componente Botão para alterar o texto do componente de valor do Rótulode Valor Inicial para NOVO VALOR.

Resultado

O que você fez neste procedimento:

• Dois componentes adicionados à sua página.
• Definiu um parâmetro de estado do cliente que tinha um valor inicial.
• Vincule o parâmetro de estado do cliente ao primeiro componente.
• Criou um client script que atualiza um valor definido pelo parâmetro de estado do cliente.
• Criou um manipulador de eventos para o segundo componente a fim de chamar o novo client script que você acabou de criar
• Selecionou o segundo componente para que ele mudasse o estado do primeiro componente.