Parâmetros de estado do cliente

Use parâmetros de estado do cliente para vincular valores a configurações de 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 do 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:

• Clicar em um botão
• Aplicando um filtro
• Classificando uma lista
• Atualizando uma lista
• Como fornecer resultados de pesquisa em linha
• Alertar 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.

Criar interações do lado do cliente em Construtor de IU envolve:

• 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 o gerenciamento de valores de configuração para componentes de página. Construtor de IU usa 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 local único para gerenciar um valor comum para a página. Sem o parâmetro de estado do cliente, 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, a alteração do 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 de uma página. Armazene a opção 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 seja alterado, 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 no botão + Adicionar 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.

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

Como trabalhar 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 alterar o valor de um parâmetro de estado do cliente é com manipuladores de eventos.

No exemplo de criação da página de parâmetros de estado do cliente, dois parâmetros de estado do cliente foram adicionados à aplicação de ocasiões especiais: ocasionaTypeQuery e ocasionaListTitle. O parâmetro ocasionaTypeQuery não tem valor por padrão e ocasionaListTitle tem o valor padrão All 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.

Vinculando parâmetros de estado do cliente

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

O caractere @ indica 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 do parâmetro de estado do cliente ocasionaTypeQuery. O valor padrão do parâmetro de estado do cliente ocasionaTypeQuery está vazio, portanto, nenhum filtro será aplicado por padrão.

O título do componente é definido de maneira semelhante: selecione o botão Vinculação de dados dinâmicos para o campo Título ou digite @ e selecione o parâmetro de estado do cliente state.ocaseListTitle na lista de seleção. O valor padrão do parâmetro de estado do cliente ocasionaListTitle é Todas as ocasiões 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.

Os valores dos parâmetros de estado do cliente ocasionaTypeQuery e ocasionaListTitle permanecem inalterados até que um usuário interaja com um componente que muda o valor do parâmetro de estado do cliente.

Alterar valores de parâmetro de estado do cliente

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

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

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

• Como usar parâmetros de estado do cliente 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.
• 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.