Créer et personnaliser des messages d’alerte dans Générateur d'IU

  • Rversion finale: Zurich
  • Mis à jour 24 nov. 2025
  • 6 minutes de lecture

    • Découvrez comment les messages d’alerte vous aident à communiquer des commentaires et des mises à jour de statut à l’aide d’approches par défaut et scriptées.

    Les alertes sont des composants qui affichent des notifications standardisées, telles que des commentaires, des avertissements et des confirmations. Ils sont faciles à configurer sans script, mais vous pouvez ajouter un script pour des fonctionnalités plus avancées.

    Figure 1. Types de messages d’alerte
    Une série de différents types d’alertes.

    Générateur d'IU prend en charge plusieurs types de messages d’alerte. Pour voir comment chacun se comporte, ouvrez la documentation du composant Alerte et essayez différents paramètres dans l’aperçu interactif.

    Créer des messages d’alerte dans Générateur d'IU

    Ajoutez et configurez des messages d’alerte pour des notifications simples sans script.

    Avant de commencer

    Rôle requis : ui_builder_admin

    Pourquoi et quand exécuter cette tâche

    Utilisez la configuration de message d’alerte par défaut pour les notifications simples. Dans cet exemple, l’alerte affiche un message d’accueil personnalisé utilisant le nom complet de l’utilisateur connecté.

    Figure 2. Aperçu final de la mise en page
    Alerte apparaissant sous le menu d’en-tête, saluant l’utilisateur connecté, avec un surlignage sur le composant.
    1. Alerte : affiche le message de bienvenue.
    Cette procédure utilise Générateur d'IU des composants pour créer des mises en page dynamiques et interactives. Pour en savoir plus sur la configuration des composants, consultez :
    Tableau 1. Composants utilisés dans cette procédure
    Composant Liens vers la documentation
    Alerte

    Procédure

    1. Accédez à la Tout > Cadre de travail Now Experience > Générateur d'IU.
    2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant Créer > Expérience.
      Consultez la rubrique Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour plus d’informations sur la création d’expériences.
    3. Créer une page à partir de zéro.
      Pour plus d’informations sur la création d’une page, consultez Créer une page dans Générateur d’IU.
    4. Ajouter une alerte.
      1. Dans l’arborescence de contenu, sélectionnez + Ajouter du contenu.
      2. Recherchez une alerte et ajoutez-la à partir de la boîte à outils.
      3. Dans l’arborescence de contenu, placez le pointeur de la souris sur l’alerte 1 et sélectionnez l’icône de configuration, puis sélectionnez Renommer.
        Menu Actions supplémentaires dans l’arborescence de contenu ouvert pour le composant d’alerte, avec un curseur survolant l’option Renommer.
      4. Remplacez le texte dans le champ Étiquette du composant par le message de bienvenue.
        Le champ ID de composant se remplit automatiquement.
      5. Sélectionnez Appliquer.
    5. Configurez le message d’alerte.
      1. Une fois le message de bienvenue sélectionné dans l’arborescence de contenu, accédez au panneau de configuration et définissez les propriétés suivantes :
        Champ Valeur
        Type Info
        Icône circle-info-outline
        En-tête Vide (supprimez tout texte à l’intérieur du champ)
        Lien Vide (sélectionnez Modifier, puis supprimez tout texte à l’intérieur de l’étiquette et Href)
        Action Vide (sélectionnez Modifier, définissez Type sur -- Aucun --, puis supprimez tout texte à l’intérieur de Label et Href)

        Votre panneau de configuration doit ressembler à ceci :

        Panneau de configuration de l’alerte, avec des points forts sur l’étiquette du composant, le type, l’icône, l’en-tête, le lien et les champs Action.

      2. Placez le pointeur de la souris sur le champ Message et sélectionnez l’icône de liaison des données.
      3. Sélectionnez Formules, puis Chaîne, puis double-cliquez ou faites glisser CONCAT pour déplacer la formule vers la zone au-dessus.
        Boîte de dialogue Lier les données affichant la fonction CONCAT avec des valeurs vides.
      4. Double-cliquez sur value1 pour sélectionner le champ, puis sélectionnez à nouveau pour insérer du texte.
      5. Entrez « Bienvenue ! », en veillant à inclure un espace de fin après le point d’exclamation.
      6. Double-cliquez sur les valeurs pour sélectionner le champ, puis sélectionnez à nouveau pour insérer du texte.
      7. Sélectionnez Data types (Types de données), puis Page properties (Propriétés de la page).
      8. Sous la vue Pastille, sélectionnez les pastilles dans l’ordre suivant : session > utilisateur > fullName.
      9. Double-cliquez ou faites glisser fullName pour le déplacer dans la zone située au-dessus, puis sélectionnez Appliquer.
        Boîte de dialogue Lier les données affichant la fonction CONCAT avec « Bienvenue ! » et @context.session.user.fullName comme valeurs.
    6. Enregistrez et testez votre page.
      1. Sélectionnez Enregistrer en haut à droite.
      2. Sélectionnez Aperçu.

      L’alerte apparaît en haut de la page avec le texte « Bienvenue ! » suivi du nom de l’utilisateur connecté.

      Alerte apparaissant sous le menu d’en-tête, saluant l’utilisateur connecté.

    Personnaliser des messages d’alerte avec un script client dans Générateur d'IU

    Utilisez un script client pour créer des messages d’alerte dynamiques et contextuels.

    Avant de commencer

    Rôle requis : admin

    Pourquoi et quand exécuter cette tâche

    Les alertes scriptées fournissent des notifications qui répondent aux événements ou aux données externes. Ils sont très flexibles et peuvent réagir à des conditions complexes, mais nécessitent des connaissances en scripting et plus d’efforts pour être maintenus. Dans cet exemple, un bouton déclenche un script client qui génère plusieurs alertes avec des messages personnalisés.

    Figure 3. Aperçu final de la mise en page
    Générateur d'IU Éditeur affichant un bouton et une série d’alertes scriptées personnalisées, avec des points forts sur le bouton et une alerte.
    1. Bouton : déclenche le script client pour afficher les alertes.
    2. Alerte : affiche des messages personnalisés.
    Cette procédure utilise Générateur d'IU des composants pour créer des mises en page dynamiques et interactives. Pour en savoir plus sur la configuration des composants, consultez :
    Tableau 2. Composants utilisés dans cette procédure
    Composant Liens vers la documentation
    Bouton
    Alerte

    Procédure

    1. Accédez à la Tout > Cadre de travail Now Experience > Générateur d'IU.
    2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant Créer > Expérience.
      Consultez la rubrique Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour plus d’informations sur la création d’expériences.
    3. Créer une page à partir de zéro.
      Pour plus d’informations sur la création d’une page, consultez Créer une page dans Générateur d’IU.
    4. Ajouter un bouton.
      1. Dans l’arborescence de contenu, sélectionnez + Ajouter du contenu.
      2. Recherchez le bouton et ajoutez-le à partir de la boîte à outils.
      3. Dans l’arborescence de contenu, passez la souris sur le bouton 1 et sélectionnez l’icône de configuration, puis sélectionnez Renommer.
      4. Remplacez le texte dans le champ Étiquette du composant par Alertes de présentation.
        Le champ ID de composant se remplit automatiquement.
      5. Sélectionnez Appliquer.
    5. Créez un script client.
      1. Sous Données et scripts, sélectionnez le + en regard de Scripts clients.
        Tiroir de données et de scripts avec mise en surbrillance sur les scripts clients.
      2. Remplacez le texte dans le nom du script par Alertes.
      3. Remplacez le code par ce qui suit :
        Conseil :
        Vous pouvez sélectionner l’icône de format du code pour rendre le code plus lisible.
        /**
* @param {params} params
* @param {api} params.api
* @param {any} params.event
* @param {any} params.imports
* @param {ApiHelpers} params.helpers
*/
function handler({
    api,
    event,
    helpers,
    imports
}) {
    api.emit("NOW_UXF_PAGE#ADD_NOTIFICATIONS", {
        items: [
            {
                id: "alert1",
                status: "critical",
                icon: "circle-exclamation-fill",
                content: {
                    type: "html",
                    value: "<h2>Critical: System failure detected!</h2>"                   
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert2",
                status: "high",
                icon: "circle-exclamation-outline",
                content: {
                    type: "string",
                    value: "High: CPU usage exceeded 90%"
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert3",
                status: "moderate",
                icon: "circle-pause-outline",
                content: {
                    type: "string",
                    value: "Moderate: Disk space is below 20%"
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert4",
                status: "warning",
                icon: "triangle-exclamation-outline",
                content: {
                    type: "html",
                    value: "<h4> Warning: A new software update is ready. </h4>"
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert5",
                status: "info",
                icon: "circle-question-fill",
                content: {
                    type: "string",
                    value: "Info: A new software update is available"
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert6",
                status: "positive",
                icon: "check-circle-outline",
                content: {
                    type: "string",
                    value: "Positive: Backup completed successfully"
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert7",
                status: "low",
                icon: "bell-fill",
                content: {
                    type: "string",
                    value: "Low: Minor update recommended"
                },
                action: { type: "dismiss" }
            }
        ]
    });
}
      4. Sélectionnez Appliquer.
    6. Liez le bouton au script client avec un événement.
      1. Dans l’arborescence de contenu, sélectionnez le bouton que nous avons créé : Alertes de présentation.
      2. Dans le panneau de configuration, sélectionnez l’onglet Événements .
      3. Sous l’événement Bouton cliqué , sélectionnez Ajouter un gestionnaire.
      4. Recherchez des alertes, puis sélectionnez le gestionnaire d’alertes sous Scripts clients.
        Boîte de dialogue d’événements affichant le gestionnaire du script client d’alertes sélectionné.
      5. Sélectionnez Continuer.
      6. Sélectionnez Ajouter.
    7. Enregistrez et testez votre page.
      1. Sélectionnez Enregistrer en haut à droite.
      2. Sélectionnez Aperçu.

      Lorsque vous sélectionnez le bouton, plusieurs alertes s’affichent avec des messages que vous définissez dans le script client.

      Générateur d'IU Éditeur affichant un bouton et une série d’alertes scriptées personnalisées.