Conception et traitement de scripts côté client
Des scripts clients bien conçus peuvent réduire le temps nécessaire aux utilisateurs pour remplir un formulaire.
Le bon traitement côté client dépend du chargement initial du formulaire. Effectuer des mises à jour d’enregistrement avant le chargement du formulaire peut produire des résultats inattendus qui contournent le traitement côté client.
- Désactivez l’édition de liste pour la table.
- Créez des règles métier ou des contrôles d’accès appropriés pour la modification de liste.
- Créer des politiques de données.
- Créez un script client onCellEdit distinct.
Restreindre la modification de liste
Si vous créez des politiques d’interface utilisateur ou des scripts clients pour les champs d’un formulaire, vous devez utiliser une autre méthode pour vous assurer que les données contenues dans ces champs sont contrôlées de la même manière dans une liste.
- Désactivez l’édition de liste pour la table.
- Créez des règles métier ou des contrôles d’accès appropriés pour la modification de liste.
- Créer des politiques de données.
- Créez un script client onCellEdit distinct.
Réduire les recherches de serveurs
Utilisez les données des clients autant que possible pour éliminer le besoin de recherches chronophages sur les serveurs.
Les scripts clients utilisent soit des données disponibles sur le client, soit des données récupérées sur le serveur. Les principaux moyens d’obtenir des informations à partir du serveur sont la recherche GlideAjax g_scratchpad et asynchrone.
La principale différence entre ces méthodes est que g_scratchpad est envoyée une fois lorsqu’un formulaire est chargé (les informations sont transmises du serveur au client), tandis que GlideAjax est déclenché dynamiquement lorsque le client demande des informations au serveur.
Récupérer les données du serveur à l’aide de g_scratchpad
L’objet g_scratchpad transmet des informations du serveur au client, par exemple lorsque le client a besoin d’informations qui ne sont pas disponibles sur le formulaire.Par exemple, si vous avez un script client qui doit accéder au champ u_retrieve et que le champ n’est pas sur le formulaire, les données ne sont pas disponibles pour le script client. Une solution typique à cette situation consiste à placer le champ sur le formulaire, puis à toujours le masquer avec un script client ou une politique d’interface utilisateur. Bien que cette solution soit plus rapide à configurer, elle est plus lente à exécuter.
Si vous savez quelles informations le client a besoin du serveur avant le chargement du formulaire, une règle métier d’affichage peut créer g_scratchpad propriétés pour contenir ces informations. Theg_scratchpad est envoyée au client lorsque le formulaire est demandé, ce qui le rend disponible pour toutes les méthodes de scripting côté client. Il s’agit d’un moyen très efficace d’envoyer des informations du serveur au client. Toutefois, vous ne pouvez charger les données de cette façon que lorsque le formulaire est chargé. La règle métier ne peut pas être déclenchée dynamiquement. Dans ce cas, utilisez un appel GlideAjax asynchrone.
- Valeur de la propriété système css.base.color
- Indique si l’enregistrement actuel possède ou non des pièces jointes
- Nom du gestionnaire de l’appelant
g_scratchpad.css = gs.getProperty('css.base.color');
g_scratchpad.hasAttachments = current.hasAttachments();
g_scratchpad.managerName = current.caller_id.manager.getDisplayValue();// Check if the form has attachments
if (g_scratchpad.hasAttachments)
// do something interesting here
else
alert('You need to attach a form signed by ' + g_scratchpad.managerName);Récupérer les données du serveur à l’aide de GlideAjax asynchrone
GlideAjax asynchrone vous permet de demander dynamiquement des informations au serveur.
//Alert if the assignment groups name matches the support group
function onChange(control, oldValue, newValue, isLoading) {
if (isLoading)
return;
var ga = new GlideAjax('ciCheck');
ga.addParam('sysparm_name', 'getCiSupportGroup');
ga.addParam('sysparm_ci', g_form.getValue('cmdb_ci'));
ga.addParam('sysparm_ag', g_form.getValue('assignment_group'));
ga.getXML(doAlert); // Always try to use asynchronous (getXML) calls rather than synchronous (getXMLWait)
}
// Callback function to process the response returned from the server
function doAlert(response) {
var answer = response.responseXML.documentElement.getAttribute("answer");
alert(answer);
}var ciCheck = Class.create();
ciCheck.prototype = Object.extendsObject(AbstractAjaxProcessor, {
getCiSupportGroup: function() {
var retVal = ''; // Return value
var ciID = this.getParameter('sysparm_ci');
var agID = this.getParameter('sysparm_ag');
var ciRec = new GlideRecord('cmdb_ci');
// If we can read the record, check if the sys_ids match
if (ciRec.get(ciID)) {
if (ciRec.getValue('support_group') == agID)
retVal = 'CI support group and assignment group match';
else
retVal = 'CI support group and assignment group do not match';
// Can't read the CI, then they don't match
} else {
retVal = 'CI support group and assignment group do not match';
}
return retVal;
}
});Utiliser le paramètre displayValue setValue() pour les champs de référence
Lors de l’utilisation de setValue() sur un champ de référence, incluez le paramètre displayValue pour éviter des appels de serveur supplémentaires.
Lorsque vous utilisez setValue() sur un champ de référence, assurez-vous d’inclure la valeur d’affichage du champ de référence comme 3ème paramètre. Si vous définissez la valeur sans displayValue, l’instance effectue un appel synchrone pour récupérer la valeur d’affichage de l’enregistrement que vous avez spécifié. Cet aller-retour supplémentaire vers le serveur peut avoir un impact sur les performances.
var id = '5137153cc611227c000bbd1bd8cd2005';
g_form.setValue('assigned_to', id); // Client needs to go back to the server to
// fetch the name that goes with this IDvar id = '5137153cc611227c000bbd1bd8cd2005';
var name = 'Fred Luddy';
g_form.setValue('assigned_to', id, name); // No server call requiredUtiliser une politique d’interface utilisateur au lieu d’un script client
Si possible, envisagez d’utiliser une politique d’interface utilisateur au lieu d’un script client.
- Les politiques d’interface utilisateur disposent d’un champ Ordre pour permettre un contrôle total sur l’ordre dans lequel les opérations côté client ont lieu.
- Les politiques d’interface utilisateur ne nécessitent pas de scripting pour rendre un champ obligatoire, en lecture seule ou visible.
Validation de l’entrée à l’aide d’un script client
Une excellente utilisation d’un script client est de valider l’entrée de l’utilisateur.
Cette validation améliore l’expérience utilisateur, car l’utilisateur découvre s’il existe des problèmes de données avant de soumettre les informations.
if (g_form.getValue('impact') == '3' && g_form.getValue('priority') == '1')
g_form.showFieldMsg('impact', getMessage('Low impact now allowed with High priority'), 'error');
Définir l’ordre des scripts clients
Contrôlez l’ordre d’exécution de vos scripts clients à l’aide du champ Ordre. Pour éviter que deux ou plusieurs scripts clients ne s’exécutent simultanément, puis n’entrent en conflit, vous pouvez ajouter un ordre d’exécution des scripts.
Avant de commencer
Pourquoi et quand exécuter cette tâche
Procédure
Éviter la manipulation des DOM
Évitez si possible la manipulation du modèle d’objet de document (DOM). Cela peut entraîner un problème de maintenabilité lorsque les navigateurs sont mis à jour.
Utilisez plutôt l’API GlideForm ou envisagez une approche différente pour la solution. En général, lorsque vous utilisez des méthodes de manipulation DOM, vous devez référencer un élément dans le DOM par ID ou à l’aide d’un sélecteur CSS. Lors de la référence d’éléments DOM prêts à l’emploi, il existe un risque que l’ID ou le placement de l’élément dans le DOM puisse changer, entraînant l’arrêt du fonctionnement du code et/ou générant des erreurs. Faites preuve de prévoyance, de prudence et comprenez parfaitement le risque que vous encourez. Examinez ces objets et réduisez autant que possible l’utilisation des méthodes de manipulation DOM.
Éviter les scripts clients globaux
Un script client global est un script client dans lequel la table sélectionnée est globale. Les scripts clients globaux n’ont pas de restrictions de table, par conséquent, ils se chargeront sur chaque page du système, introduisant ainsi un délai de chargement du navigateur.
Il n’y a aucun avantage à charger ce type de scripts sur chaque page.
Comme alternative, et pour une approche plus modulaire et évolutive, envisagez de déplacer les scripts clients vers une table de base (telle que Tâche[task] ou Élément de configuration[cmdb_ci]) qui peut être dérivée pour toutes les tables enfants/d’extension. Le système n’a ainsi plus besoin de charger les scripts sur chaque formulaire de l’interface utilisateur, par exemple les pages d’accueil ou Service Catalog où ils sont rarement (voire jamais) nécessaires.
Entourer le code dans les fonctions
Enfermer le code dans un script client à l’intérieur d’une fonction.
Les scripts clients sans fonction entraînent des problèmes de portée variable. Lorsque le code n’est pas enfermé dans une fonction, les variables et autres objets sont disponibles et partagés avec tous les autres scripts côté client. Si vous utilisez les mêmes noms de variables, il est possible qu’ils entrent en collision. Cela peut entraîner des conséquences inattendues difficiles à résoudre.
var state = "6";
function onSubmit() {
if(g_form.getValue('incident_state') == state) {
alert("This incident is Resolved");
}
}function onSubmit() {
var state = "6";
if(g_form.getValue('incident_state') == state) {
alert("This incident is Resolved");
}
}Cette solution est beaucoup plus sûre car la portée de l’état variable est limitée à la fonction onSubmit(). Par conséquent, la variable state n’entre pas en conflit avec les variables d’état des autres scripts côté client.
Exécuter uniquement les scripts nécessaires
Pour éviter d’exécuter inutilement des scripts chronophages, assurez-vous que les scripts clients n’effectuent que les tâches nécessaires.
Les exemples suivants illustrent les améliorations apportées à l’exemple de code initial. Chaque exemple illustre une amélioration particulière du script afin d’améliorer les performances et d’éviter les appels inutiles.
N’oubliez pas que les scripts clients n’ont pas de champ Condition . Cela signifie que les scripts onLoad() et onChange() s’exécutent dans leur intégralité à chaque chargement du formulaire approprié. Cet exemple est un script client onChange() inefficace défini pour s’exécuter lorsque le champ Élément de configuration change.
//Set Assignment Group to CI's support group if assignment group is empty
function onChange(control, oldValue, newValue, isLoading) {
var ciSupportGroup = g_form.getReference('cmdb_ci').support_group;
if (ciSupportGroup != '' && g_form.getValue('assignment_group) != '')
g_form.setValue('assignment_group', ciRec.support_group.sys_id);
}Cet exemple améliore le premier en remplaçant la recherche getReference() ou GlideRecord par un appel GlideAjax asynchrone.
//Set Assignment Group to support group if assignment group is empty
function onChange(control, oldValue, newValue, isLoading) {
var ga = new GlideAjax('ciCheck');
ga.addParam('sysparm_name', 'getSupportGroup');
ga.addParam('sysparm_ci', g_form.getValue('cmdb_ci'));
ga.getXML(setAssignmentGroup);
}
function setAssignmentGroup(response) {
var answer = response.responseXML.documentElement.getAttribute("answer");
g_form.setValue('assignment_group', answer);
}L’indicateur isLoading est le moyen le plus simple d’empêcher le code inutile d’occuper du temps de navigation dans les scripts onChange. Le isLoading marqueur doit être utilisé au début de tout script qui n’a pas besoin de s’exécuter pendant le chargement du formulaire. Il n’est pas nécessaire d’exécuter ce script lors d’un chargement de formulaire, car la logique aurait déjà été exécutée lors de la dernière modification du champ. L’ajout de la isLoading vérification au script l’empêche d’effectuer une recherche de cmdb_ci à chaque chargement de formulaire.
Le isTemplate marqueur indique qu’un modèle est en cours de chargement.
//Set Assignment Group to CI's support group if assignment group is empty
function onChange(control, oldValue, newValue, isLoading, isTemplate) {
if (isLoading)
return;
var ga = new GlideAjax('ciCheck');
ga.addParam('sysparm_name', 'getSupportGroup');
ga.addParam('sysparm_ci', g_form.getValue('cmdb_ci'));
ga.getXML(setAssignmentGroup);
}
function setAssignmentGroup(response) {
var answer = response.responseXML.documentElement.getAttribute("answer");
g_form.setValue('assignment_group', answer);
}
function onChange(control, oldValue, newValue, isLoading, isTemplate) {
if (isLoading) {}; // run during loading
// rest of script here
}//Set Assignment Group to CI's support group if assignment group is empty
function onChange(control, oldValue, newValue, isLoading, isTemplate) {
if (isLoading)
return;
if (newValue) {
var ga = new GlideAjax('ciCheck');
ga.addParam('sysparm_name', 'getSupportGroup');
ga.addParam('sysparm_ci', g_form.getValue('cmdb_ci'));
ga.getXML(setAssignmentGroup);
}
}
function setAssignmentGroup(response) {
var answer = response.responseXML.documentElement.getAttribute("answer");
g_form.setValue('assignment_group', answer);
}//Set Assignment Group to CI's support group if assignment group is empty
function onChange(control, oldValue, newValue, isLoading, isTemplate) {
if (isLoading)
return;
if (newValue) {
if (newValue != oldValue) {
var ga = new GlideAjax('ciCheck');
ga.addParam('sysparm_name', 'getSupportGroup');
ga.addParam('sysparm_ci', g_form.getValue('cmdb_ci'));
ga.getXML(setAssignmentGroup);
}
}
}
function setAssignmentGroup(response) {
var answer = response.responseXML.documentElement.getAttribute("answer");
g_form.setValue('assignment_group', answer);
}//Set Assignment Group to CI's support group if assignment group is empty
function onChange(control, oldValue, newValue, isLoading, isTemplate) {
if (isLoading)
return;
if (newValue) {
if (newValue != oldValue) {
if (g_form.getValue('assignment_group') == '') {
var ga = new GlideAjax('ciCheck');
ga.addParam('sysparm_name', 'getSupportGroup');
ga.addParam('sysparm_ci', g_form.getValue('cmdb_ci'));
ga.getXML(setAssignmentGroup);
}
}
}
}
function setAssignmentGroup(response) {
var answer = response.responseXML.documentElement.getAttribute("answer");
g_form.setValue('assignment_group', answer);
}