Définir des scripts clients et les lier aux composants

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 2 minutes de lecture
  • Ajoutez et modifiez des scripts clients afin de pouvoir mettre à jour l’état du client par le biais d’événements Générateur d'IU . Vous pouvez lier ces scripts à n’importe quel composant à l’aide d’un gestionnaire d’événements.

    Avant de commencer

    Rôle requis : ui_builder_admin

    Pourquoi et quand exécuter cette tâche

    Vous pouvez créer des scripts clients JavaScript à Générateur d'IU l’aide de l’éditeur de code Now. Ensuite, vous pouvez ajouter le script client en tant que gestionnaire d’événements pour mettre à jour l’état du client, émettre un événement géré de votre page ou exécuter une opération de ressource de données . Par exemple, vous pouvez écrire un script pour incrémenter une date ou un compteur, et lier le script à un événement de composant, comme un clic sur un bouton. Pour plus d’informations sur l’éditeur de code Now, reportez-vous à la section Modifier le code avec l’éditeur de code Now (fonctionnalité avancée).

    Avec ces scripts, vous pouvez effectuer les actions suivantes :

    • Obtenez les données disponibles, manipulez-les et stockez-les dans l’état client.
    • Accédez aux résultats des ressources de données.
    • Exécuter des opérations de ressource de données.
    • Répartir des événements.

    Procédure

    1. Accédez à la Tout > Cadre de travail Now Experience > Générateur d'IU.
    2. Ouvrez une expérience dans laquelle travailler ou créez une expérience en sélectionnant Créer > Expérience.
    3. Ouvrez ou créez une page.
      Pour plus d’informations sur la création d’une page dans Générateur d'IU, voir Créer une page dans le générateur d’IU.
    4. Facultatif : Si vous n’avez pas de composants sur votre page, ajoutez un composant à votre page.
      Par exemple, vous pouvez ajouter un composant En-tête. Pour plus d'informations, consultez Ajouter et configurer des composants.
    5. Sélectionnez + en regard de Scripts clients.
      Flèche pointant vers le bouton de scripts clients dans la barre latérale.
    6. Nommez votre script.

      Un nom descriptif vous aide à savoir ce que fait le script. Il est également plus facile de retrouver le script ultérieurement lorsque vous l’ajoutez à un gestionnaire d’événements. L’exemple suivant montre un script client date simple.

    7. Écrivez votre script pour effectuer une action.
      Par exemple, vous pouvez écrire un script de date simple que vous liez à un composant. Exemple de script d’un script client.
    8. Facultatif : Ajoutez un include de script ou des composants associés, qui s’affichent dans le paramètre imports de votre fonction de script client.
    9. Sélectionnez le composant de votre page auquel vous souhaitez lier le script, puis sélectionnez Événements.
    10. Sélectionnez +Ajouter un nouveau gestionnaire d’événements, sélectionnez le script que vous avez créé sous Scripts, puis sélectionnez Ajouter.

      L’exemple suivant montre un script client date.

      Scripts répertoriés dans l’écran Ajouter un gestionnaire d’événements.
    11. Sélectionnez Enregistrer.
    12. Pour prévisualiser votre composant scripté, sélectionnez le bouton Aperçu qui ouvre la variante de page.