Gérer les actions dans les pages UI Builder (fonctionnalité avancée)

  • Rversion finale: Washingtondc
  • Mis à jour 1 févr. 2024
  • 9 minutes de lecture

    • Découvrez comment utiliser des événements afin d’ajouter des actions aux composants, aux pages, aux ressources de données et aux actions déclaratives dans Générateur d'IU.

    Actions dans Générateur d'IU

    Les actions d’interface utilisateur indiquent Générateur d'IU ce qu’il faut faire lorsqu’un événement est déclenché. Un événement est une action effectuée par un utilisateur ou une occurrence qui se produit sur une page. Utilisez les actions d’interface utilisateur pour créer des interfaces interactives et conviviales qui aident vos utilisateurs à accomplir des tâches. Chaque composant a ses propres événements qui lui sont associés. Les événements incluent :

    • L’utilisateur clique sur une visualisation de données
    • La page récupère les données avec succès
    • L’utilisateur sélectionne une case d’option
    • Chargements de page

    Types d’événements qui peuvent déclencher des actions.

    Événements dans Générateur d'IU

    Utilisez un événement pour ajouter des actions à vos composants, pages et ressources de données.

    • Un événement de composant est une action que vous configurez pour un composant. Vous configurez un gestionnaire d’événements pour configurer cette action de composant. Par exemple, vous pouvez ajouter un composant de bouton à votre Générateur d'IU page. Ensuite, vous pouvez ajouter un gestionnaire d’événements pour appliquer une action à ce bouton, comme accéder à une page Web.
    • Les événements de page effectuent des actions pour l’ensemble de la page. Vous pouvez configurer les événements de page suivants :
      • Mappages d’événements de page. Ajouter, supprimer ou effacer les notifications d’alerte sur votre page.
      • Mappages des variantes d’événements. Ajouter, supprimer ou effacer les notifications d’alerte sur votre variante de page.
      • Événements expédiés. Créez des événements répartis pour que votre page crée des mappages d’événements relayés qui modélisent les événements après un gestionnaire d’événements parent. Sélectionnez un gestionnaire d’événements parent cible pour modéliser les champs de charge utile après celui-ci.
      • Événements traités. Un événement traité est un événement qui est exposé et disponible pour être utilisé par d’autres utilisateurs. Une fois que vous avez créé un événement géré, il est disponible sous et peut être utilisé par Page event mappings d’autres utilisateurs. Vous pouvez également configurer des champs de charge utile que vous créez manuellement ou choisir un modèle pour votre événement géré, par exemple ouvrir ou fermer une boîte de dialogue modale.
    • Les événements relatifs aux ressources de données mappent les ressources de données pour notifier les informations sur le moment où les données sont extraites.
    • Les événements d’une page ou d’un composant ne font rien tant que l’événement n’est pas mappé à un ou plusieurs gestionnaires d’événements.

    Progression des événements pour différents types d’événements.

    Mappage d’événements dans Générateur d'IU

    Mappez les actions aux événements, par exemple cliquer sur un bouton ou remplir un champ. Un mappage d’événements est le processus qui vous permet de mapper la charge utile ou les valeurs contextuelles d’un événement à l’objet ou au gestionnaire qui agit sur cet événement.

    Pour en savoir plus sur le mappage d’événements, reportez-vous à Définir des événements de carte.

    Gestionnaires d’événements dans Générateur d'IU

    Un gestionnaire d’événements est une action effectuée lorsqu’un événement se produit. En mappant un gestionnaire d’événements à un événement, vous spécifiez l’action ou les actions à effectuer lorsque l’événement se produit. Utilisez un gestionnaire d’événements pour configurer une action pour votre Générateur d'IU page ou les composants de la page. Par exemple :
    • Cliquer sur une visualisation de données ouvre la liste des enregistrements représentés dans la visualisation
    • L’extraction réussie des données d’une liste ouvre une alerte indiquant que la récupération des données a réussi
    • La sélection d’une case d’option ajuste le filtre d’une liste sur la page
    • Le chargement d’une page ouvre une fenêtre modale pour confirmer l’acceptation des cookies avant de poursuivre

    Lorsque vous ajoutez un gestionnaire d’événements à une page ou à un Générateur d'IU composant, vous pouvez choisir différents types de gestionnaires d’événements. Par exemple, un composant de bouton peut avoir les types de gestionnaires d’événements suivants :

    • Gestionnaires d’événements hérités. Un gestionnaire d’événements hérité est exposé à partir de la page sur laquelle vous travaillez. Si vous êtes sur la page parente Générateur d'IU , un gestionnaire d’événements hérité peut être exposé à partir de l’interpréteur de commandes d’application. Le tableau suivant répertorie les différents types de gestionnaires d’événements hérités que vous pouvez utiliser et ce que vous pouvez en faire.
      Tableau 1. Gestionnaires d'événements hérités
      Gestionnaire d'événements Description
      URL du fil d’Ariane modifiée
      Lien vers destination Naviguez jusqu’à une destination.
      • Itinéraires de l’application : lien vers une autre page d’une application, comme un écran d’accueil.
      • URL externe : lien vers un site Web ou toute autre URL externe.
      Exemple de script
          return {
        route: null, /* Page route, e.g. 'record' */
        fields: null, /* Required params, e.g. {"table":"incident","sysId":"X"} */
        params: null, /* Optional params, e.g. {"selectedIndex" : 1} */
        ☑️redirect: null, /* ??? True/false? */
        ☑️passiveNavigation: null, /* Load in background, e.g. 'false' */
        title: null, 
        multiInstField: null, 
        ☑️targetRoute: null, /* ??? */
        ☑️external: null /* ??? True/false? */
    };
      Ajouter des paramètres à l'URL Ajoutez des paramètres supplémentaires à une URL.
      Exemple de script
      { “selectedTabIndex” : 0 }
      Ouvrir ou fermer la boîte de dialogue modale Après avoir créé un modal, utilisez-le Open or close modal dialog pour déclencher le modal.
    • Gestionnaires d’événements au niveau de la page. Ce type de gestionnaire d’événements est commun à toutes les pages, et vous pouvez utiliser ce type de gestionnaire lorsque vous souhaitez ajouter ou supprimer des notifications d’alerte au niveau de la page. Le tableau suivant répertorie les différents types de gestionnaires d’événements au niveau de la page que vous pouvez utiliser et ce que vous pouvez faire avec.
      Tableau 2. Gestionnaires d'événements au niveau de la page
      Gestionnaire d'événements Description
      Ajouter des notifications d'alerte Ajoutez un extrait de code pour envoyer une notification d’alerte. Par exemple : 
      return {
    items: [{"type" : "info", "message" : "Info message", "id" : "optionalID"}] /* Types: info, warning, error */
};
      Supprimer la notification d’alerte Ajoutez un code pour appeler les ID de notification d’alerte que vous souhaitez ignorer. Par exemple, cliquez sur un bouton pour supprimer une notification d’alerte de chargement de page.
      Effacer la notification d’alerte Ajoutez un code pour appeler tous les ID de notification d’alerte que vous souhaitez ignorer. Par exemple, cliquez sur un bouton pour supprimer toutes les notifications d’alerte.
      Définir l'état de chargement Activez ou désactivez le chargement. Par exemple, vous pouvez activer le chargement pour charger la page lorsque vous cliquez sur un bouton ou désactiver le chargement pour ne pas charger la page lorsque vous cliquez sur un bouton.
      Mettre à jour le paramètre de l'état du client Définissez de manière déclarative le paramètre de l’état du client. Supposons que vous ayez un paramètre d’état client que vous configurez avec une valeur. Vous pouvez configurer le gestionnaire d’événements Update client state parameter pour mettre à jour le paramètre d’état du client avec une nouvelle valeur. Par exemple, vous avez un paramètre d’état du client appelé Message d’accueil qui est configuré avec Bonjour comme valeur initiale. Vous pouvez ajouter un gestionnaire d’événements Update client state parameter , sélectionner le paramètre d’état du client Message d’accueil , puis entrer une nouvelle valeur comme Au revoir. Lorsque vous cliquez sur le bouton, Goodbye remplace Hello sur la page.
      Chargement de la fenêtre du macroponent UXF demandé
    • Gestionnaires des ressources de données. Ce type de gestionnaire d’événements déclenche la récupération ou l’écriture de données sur le serveur.
      Vous pouvez actualiser les données de la source de données de l’interpréteur de commandes d’application sur votre Générateur d'IU page en cliquant sur un bouton. Par exemple, avec un gestionnaire de ressources de données, vous pouvez effectuer les actions suivantes :
      • Lier les données à la description d’un enregistrement d’incident.
      • Modifiez la valeur de la description de l’incident.
      • Ajoutez un composant de bouton à votre page.
      • Étiquetez le bouton Actualiser l’incident.
      • Ajoutez un Look Up Record gestionnaire d’événements pour le bouton.
      • Enregistrez votre page.
      • Si la description de l’enregistrement d’incident change, cliquez sur Actualiser pour mettre à jour la description sur votre page.
    • Scripts clients. Scripts qui s’exécutent lorsqu’un événement est déclenché sur un composant. Vous créez ces scripts dans la section Scripts clients de .Générateur d'IU Pour plus d'informations, consultez Définir des scripts clients et les lier aux composants.

    Liaison d’événements à des composants dans Générateur d'IU

    lier les gestionnaires d’événements aux événements d’un composant. Lorsque vous ajoutez des composants à votre Générateur d'IU page, ces composants ne sont pas configurés pour effectuer une action sur votre page. Par exemple, un composant de bouton est statique et ne fait rien tant que vous ne lui avez pas lié une action d’événement, telle que la suppression d’un enregistrement. Certains composants ont plusieurs événements dans lesquels des gestionnaires d’événements peuvent être affectés. Par exemple, dans le composant de liste, vous pouvez affecter un gestionnaire de navigation à l’événement Row clicked . Vous pouvez également affecter une fenêtre modale ouverte à l’événement Data fetch failed . Pour plus d'informations, consultez Lier un événement à un composant.

    Liaison d’événements à des pages UI Builder

    Liez un événement au niveau de la page pour exécuter des gestionnaires d’événements sur la page. Par exemple, utilisez des événements au niveau de la page pour les notifications de page, le chargement de la page ou lorsqu’une propriété de page change. L’affectation du gestionnaire d’événements à l’événement au niveau de la page est similaire à l’affectation de gestionnaires à des événements à partir de composants.

    Vous pouvez lier des mappages d’événements à l’aide des méthodes suivantes :
    • Mappages d’événements de page. Ajouter, supprimer ou effacer les notifications d’alerte sur votre page.
    • Mappages des variantes d’événements. Ajouter, supprimer ou effacer les notifications d’alerte sur votre variante de page.
    • Événements expédiés. Créez des événements répartis pour que votre page crée des mappages d’événements relayés qui modélisent les événements après un gestionnaire d’événements parent. Sélectionnez un gestionnaire d’événements parent cible pour modéliser les champs de charge utile après celui-ci.
    • Événements traités. Ajoutez un événement géré pour un événement exposé et disponible pour être utilisé par d’autres utilisateurs.
    Pour plus d'informations, consultez Lier un événement à une page.

    Lier des événements aux ressources de données dans Générateur d'IU

    Liez les gestionnaires d’événements aux ressources de données individuelles de votre Générateur d'IU page. Par exemple, lorsqu’une ressource de données récupère avec succès de nouvelles données, elle exécute un gestionnaire d’événements, tel qu’une navigation, pour faire passer un utilisateur à l’étape suivante dans un flux. Lorsqu’une ressource de données ajoute avec succès un enregistrement à une table, elle affiche un modal de réussite qui utilise le gestionnaire d’événements show modal. Pour plus d'informations, consultez Lier un événement à une ressource de données.

    Lier des événements à des actions déclaratives dans Générateur d'IU

    Lier des éléments de données pour ajouter des actions d’événement à une définition d’action déclarative dans Actions et composants de la section Now Platform®. Par exemple, vous pouvez lier un élément de données pour ajouter une action d’événement afin de terminer le travail sur une table.

    Si vous ajoutez un composant à votre Générateur d'IU page qui a une action déclarative, vous devez le lier à un événement géré. L’événement traité crée une action exécutée lorsqu’un utilisateur sélectionne le composant. En sélectionnant Configurer le mappage d’événements d’action déclarative, vous ajoutez un nouveau gestionnaire d’événements pour définir ce que l’action déclarative fait sur la page. Configurez l’option de mappage des événements d’action déclarative dans le panneau de configuration.

    Pour plus d'informations, consultez Lier un événement à une action déclarative.