g_modal : client

  • Rversion finale: Yokohama
  • Mis à jour 30 janv. 2025
  • 11 minutes de lecture

    • L’API g_modal vous permet d’afficher une fenêtre modale pour améliorer les fonctionnalités de l’application.

    Utilisez cette API pour afficher les modaux dans les espaces de travail.

    À l’aide de cette API, vous pouvez :
    • Affichez les champs de type d’entrée dans une fenêtre modale.
    • Afficher un élément dans un cadre, tel qu’une page d’interface utilisateur ou un lien externe.
    • Effectuez une action sur confirmation de l’utilisateur.
    • Chargez un composant.
    • Utilisez le HTML pour renseigner le contenu d’une fenêtre modale.

    g_modal alert(titre de chaîne, message de chaîne, rappel de fonction, objet de style)

    Affiche un message d’alerte relatif à une action d’interface utilisateur.

    Tableau 1. Paramètres
    Nom Type Description
    Titre Chaîne Facultatif. Titre à afficher dans l’en-tête du modal.

    Par défaut : alerte
    message Chaîne Message à afficher dans le corps du modal.
    Remarque :
    Si vous ne transmettez qu’un seul paramètre, la méthode le traite comme le message paramètre.
    rappel Fonction Facultatif. Fonction à appeler après l’envoi et le traitement du formulaire sur le serveur.
    La fonction de rappel a la forme callbackFunction(String action_verb, String sys_id, String table, String displayValue) où :
    • action_verb: nom de l’action d’interface utilisateur exécutée. Exemples :
      • sysverb_cancel (bouton Annuler)
      • sysverb_insert (bouton Soumettre)
      • sysverb_save (bouton Enregistrer).
    • sys_id: Sys_id de l’enregistrement affecté.
    • table: nom de la table contenant l’enregistrement.
    • displayValue: valeur affichée sur le formulaire.

    Faire défaut:
    styleObjetFacultatif. Style du bouton de confirmation à afficher dans le modal.
    "style": {
  "buttonTitle": "String",
  "buttonType": "String"
}
    style.buttonTitle Chaîne Facultatif. Texte à afficher sur le bouton de confirmation.

    Par défaut : OK
    style.buttonType Chaîne Facultatif. Type de bouton de confirmation à afficher.

    Par défaut : par défaut
    Tableau 2. Renvoie
    Type Description
    Promesse Si un paramètre est transmis, renvoie la callback promesse en cas de réussite, l’erreur dans le cas contraire.

    L’exemple de code suivant montre comment appeler cette méthode pour afficher un message d’alerte 'Seul le destinataire affecté peut mettre fin à cette action.'.

    function onClick(g_form) {

  if (g_user.userID != g_form.getValue('assigned_to')) {
    g_modal.alert('Only the assigned to can end this action.');
    return;
  }

  var msg = getMessage("Are you sure you want to take this action?");
  g_modal.confirm(getMessage("Confirmation"), msg, function (confirmed) {
    if (confirmed) {
      g_form.setValue('state', 'closed_complete');
      g_form.save();
    }
  });

  return false;
}

    g_modal : confirm(titre de chaîne, message de chaîne, rappel de fonction, objet de style)

    Affiche un message de confirmation relatif à une action d’interface utilisateur.

    Tableau 3. Paramètres
    Nom Type Description
    Titre Chaîne Facultatif. Titre à afficher dans l’en-tête du modal.

    Par défaut : confirmer
    message Chaîne Message à afficher dans le corps du modal.
    Remarque :
    Si vous ne transmettez qu’un seul paramètre, la méthode le traite comme le message paramètre.
    rappel Fonction Facultatif. Fonction à appeler après l’envoi et le traitement du formulaire sur le serveur.
    La fonction de rappel a la forme callbackFunction(String action_verb, String sys_id, String table, String displayValue) où :
    • action_verb: nom de l’action d’interface utilisateur exécutée. Exemples :
      • sysverb_cancel (bouton Annuler)
      • sysverb_insert (bouton Soumettre)
      • sysverb_save (bouton Enregistrer).
    • sys_id: Sys_id de l’enregistrement affecté.
    • table: nom de la table contenant l’enregistrement.
    • displayValue: valeur affichée sur le formulaire.

    Faire défaut:
    style Objet Facultatif. Style des boutons de confirmation et d’annulation à afficher dans le modal.
    "style": {
  "cancelTitle": "String",
  "cancelType": "String",
  "confirmTitle": "String",
  "confirmType": "String"
}
    style.cancelTitle Chaîne Facultatif. Texte à afficher sur le bouton Annuler.

    Par défaut : Annuler
    style.cancelType Chaîne Facultatif. Type de bouton d’annulation à afficher.

    Par défaut : confirmer
    style.confirmTitle Chaîne Facultatif. Texte à afficher sur le bouton de confirmation.

    Par défaut : OK
    style.confirmType Chaîne Facultatif. Type de bouton de confirmation à afficher.

    Par défaut : par défaut
    Tableau 4. Renvoie
    Type Description
    Promesse Si un paramètre est transmis, renvoie la callback promesse en cas de réussite, l’erreur dans le cas contraire.

    L’exemple de code suivant montre comment appeler cette méthode pour afficher le message de confirmation « Voulez-vous vraiment effectuer cette action ? »

    function onClick(g_form) {

  if (g_user.userID != g_form.getValue('assigned_to')) {
    g_modal.alert('Only the assigned to can end this action.');
    return;
  }

  var msg = getMessage("Are you sure you want to take this action?");
  g_modal.confirm(getMessage("Confirmation"), msg, function (confirmed) {
    if (confirmed) {
      g_form.setValue('state', 'closed_complete');
      g_form.save();
    }
  });

  return false;
}

    Sortie :


    Capture d’écran montrant la fenêtre modale de confirmation générée par le code

    g_modal confirmDestroy(titre de chaîne, message de chaîne, rappel de fonction, objet de style)

    Affiche un message de confirmation relatif à une action d’interface utilisateur, avec le bouton de confirmation affiché comme un style destructeur.

    Tableau 5. Paramètres
    Nom Type Description
    Titre Chaîne Facultatif. Titre à afficher dans l’en-tête du modal.

    Par défaut : confirmer
    message Chaîne Message à afficher dans le corps du modal.
    Remarque :
    Si vous ne transmettez qu’un seul paramètre, la méthode le traite comme le message paramètre.
    rappel Fonction Facultatif. Fonction à appeler après l’envoi et le traitement du formulaire sur le serveur.
    La fonction de rappel a la forme callbackFunction(String action_verb, String sys_id, String table, String displayValue) où :
    • action_verb: nom de l’action d’interface utilisateur exécutée. Exemples :
      • sysverb_cancel (bouton Annuler)
      • sysverb_insert (bouton Soumettre)
      • sysverb_save (bouton Enregistrer).
    • sys_id: Sys_id de l’enregistrement affecté.
    • table: nom de la table contenant l’enregistrement.
    • displayValue: valeur affichée sur le formulaire.

    Faire défaut:
    style Objet Facultatif. Style des boutons de confirmation et d’annulation à afficher dans le modal.
    "style": {
  "cancelTitle": "String",
  "cancelType": "String",
  "confirmTitle": "String",
  "confirmType": "String"
}
    style.cancelTitle Chaîne Facultatif. Texte à afficher sur le bouton Annuler.

    Par défaut : Annuler
    style.cancelType Chaîne Facultatif. Type de bouton d’annulation à afficher.

    Par défaut : confirmer
    style.confirmTitle Chaîne Facultatif. Texte à afficher sur le bouton de confirmation.

    Par défaut : OK
    style.confirmType Chaîne Facultatif. Type de bouton de confirmation à afficher.

    Par défaut : destructeur
    Tableau 6. Renvoie
    Type Description
    Promesse Si un paramètre est transmis, renvoie la callback promesse en cas de réussite, l’erreur dans le cas contraire.

    Dans cet exemple, ...

    g_modal : richText(String title, String richContent, Function callback, String size, String cancelTitle, String confirmTitle, String cancelType, String confirmType)

    Affiche un modal qui utilise le code HTML transmis pour générer le contenu dans le modal.

    Tableau 7. Paramètres
    Nom Type Description
    Titre Chaîne Facultatif. Titre à afficher dans l’en-tête du modal.

    Valeur par défaut : vide
    Texte enrichi Chaîne Contenu HTML à afficher dans le modal.
    Remarque :
    Cette méthode supprime les <![CDATA[<script>balises ]]> , JavaScript en ligne et d’autres éléments susceptibles de constituer des failles de sécurité.
    rappel Fonction Facultatif. Fonction à appeler après l’envoi et le traitement du formulaire sur le serveur.
    La fonction de rappel a la forme callbackFunction(String action_verb, String sys_id, String table, String displayValue) où :
    • action_verb: nom de l’action d’interface utilisateur exécutée. Exemples :
      • sysverb_cancel (bouton Annuler)
      • sysverb_insert (bouton Soumettre)
      • sysverb_save (bouton Enregistrer).
    • sys_id: Sys_id de l’enregistrement affecté.
    • table: nom de la table contenant l’enregistrement.
    • displayValue: valeur affichée sur le formulaire.

    Faire défaut:
    cancelTitle Chaîne Facultatif. Texte à afficher sur le bouton Annuler.

    Par défaut : Annuler
    confirmTitle Chaîne Facultatif. Texte à afficher sur le bouton de confirmation.

    Par défaut : OK
    cancelType Chaîne Facultatif. Type de bouton d’annulation à afficher.

    Par défaut : confirmer
    confirmType Chaîne Facultatif. Type de bouton de confirmation à afficher.

    Par défaut : par défaut
    Tableau 8. Renvoie
    Type Description
    Promesse Si un paramètre est transmis, renvoie la callback promesse en cas de réussite, l’erreur dans le cas contraire.

    g_modal : showFields(titre de chaîne, champs de tableau, instruction de chaîne, rappel de fonction)

    Affiche une fenêtre modale contenant les champs spécifiés. Affiche par défaut les boutons OK et Annuler.

    Tableau 9. Paramètres
    Nom Type Description
    rappel Fonction Facultatif. Fonction à appeler après l’envoi et le traitement du formulaire sur le serveur.
    La fonction de rappel a la forme callbackFunction(String action_verb, String sys_id, String table, String displayValue) où :
    • action_verb: nom de l’action d’interface utilisateur exécutée. Exemples :
      • sysverb_cancel (bouton Annuler)
      • sysverb_insert (bouton Soumettre)
      • sysverb_save (bouton Enregistrer).
    • sys_id: Sys_id de l’enregistrement affecté.
    • table: nom de la table contenant l’enregistrement.
    • displayValue: valeur affichée sur le formulaire.

    Faire défaut:
    cancelTitle Chaîne Facultatif. Étiquette du bouton Annuler.

    Par défaut : Annuler
    cancelType Chaîne Facultatif. Type de bouton Annuler .

    Par défaut : par défaut
    confirmTitle Chaîne Facultatif. Étiquette du bouton de confirmation.

    Par défaut : OK
    confirmType Chaîne Facultatif. Type de bouton de confirmation.

    Par défaut : confirmer
    champs Tableau d'objets Liste des champs à afficher dans le modal. Chaque champ est défini dans un objet distinct. Les fields paramètres que vous transmettez dépendent du type de champ (fields.type) spécifié.
    fields: [
  {
    choices: "String",
    dispalyValue: "String",
    label: "String",
    mandatory: Boolean,
    name: "String",
    reference: "String",
    referringTable: "String",
    referringRecordId: "String",
    type: "String",
    value: "String"
  }
]
    champs.Choix Tableau d'objets Requis si le fields.type paramètre est défini sur choix. Liste des options à afficher dans le champ de liste associé.
    Par exemple :
    choices: [
  {
    displayValue: 'Value 1',
    value: 'Value1'
  },
  {
    displayValue: 'Value 2',
    value: 'Value2'
  }
]
    champs.étiquette Chaîne Texte à afficher comme étiquette pour ce champ dans le modal.
    Champs obligatoires Booléen Facultatif. Marqueur indiquant si le champ est obligatoire.
    Valeurs valides :
    • vrai : le champ est obligatoire.
    • false : le champ est facultatif.

    Valeur par défaut : false
    fields.name Chaîne Nom interne du champ. Si le fields.type paramètre est défini sur référence, il s’agit du champ de référence de l’enregistrement actuel utilisé pour la recherche.
    fields.reference Chaîne Requis si le fields.type paramètre est défini sur référence. Nom de la table à référencer.

    Par exemple : sys_user
    fields.referringTable Chaîne Requis si le fields.type paramètre est défini sur référence. Nom de la table à partir de laquelle vous faites référence.

    Par exemple : incident
    fields.referringRecordId Chaîne Requis si le fields.type paramètre est défini sur référence. Sys_id de l’enregistrement que vous appelez dans le formulaire Action d’interface utilisateur.
    fields.type Chaîne Type de champ à afficher dans le modal.

    Valeurs valides :

    • booléen
    • choix
    • glide_list
    • HTML
    • référence
    • chaîne
    • textarea

    Chaque type de champ dispose d’un ensemble d’options fields.<> qui peuvent être transmises.
    fields.value Chaîne Facultatif. Valeur à afficher dans le champ.

    Par exemple, pour un champ de choix, vous pouvez afficher une invite utilisateur :

    valeur : getMessage(' -- Sélectionner -- ')

    Ou pour un champ de référence, vous pouvez afficher la valeur d’un champ sur le formulaire associé :

    g_form.getValue('caller_id')

    Valeur par défaut : vide
    instruction Chaîne Facultatif. Instructions à afficher dans le modal.
    taille Chaîne Taille du modal.
    Classes CSS modales possibles :
    • Alerte : 300 px
    • SM : 400 px
    • MD : 600 px
    • LG : 900 px
    Titre Chaîne Facultatif. Titre à afficher dans l’en-tête du modal.

    Valeur par défaut : vide
    Tableau 10. Renvoie
    Type Description
    Promesse Renvoie la promesse en cas de réussite, l’erreur dans le cas contraire.

    L’exemple suivant montre l’invitation d’un utilisateur à indiquer un motif à l’aide d’une fenêtre modale, puis son renvoi au champ Notes de travail de l’enregistrement. La méthode then() renvoie une promesse, qui renvoie ce que le modal renvoie ; fieldValues dans ce cas. Le champ Notes de travail côté client, avec la valeur du champ, se trouve dans le tableau updatedFields . Étant donné qu’un seul champ est renvoyé, l’exemple suppose une position d’index de 0.

    function onClick(g_form) {
    g_modal.showFields({
        title: "Enter your reason",
        fields: [{
            type: 'textarea',
            name: 'work_notes',
            label: getMessage('Reason'),
            mandatory: true
        }],
        size: 'lg'
    }).then(function(fieldValues) {
        g_form.setValue('work_notes', fieldValues.updatedFields[0].value);
        g_form.save();
    });
}

    Sortie :

    Capture d’écran d’une fenêtre modale produite par le code associé.

    L’exemple suivant développe l’exemple ci-dessus, en ajoutant des champs de choix et de référence.

    function onClick(g_form) {

    var fields = [{
        type: 'textarea',
        name: 'work_notes',
        label: getMessage('Reason'),
        mandatory: true
    },
    {
        type: 'choice',
        name: 'reason_code',
        label: getMessage('Reason code'),
        value: getMessage(' -- Select -- '),
        choices: [
          {
            displayValue: 'Duplicate',
            value: 'duplicate'
          },
          {
            displayValue: 'Canceled',
            value: 'canceled'
          }
        ],
        mandatory: true
    },
    {
        type: 'reference',
        name: 'caller_id',
        label: getMessage('What is your name?'),
        mandatory: true,
        reference: 'sys_user',
        referringTable: 'incident',
        referringRecordId: g_form.getUniqueValue(),
	 value: g_form.getValue('caller_id'),
	 displayValue: g_form.getDisplayValue('caller_id')
    }
  ];

  g_modal.showFields({
    title: "Enter your reason",
    fields: fields,
    size: 'lg'
  }).then(function(fieldValues) {
        g_form.setValue('work_notes', fieldValues.updatedFields[0].value);
        g_form.setValue('caller_id', fieldValues.updatedFields[2].value);
        g_form.save();
  });
}

    Sortie :

    Capture d’écran d’une fenêtre modale produite par le code associé.

    g_modal : showFrame(titre de chaîne, URL de chaîne, rappel de fonction, taille de la chaîne, hauteur de la chaîne, chaîne autoCloseOn)

    Affiche un modal qui utilise un lien vers une URL externe ou une page d’interface utilisateur pour son contenu.

    Tableau 11. Paramètres
    Nom Type Description
    Titre Chaîne Facultatif. Titre à afficher dans l’en-tête du modal.

    Valeur par défaut : vide
    URL Chaîne URL des informations à charger dans l’IFrame.
    Remarque :
    Si un seul argument est transmis, il est traité comme le url paramètre.
    rappel Fonction Facultatif. Fonction à appeler après l’envoi et le traitement du formulaire sur le serveur.
    La fonction de rappel a la forme callbackFunction(String action_verb, String sys_id, String table, String displayValue) où :
    • action_verb: nom de l’action d’interface utilisateur exécutée. Exemples :
      • sysverb_cancel (bouton Annuler)
      • sysverb_insert (bouton Soumettre)
      • sysverb_save (bouton Enregistrer).
    • sys_id: Sys_id de l’enregistrement affecté.
    • table: nom de la table contenant l’enregistrement.
    • displayValue: valeur affichée sur le formulaire.

    Faire défaut:
    taille Chaîne Taille du modal.
    Classes CSS modales possibles :
    • Alerte : 300 px
    • SM : 400 px
    • MD : 600 px
    • LG : 900 px
    hauteur Numéro Hauteur du modal.

    Unité : pixels
    autoCloseOn Chaîne Facultatif. Condition sur laquelle fermer automatiquement le modal, telle que « URL_CHANGED ».

    Par défaut : ne ferme pas automatiquement le modal.
    Tableau 12. Renvoie
    Type Description
    Promesse Renvoie la promesse en cas de réussite, l’erreur dans le cas contraire. Cette promesse est résolue lorsque le modal IFrame est fermé.

    L’exemple suivant montre comment afficher un article de la base de connaissances dans un modèle à l’aide de la sys_id de l’enregistrement de l’article de la base de connaissances et d’une URL de base.

    function onClick(g_form) {
  var kbId = '24d9243187032100deddb882a2e3ec33'; //sysId of KB article
  g_modal.showFrame({
    url: '/kb_view.do?sys_kb_id=' + kbId,
    title: 'Test Knowledge Article',
    size: 'lg',
    height: 500
  });
}

    Sortie :

    Capture d’écran du modal généré par le code

    Cet exemple montre comment utiliser une page d’interface utilisateur incorporée lors de la création d’un modal. Elle utilise window.parent.postMessage() dans la page d’interface utilisateur pour transmettre les données de l’iFrame à l’espace de travail, car l’API g_form n’est pas accessible dans une page d’interface utilisateur lorsqu’elle se trouve dans l’iFrame.

    function onClick(g_form) {
  function proposeMIC(data) {
    var workNotes = data.msg + "\n" + data.workNotes;
    var notes = g_form.getValue('work_notes') + ' ' + workNotes;
    var bi = g_form.getValue('business_impact') + ' ' + data.businessImpact;
    g_form.setValue('work_notes', notes.trim());
    g_form.setValue('business_impact', bi.trim());
    g_form.submit('sysverb_mim_propose');
  }
	
  function openPopup() {
    if(!g_form.getControl('work_notes')) {
      getMessage('Cannot propose major incident as "Worknotes" is not visible', function(msg) {
	 g_form.addErrorMessage(msg);
      });
      return false;
    }

    var url = "/sn_major_inc_mgmt_mim_propose.do?sysparm_stack=no&sysparm_workspace=" + true;
    g_modal.showFrame({
      title: getMessage("Propose Major Incident"),
      url: url,
      size: 'lg',
      autoCloseOn: 'URL_CHANGED',
      callback: function (ret, data) {
        if (ret)
          proposeMIC(data);
      }
    });
  }
	
  openPopup();
}

    Sortie :


    Capture d’écran du modal généré par le code