Parâmetros de estado do cliente

Use parâmetros de estado do cliente para vincular valores às configurações do componente. Quando o valor do parâmetro de estado do cliente muda, o componente é atualizado para usar o novo valor.

O que é uma interação do lado do cliente

Em aplicações baseadas na web, tudo o que acontece no navegador é do lado do cliente. As interações no lado do cliente ocorrem quando os usuários interagem com os componentes de experiência clicando em. Exemplos de interações do lado do cliente incluem:

• Clicando em um botão
• Aplicando um filtro
• Classificando uma lista
• Atualizando uma lista
• Fornecendo resultados de pesquisa em linha
• Alertando um usuário sobre dados incompletos ou incorretos

Às vezes, os usuários interagem com as páginas para navegar para outras páginas. Em outros casos, os usuários desejam fazer atualizações no conteúdo, na aparência ou nos dados de uma página. Em vez de atualizar a página inteira, as interações do lado do cliente atualizam somente as partes afetadas de uma página.

Por exemplo, um usuário pode classificar uma lista clicando em um cabeçalho de coluna. A classificação redesenha somente a lista e não a página inteira.

Criando interações do lado do cliente em Construtor de IUenvolve:

• Parâmetros de estado do cliente
• Eventos
• Scripts de cliente

O que são parâmetros de estado do cliente

Os parâmetros de estado do cliente são variáveis de página. Defina e configure um parâmetro de estado do cliente e use o valor para configurar componentes. Os parâmetros de estado do cliente centralizam a gestão de valores de configuração para componentes da página. Construtor de IUusa parâmetros de estado do cliente para aprimorar a experiência do usuário e fornecer conteúdo e serviços personalizados.

Exemplo de parâmetros de estado do cliente

No exemplo, uma página tem um parâmetro de estado do cliente chamado cor. Dois dos três componentes estão configurados para usar o parâmetro de estado do cliente de cor. Se a cor estiver definida como laranja, os componentes serão laranja. Se a cor estiver definida como roxo, os componentes serão roxos. Se a cor estiver definida como verde, os componentes serão verdes. O parâmetro de estado do cliente é um único local para gerenciar um valor comum para a página. Sem o parâmetro client state, cada componente que usa um valor precisaria ser atualizado individualmente se esse valor fosse alterado.

Por exemplo, uma experiência na web armazena a cor primária usada pelos componentes no parâmetro de estado do cliente de cor. Quando os componentes são configurados para usar o parâmetro de estado do cliente, mudar o valor do parâmetro de estado do cliente atualiza os componentes para o novo valor.

Botões podem ser adicionados à experiência para permitir que os usuários selecionem uma cor para os componentes da página. Com um único clique, um usuário pode mudar simultaneamente a cor de todos os componentes em uma página. Armazene a escolha de cor do usuário em um parâmetro de estado do cliente e use o parâmetro de estado do cliente para configurar os componentes da página. Quando uma interação do usuário faz com que o valor do parâmetro de estado do cliente mude, os componentes da página são atualizados em tempo real.

O painel de estado do cliente

O painel de estado do cliente é recolhido por padrão. Clique no ícone de estado do cliente na barra de navegação esquerda para abrir o painel de estado do cliente.

O painel de estado do cliente contém duas seções:

• Parâmetros de estado do cliente: Os parâmetros de estado do cliente para a página
• Visualização do estado do cliente: O JSON dos parâmetros de estado do cliente da página

Criando parâmetros de estado do cliente

Para adicionar um parâmetro de estado do cliente a uma página, clique em E Adicionar botão na seção de parâmetros de estado do cliente.

Os parâmetros de estado do cliente têm três campos de configuração.

• Nome: O nome do parâmetro. Os nomes não devem incluir espaços
• Tipo: O tipo do parâmetro
  • Cadeia de caracteres
  • Número
  • Booliano
  • JSON
• Valor inicial: O valor padrão do parâmetro

No exemplo, o painel de estado do cliente tem dois parâmetros de estado do cliente.

• OccasionTypeQuery é uma cadeia de caracteres sem valor padrão
• OccasionListTitle é uma cadeia de caracteres com um valor padrão de Todas as ocasiões especiais

Trabalhando com parâmetros de estado do cliente

Depois de ter um parâmetro de estado do cliente, o que você pode fazer com ele? Para trabalhar com parâmetros de estado do cliente, primeiro vincule o valor do parâmetro de estado do cliente às configurações do componente. Quando o valor do parâmetro de estado do cliente muda, o componente é atualizado para usar o novo valor. Uma maneira de mudar o valor de um parâmetro de estado do cliente é com manipuladores de eventos.

No exemplo da página Criar parâmetros de estado do cliente, dois parâmetros de estado do cliente foram adicionados à aplicação de ocasiões especiais: OccasionTypeQuery e. OccasionListTitle . . OccasionTypeQuery o parâmetro não tem valor por padrão e. OccasionListTitle tem o valor padrão Todas as ocasiões especiais . Esses parâmetros de estado do cliente serão aplicados ao componente Lista de ocasiões para definir o título e o filtro da lista. Um botão será usado para atualizar os valores desses parâmetros de estado do cliente para atualizar dinamicamente a lista.

Parâmetros de estado do cliente de vinculação

Os valores do parâmetro de estado do cliente podem ser vinculados aos campos de configuração do componente da mesma forma que o contexto da página, a carga e os recursos de dados. Ao configurar componentes, passe o mouse sobre um campo e selecione Vinculação dinâmica de dados botão ( ) para vincular um parâmetro de estado do cliente ao valor do campo. No exemplo, o. Vinculação dinâmica de dados O botão está realçado para o campo de filtro do componente Lista de ocasiões.

O caractere a indica a vinculação de dados e o objeto de estado contém os parâmetros de estado do cliente. Selecione um parâmetro de estado do cliente na lista de seleção. O exemplo mostra a seleção de OccasionTypeQuery parâmetro de estado do cliente. O valor padrão para OccasionTypeQuery o parâmetro de estado do cliente está vazio, portanto, nenhum filtro será aplicado por padrão.

O título do componente é definido de maneira semelhante: Selecione Vinculação dinâmica de dados Para o campo Título ou digite em e selecione status.occasionListTitle parâmetro de estado do cliente da lista de seleção. O valor padrão para OccasionListTitle o parâmetro de estado do cliente é Todas as ocorrências especiais . O exemplo mostra Título e Filtro configurados para usar parâmetros de estado do cliente.

Com ambos os parâmetros de estado do cliente aplicados, nenhum filtro é aplicado à lista e o título é Todas as ocasiões especiais .

. OccasionTypeQuery e. OccasionListTitle os valores do parâmetro de estado do cliente permanecem inalterados até que um usuário interaja com um componente que mude o valor do parâmetro de estado do cliente.

Altere os valores do parâmetro de estado do cliente

. Atualizar parâmetro de estado do cliente manipulador de eventos para mudar o valor de um parâmetro de estado do cliente no tempo de execução. . Atualizar parâmetro de estado do cliente o manipulador de eventos tem duas propriedades: parâmetro de estado do cliente a ser atualizado e o novo valor a ser usado para o parâmetro de estado do cliente.

Como exemplo, um Aniversários o botão é adicionado acima de Lista de ocasiões componente no Ocasiões especiais aplicação. O objetivo deste botão é mudar o. Título da lista para Todos os aniversários e para ajustar o filtro da lista para mostrar somente aniversários. Para atingir esse objetivo, dois manipuladores de eventos são mapeados para Botão clicado evento para o botão, um para mudar o. OccasionTypeQuery parâmetro de estado do cliente e outro para mudar o. OccasionListTitle parâmetro de estado do cliente. A imagem mostra o. Atualizar parâmetro de estado do cliente manipulador de eventos configurado para definir o. OccasionTypeQuery parâmetro de estado do cliente para especial_occasion: aniversário , que filtrará a lista para mostrar somente aniversários.

Quando Botão clicado o evento é mapeado para manipuladores de eventos para atualizar ambos OccasionTypeQuery e. OccasionListTitle parâmetros de estado do cliente, clicar no botão atualiza os parâmetros de estado do cliente, que atualiza automaticamente o. Lista de ocasiões componente com os novos valores.

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