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


---

# Como definir e vincular client scripts aos componentes

# Como definir e vincular client scripts aos componentes {#ariaid-title1}

* Versão de lançamento: Xanadu
* 
* Atualizado 1 de ago. de 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 min. de leitura

Adicione e edite client scripts em Construtor de IU para que você possa atualizar o estado do cliente por meio de eventos. Você pode vincular esses scripts a qualquer componente usando um manipulador de eventos.

## Antes de Iniciar

Função necessária: ui_builder_admin

## Por Que e Quando Desempenhar Esta Tarefa

Você pode criar scripts de cliente JavaScript em Construtor de IU usando o editor do Now Code. Em seguida, você pode adicionar o client script como um [manipulador de eventos](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-event-handler-ui-builder "Uma ação realizada quando ocorre um evento.") para atualizar o estado do cliente, emitir um evento manipulado da sua página ou executar uma operação [de recurso de dados](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-data-resource-ui-builder "Uma maneira dinâmica e reutilizável de definir quais dados buscar para os componentes de uma página."). Por exemplo, você pode escrever um script para incrementar uma data ou um contador e vincular o script a um evento de componente, como um clique de botão. Para obter mais informações sobre o Now Code Editor, consulte [Editar código com o Now Code Editor (recurso avançado)](https://servicenow-prod.fluidtopics.net/_rhj0KrwrdivFBFEcoelJA "O Now Code Editor é um editor de rich text como interface que suporta folhas de estilos em cascata (CSS), Hypertext Markup Language (HTML), JavaScript, Extensible Markup Language (XML) e JavaScript Object Notation (JSON). Use o Editor de código Now para modificar a configuração de IU, configuração de recursos de dados, estilos, eventos, scripts do lado do cliente e do lado do servidor em Next Experience componentes do Construtor de IU.").

Com esses scripts, você pode realizar as seguintes ações:

* Obtenha dados disponíveis, manipule os dados e armazene-os no estado do cliente.
* Acessar resultados de recursos de dados.
* Execute operações de recursos de dados.
* Expedir eventos.
{#define-client-scripts__ul_vyt_2xg_d4b}

## 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.  
   Para obter mais informações, 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.").
3. Abra ou crie uma página.  
   Para obter mais informações sobre como criar uma página em Construtor de IU, consulte [Criação de uma página no Construtor de IU](https://servicenow-prod.fluidtopics.net/oXLwDAYTDqDRVYtO2ECqbg "Crie uma página em Construtor de IU para um portal, espaço ou aplicação personalizada para que você possa criar uma experiência na Web para seus usuários.").
4. **Opcional:** Se você não tiver nenhum componente em sua página, adicione um componente à sua página.  
   Por exemplo, você pode adicionar um componente de título. 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. Selecione + ao lado de Client scripts.  
6. Nomeie seu script.  
   Um nome descritivo ajuda a saber o que o script faz. Também torna mais fácil encontrar o script posteriormente quando você o adiciona a um manipulador de eventos. O exemplo a seguir mostra um client script de data simples.
7. Escreva seu script para executar uma ação.  
   Por exemplo, você pode escrever um script de data simples que vincula a um componente.
8. **Opcional:** Adicione uma Inclusão de script ou Componentes associados, que aparecem no parâmetro de `importações` da sua função de client script.
9. Selecione o componente na página ao qual você deseja vincular o script e selecione Eventos.
10. Selecione +Adicionar um novo manipulador de eventos, selecione o script que você criou em Scriptse clique em Adicionar.  
    O exemplo a seguir mostra um client script de data.
11. Selecione Salvar.
12. Para visualizar o componente com script, selecione ![o botão Visualizar que abre a variante de página.]().