Atualize 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 seus 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 parâmetros de estado do clientee. scripts. Comece criando um parâmetro de estado do cliente e vinculando o parâmetro de estado do cliente a um dos componentes, como um rótulo. Em seguida, você cria um client script e vincula-o 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 seus 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 componente de botão e 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 IUpara 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 IUpá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 E Adicionar .
   
7. Insira um nome para o nome, tipo e valor inicial do estado do cliente.

   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 Cadeia de caracteres e 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 Configurar .
   3. Aponte para o campo ao qual você deseja vincular os 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 em Tipos de dados .
   5. Clique duas vezes no script do cliente 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 E ícone ao lado de Scripts do cliente .
       
    2. Insira um nome de script que descreva a tarefa.
       Por exemplo, você pode inserir Atualizar valor do rótulo porque é isso que você quer que o script faça.
    3. No Now Code Editor, 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 api.setState e incluem o. dynamic_label_value como o primeiro parâmetro, e a. NOVO VALOR como o segundo parâmetro.

       
11. Adicione um manipulador de eventos ao segundo componente para chamar o novo script de cliente que você criou.
    1. Selecione o componente na página ao qual você deseja vincular o script.
    2. Selecione a guia Eventos.
    3. Selecione - Adicione um novo manipulador de eventos .
    4. Na seção Scripts de manipuladores de eventos, selecione o script que você criou e selecione E 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 estejam conectados, selecione Visualização .
    Quando você seleciona um componente, ele deve mudar o estado do segundo componente. Por exemplo, selecione Botão componente para mudar o. Valor do rótulo texto do componente de Valor inicial para NOVO VALOR .

Resultado

O que você fez neste procedimento:

• Adicionados dois componentes à sua página.
• Um parâmetro de estado do cliente definido que tinha um valor inicial.
• Vincular o parâmetro de estado do cliente ao primeiro componente.
• Um client script que atualiza um valor que é definido pelo parâmetro de estado do cliente.
• Criou um manipulador de eventos para o segundo componente para chamar o novo script de cliente que você acabou de criar
• O segundo componente foi selecionado para que ele mudasse o estado do primeiro componente.