Como definir e vincular client scripts aos componentes

  • Versão de lançamento: Yokohama
  • Atualizado 30 de jan. de 2025
  • 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 para atualizar o estado do cliente, emitir um evento manipulado da sua página ou executar uma operação de recurso de dados. 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).

    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.

    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.
    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.
    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.
    5. Selecione + ao lado de Client scripts.
      Seta apontando para o botão de client scripts na barra lateral.
    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. Script de exemplo de um client script.
    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.

      Scripts listados na tela Adicionar manipulador de eventos.
    11. Selecione Save (Salvar).
    12. Para visualizar o componente com script, selecione o botão Visualizar que abre a variante de página..