---
sourceDocument: Criar ou modificar aplicações do Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/xanadu/application-development
Release :
- xanadu
ft:locale :
- pt-BR
ft:publication_title :
- Criar ou modificar aplicações do Xanadu
ft:clusterId :
- cadev
bundleId :
- cadev
workflow :
- Creator
---
# Criar e vincular um parâmetro de estado do cliente a um componente (recurso avançado)
# Criar e vincular um parâmetro de estado do cliente a um componente (recurso avançado) {#ariaid-title1}
* Versão de lançamento: Xanadu
*
* Atualizado 1 de ago. de 2024
*
*  3 min. de leitura
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](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-client-script-ui-builder "JavaScript do lado do cliente que interage com componentes e parâmetros de estado do cliente em uma página. Os client scripts são mapeados para eventos como manipuladores de eventos no Construtor de IU.") e [parâmetros de estado do cliente](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-client-state-parameter-ui-builder "Variáveis de página que são definidas para uma página para armazenar uma parte dos dados (um estado do cliente) somente para essa página. Por exemplo, crie três parâmetros de estado do cliente para armazenar a entrada necessária para criar um registro e especifique quando atualizar a lista. As variáveis de página podem ser atualizadas usando client scripts e eventos para tornar uma página dinâmica."). 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é TodosEstrutura do Now ExperienceConstrutor de IU.
2. Abra uma experiência para trabalhar ou crie uma experiência selecionando CriarExperiência.
Consulte [Configure como os usuários interagem com suas aplicações no Construtor de IU](https://servicenow-prod.fluidtopics.net/lLqYhwc21ggWGJvxakpXWA "Saiba o que é uma experiência em Construtor de IU. Entenda o que uma experiência contém.") 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](https://servicenow-prod.fluidtopics.net/DPjKZHSFSIvEPq~A~sv0iQ "Saiba o que é uma página em Construtor de IU. Entenda os blocos de construção de uma página Construtor de IU, como layouts de coluna e componentes.").
4. Adicione dois componentes à sua página.
Para obter mais informações, consulte [Adicionar e configurar componentes](https://servicenow-prod.fluidtopics.net/Aqc1bei9skOZ0arABedMFw#add-components "Saiba como adicionar componentes à sua página em Construtor de IU. Uma página é criada adicionando 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 (í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.
{#state-parameters__substeps_dvq_rh2_cqb}
9. Selecione 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.
{#state-parameters__substeps_w4m_nq3_d4b}
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 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ótulo de 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.
{#state-parameters__ul_njc_2q3_d4b}