g_modal - Client
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 :
- Afficher les champs de type d’entrée dans une fenêtre modale.
- Afficher quelque chose 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.
| 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ù :
Par défaut : aucun traitement supplémentaire |
| Le style | Objet | Facultatif. Style du bouton de confirmation à afficher dans le modal. |
| 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 |
| Type | Description |
|---|---|
| Promesse | Si un paramètre est transmis, renvoie une callback promesse en cas de réussite, une erreur dans le cas contraire. Si un callback paramètre n’est pas transmis, la méthode renvoie toujours un message de réussite. |
L’exemple de code suivant montre comment appeler cette méthode pour afficher un message d’alerte « Seul l’utilisateur 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.
| 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ù :
Par défaut : aucun traitement supplémentaire |
| Le style | Objet | Facultatif. Style des boutons Confirmer et Annuler à afficher dans le modal. |
| style.cancelTitle | Chaîne | Facultatif. Texte à afficher sur le bouton Annuler. Par défaut : Annuler |
| style.cancelType | Chaîne | Facultatif. Type de bouton Annuler à afficher. Valeurs valides :
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. Valeurs valides :
Par défaut : par défaut |
| Type | Description |
|---|---|
| Promesse | Si un paramètre est transmis, renvoie une callback promesse en cas de réussite, une erreur dans le cas contraire. Si un callback paramètre n’est pas transmis, la méthode renvoie toujours un message de réussite. |
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 :
g_modal : confirmDestroy(titre de chaîne, message de chaîne, rappel de fonction, objet de style)
Affiche un message de confirmation associé à une action d’interface utilisateur, le bouton de confirmation affichant un style destructeur.
| 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ù :
Par défaut : aucun traitement supplémentaire |
| Le style | Objet | Facultatif. Style des boutons Confirmer et Annuler à afficher dans le modal. |
| style.cancelTitle | Chaîne | Facultatif. Texte à afficher sur le bouton Annuler. Par défaut : Annuler |
| style.cancelType | Chaîne | Facultatif. Type de bouton Annuler à afficher. Valeurs valides :
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. Valeur par défaut : destructeur |
| Type | Description |
|---|---|
| Promesse | Si un paramètre est transmis, renvoie une callback promesse en cas de réussite, une erreur dans le cas contraire. Si un callback paramètre n’est pas transmis, la méthode renvoie toujours un message de réussite. |
Cet exemple de code montre comment appeler la méthode confirmDestroy() pour afficher un modal de confirmation avec un bouton OK rouge.
function callback(value){
value ? console.log("confirm destroy callback") : console.log('cancel callback');
}
function onClick(g_form) {
g_modal.confirmDestroy("Confirm Destroy Title", "Confirm Destroy Message", callback, {
cancelTitle: "Cancel",
confirmTitle: "Confirm",
cancelType: "destructive",
confirmType: "confirm"
})
.then(
function test() {
g_form.setValue("state', '7");
},
function fail() {
g_form.setValue("state", 2)
}
)
}Sortie :
g_modal : richText(String title, String richText, Function callback, String size, String cancelTitle, String confirmTitle, String cancelType, String confirmType)
Affiche une fenêtre modale qui utilise le code HTML transmis pour générer le contenu dans la fenêtre modale.
| Nom | Type | Description |
|---|---|---|
| Titre | Chaîne | Facultatif. Titre à afficher dans l’en-tête du modal. Par défaut : vide |
| Texte enrichi | Chaîne | Contenu HTML à afficher dans le modal. Remarque :
Cette méthode supprime les <![CDATA[<script>balises ]]> , le 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ù :
Par défaut : aucun traitement supplémentaire |
| 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 Annuler à afficher. Valeurs valides :
Par défaut : confirmer |
| confirmType | Chaîne | Facultatif. Type de bouton de confirmation à afficher. Valeurs valides :
Par défaut : par défaut |
| Type | Description |
|---|---|
| Promesse | Si un paramètre est transmis, renvoie une callback promesse en cas de réussite, une erreur dans le cas contraire. Si un callback paramètre n’est pas transmis, la méthode renvoie toujours un message de réussite. |
L’exemple de code suivant montre comment afficher le texte « Ceci est du texte enrichi » en gras dans le modal associé.
function callback(value){
value ? console.log("confirm richtext callback") : console.log('cancel rich text callback');
}
function onClick(g_form) {
g_modal.richText("RichTextTitle", "<b>This is rich text</b>", callback, {
cancelTitle: "Rich Cancel",
confirmTitle: "Rich Confirm"
})
.then(
function test() {
g_form.setValue("state', '7");
},
function fail() {
g_form.setValue("state", 2)
}
)
}Sortie :
g_modal : showFields(titre de chaîne, champs de tableau, rappel de fonction, taille de chaîne, chaîne cancelTitle, chaîne confirmTitle, chaîne cancelType, chaîne confirmType, instruction de chaîne)
Affiche une fenêtre modale contenant les champs spécifiés et un bouton OK et Annuler par défaut.
| Nom | Type | Description |
|---|---|---|
| Titre | Chaîne | Facultatif. Titre à afficher dans l’en-tête du modal. Par défaut : " » |
| 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é. Les champs s’affichent dans le modal dans le même ordre que celui dans lequel ils apparaissent dans le tableau. |
| champs.autoFocus | Booléen | Facultatif. Marqueur indiquant si le champ doit être mis en focus automatique par défaut lorsque le modal se charge. Un seul champ doit avoir cette valeur définie sur vrai. Valeurs valides :
Valeur par défaut : false |
| champs.Choices (Choix | Tableau d'objets | Obligatoire si le fields.type paramètre est défini sur choix. Liste des options à afficher dans le champ de liste associé. Chaque entrée de la liste de choix doit être spécifiée en tant qu’objet distinct dans le tableau de choix .Par exemple : |
| champs.choix.displayValue | Chaîne | Facultatif. Valeur à afficher dans le champ de liste. Valeur par défaut : vide |
| champs.choix.valeur | Chaîne | Facultatif. Valeur interne de la valeur affichée dans le champ de liste. Valeur par défaut : nul |
| champs.display_value_list | Tableau de chaînes | Facultatif. Liste des chaînes à afficher. Par exemple, ['item1', 'item2', 'item3']. |
| champs.enableMentions | Booléen | Requis si fields.typehtml. Marqueur indiquant si vous pouvez mentionner un utilisateur dans le modal.Valeurs valides :
Valeur par défaut : false |
| champs.étiquette | Chaîne | Facultatif. Texte à afficher comme étiquette pour ce champ dans le modal. Valeur par défaut : vide |
| champs.Champ obligatoire | Booléen | Facultatif. Marqueur indiquant si le champ est obligatoire. Valeurs valides :
Valeur par défaut : false |
| champs.Name (Nom) | Chaîne | Nom interne du champ. Si le paramètre est défini sur référence ou glide_list, il s’agit fields.type du champ de référence de l’enregistrement actuel utilisé pour la recherche. |
| fields.referringTable | Chaîne | Requis si le fields.type paramètre est défini sur référence ou glide_list. Nom de la table à partir de laquelle vous faites référence.Par exemple : |
| champs.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. |
| champs.type | Chaîne | Type de champ à afficher dans le modal. Chaque type de champ possède un ensemble d’éléments fields.<> qui peuvent être transmis. Les valeurs entre parenthèses [ ] ci-dessous sont les fields éléments pris en charge par le type associé fields . Valeurs valides :
|
| champs.valeur | Chaîne | Facultatif. Valeur à afficher dans le champ. Par exemple, pour un champ de choix, vous pouvez afficher une invite utilisateur :
Ou pour un champ de référence, vous pouvez afficher la valeur d’un champ sur le formulaire associé :
Valeur par défaut : vide |
| 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ù :
Par défaut : aucun traitement supplémentaire |
| taille | Chaîne | Facultatif. Taille du modal. Valeurs valides :
Remarque : Si une valeur de pixel est spécifiée, le modal occupe tout le navigateur. Par exemple, si vous transmettez « 1px », la largeur totale du modal est totale. Par défaut : sm |
| 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 Annuler à afficher. Valeurs valides :
Par défaut : confirmer |
| confirmType | Chaîne | Facultatif. Type de bouton de confirmation à afficher. Valeurs valides :
Par défaut : par défaut |
| instruction | Chaîne | Facultatif. Instructions à afficher dans le modal. Ce contenu s’affiche sous le titre du modal et au-dessus du premier champ du modal. Par défaut : aucune instruction affichée |
| Type | Description |
|---|---|
| Promesse | Renvoie une promesse en cas de réussite, une erreur dans le cas contraire. |
L’exemple suivant montre comment inviter un utilisateur à indiquer un motif à l’aide d’une fenêtre modale, puis le renvoyer 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 Work notes 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 :
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 :
L’exemple suivant montre comment utiliser cette méthode pour afficher un modal qui contient des types zone de texte, choix, référence, glide_list et domain_id champs.
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,
referringTable: 'incident',
referringRecordId: g_form.getUniqueValue(),
value: g_form.getValue('caller_id')
},
{
type: 'glide_list',
name: 'watch_list',
label: 'A list',
mandatory: false,
referringTable: 'incident',
referringRecordId: g_form.getUniqueValue(),
value: '628,9ee1,f298d',
display_value_list: ['item1', 'item2', 'item3']
},
{
label: 'Domain ID',
type: 'domain_id',
value: 'c90d4b084a362312013398f051272c0d',
displayValue: 'TOP/ACME',
referringRecordId: '552c48888c033300964f4932b03eb092',
referringTable: 'incident'
}
];
g_modal.showFields({
title: "Enter your reason",
fields: fields,
size: 'lg'
}).then(function(fieldValues) {
});
}Sortie :
g_modal : showFrame(Titre de chaîne, URL de chaîne, Rappel de fonction, Taille de chaîne, Hauteur de chaîne, Chaîne modalHeight, Chaîne modalWidth, Booléen showClose, Chaîne autoCloseOn, Booléen hasLoadingMessage, Booléen closeOnEscape, Booléen hideOverlay)
Affiche une fenêtre modale qui utilise un lien vers une URL externe ou une page d’interface utilisateur pour son contenu.
| Nom | Type | Description |
|---|---|---|
| Titre | Chaîne | Facultatif. Titre à afficher dans l’en-tête du modal. 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ù :
Par défaut : aucun traitement supplémentaire |
| taille | Chaîne | Facultatif. Taille du modal. Valeurs valides :
Par défaut : lg |
| hauteur | Chaîne | Facultatif. Hauteur de la section de contenu dans le modal. Cette valeur est au format « <numéro><unité> », comme « 80 % » ou « 300 px ». Si vous ne transmettez qu’un nombre, la méthode suppose que l’unité de mesure est en pixels. Unités de mesure valides :
Par défaut : 100 % ou 153,75 px |
| Hauteur modale | Chaîne | Facultatif. Hauteur du modal. Cette valeur est au format « <numéro><unité> », comme « 80 % » ou « 300 px ». Si vous ne transmettez qu’un nombre, la méthode suppose que l’unité de mesure est en pixels. Unités de mesure valides :
Par défaut : 254px |
| Largeur modale | Chaîne | Facultatif. Largeur du modal. Cette valeur est au format « <numéro><unité> », comme « 80 % » ou « 300 px ». Si vous ne transmettez qu’un nombre, la méthode suppose que l’unité de mesure est en pixels. Unités de mesure valides :
Par défaut : 800px |
| showClose | Booléen | Facultatif. Marqueur indiquant si l’icône de fermeture (X) apparaît dans le coin supérieur droit du modal. Valeurs valides :
Par défaut : true |
| autoCloseOn | Chaîne | Facultatif. Condition sur laquelle fermer automatiquement le modal. Valeurs valides :
Par défaut : ne pas fermer automatiquement le modal. |
| hasLoadingMessage | Booléen | Facultatif. Marqueur indiquant s’il faut afficher le message Chargement... dans l’emplacement de contenu de la fenêtre modale avant de charger le contenu de la fenêtre modale. Valeurs valides :
Remarque :
Vous ne pouvez pas personnaliser le champ « Chargement en cours... » message ; Configurez uniquement s’il s’affiche ou non. Valeur par défaut : false |
| closeOnEscape | Booléen | Facultatif. Marqueur indiquant si l’utilisateur peut fermer le modal en appuyant sur la touche Echap. Valeurs valides :
Valeur par défaut : false |
| hideOverlay | Booléen | Facultatif. Marqueur indiquant s’il faut afficher la superposition gris transparent sur la page d’enregistrement. Valeurs valides :
Valeur par défaut : false |
| Type | Description |
|---|---|
| Promesse | Renvoie une promesse en cas de réussite, une 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: 500px
});
}Sortie :
Cet exemple montre comment utiliser une page d’interface utilisateur intégrée lors de la création d’une fenêtre modale. Elle utilise window.parent.postMessage() dans la page de l’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 de l’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 :