Macros d'interface utilisateur
Les macros d'interface utilisateur sont des composants scriptés discrets que les administrateurs peuvent ajouter à l'interface utilisateur.
- Tous les formateurs
- Le panier Catalogue de services
- Les icônes d'action à côté des champs
- Les icônes d'action sur les formulaires et les listes
- Les widgets d'un système de gestion de contenu
- Le concepteur d'activité Orchestration
Les administrateurs peuvent créer leurs propres macros d’interface utilisateur pour fournir des contrôles ou des interfaces personnalisés. La création de macros d’interface utilisateur nécessite une connaissance du script Jelly. Examinez les macros d’interface utilisateur existantes pour obtenir des exemples et des suggestions d’approche. Ceux qui souhaitent créer des interfaces personnalisées avec des technologies JavaScript devraient envisager Service Portal comme une alternative.
Notions de base sur les macros d’interface utilisateur
Les macros d’interface utilisateur permettent de créer des solutions qui ne peuvent pas être créées à l’aide des types de variables de catalogue disponibles.
Macros d’interface utilisateur accessibles
Plusieurs macros d’interface utilisateur sont disponibles dans la table Macros d’interface utilisateur [ui_macros]. Ces macros d’interface utilisateur portent un nom commençant par ui_ et émulent le comportement d’un sous-ensemble de types de champs de formulaire standard à utiliser dans les pages de l’interface utilisateur. Par exemple, la macro d’interface utilisateur ui_date_time peut agir comme un champ glide_date_time dans une page d’interface utilisateur, fournissant un champ d’entrée saisissable avec un sélecteur de date/heure.
<g:ui_date_time name="due_date" value="2023-11-24 08:30:00" onchange="checkDateValue()" />| Attributs | variables préfixées par jvar |
|---|---|
| nom | jvar_name |
| valide | jvar_value |
| onchange | jvar_onchange |
Les macros d’interface utilisateur préfixées par ui_ incluent des descriptions spécifiant les attributs pris en charge qui peuvent (ou doivent) être fournis dans la balise Jelly <g :> de la page d’interface utilisateur. Pour afficher les macros d’interface utilisateur disponibles, accédez à Interface utilisateur du système > Macros d’interface utilisateur > système.
Macros d’interface utilisateur personnalisées
La macro d’interface utilisateur ui_example utilise trois variables préfixées par jvar : jvar_name, jvar_test_attribute et jvar_laptop_type. Ces variables peuvent être fournies à la macro d’interface utilisateur en tant que nom, test_attribute et attributs de laptop_type dans une balise Jelly <g :> dans une page de l’interface utilisateur.
- Création de la macro d’interface utilisateur ui_example
- Accédez à Toutes les > Interface utilisateur du système > Macros d’interface utilisateur et sélectionnez Nouveau.Nommez la macro ui_example et ajoutez le script suivant dans le champ XML :
<?xml version="1.0" encoding="utf-8" ?> <j:jelly trim="true" xmlns:j="jelly:core" xmlns:g="glide"> <div>name jvar: ${jvar_name}</div> <div>test_attribute jvar: ${jvar_test_attribute}</div> <div>laptop_type jvar: ${jvar_laptop_type}</div> </j:jelly> - Utilisation de la macro dans une page d’interface utilisateur
- Accédez à Toutes les pages de l’interface utilisateur du système > > et sélectionnez Nouveau. Il vous sera demandé de sélectionner un rôle d’administrateur.Nommez la page d’interface utilisateur et ajoutez le script suivant dans le champ HTML :
<?xml version="1.0" encoding="utf-8" ?> <j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null"> <div style="text-decoration:underline">Template include one:</div> <g:ui_example name="Fred Luddy" test_attribute="I am an attribute" laptop_type="ThinkPad" /> <hr/> <div style="text-decoration:underline">Template include two:</div> <g:ui_example name="Pat Casey" test_attribute="I am a different attribute" laptop_type="Macbook Pro" /> </j:jelly> - Vérification de la sortie
- Sur la page de l’interface utilisateur, vous pouvez cliquer sur Essayer pour afficher les résultats.
Appel de macros d’interface utilisateur
Les administrateurs peuvent appeler des macros d’interface utilisateur à partir de certains types d’enregistrements associés à l’interface utilisateur.
| Type d'enregistrement | Exemple |
|---|---|
| Attribut du dictionnaire | Affichez une icône pour un champ de référence : |
| Page de l'interface utilisateur | Afficher quelque chose sur une page d’interface utilisateur : |
| Macro d’interface utilisateur | Appeler une macro d’interface utilisateur à partir d’une autre macro d’interface utilisateur : |
Formulaire de macro d’interface utilisateur
Chaque enregistrement de macro d’interface utilisateur se compose d’un nom et d’un document XML écrits en code Jelly.
| Champ | Description |
|---|---|
| Nom | Nom unique et descriptif pour cette macro. |
| Actif | Cochez cette case pour afficher l’élément tel que défini. Décochez la case pour désactiver l’élément sans supprimer le code. Par exemple, la macro email_reply est inactive par défaut. |
| Description | Décrivez l’objectif de la macro et les paramètres qui lui sont transmis. |
| XML | Script Jelly qui définit la macro. |
Macro d’interface utilisateur d’approbation personnalisée
Cette section explique comment créer une macro d’interface utilisateur d’approbation personnalisée.
Nom du script : Macro d’interface utilisateur d’approbation personnalisée
Type : Macro d’interface utilisateur
Description : voici une option permettant d’obtenir plus de détails à partir de la vue Mes approbations d’un plan d’exécution. Cela peut être fait en créant une nouvelle macro d’interface utilisateur. Accédez à Interface utilisateur du système et cliquez sur Macros d’interface utilisateur. Tout d’abord, vous devrez renommer la approval_summarizer_sc_task existante en quelque chose comme approval_summarizer_sc_task_old et la désactiver. Ensuite, vous devrez en créer un nouveau en utilisant le même nom (approval_summarizer_sc_task). Le nom doit essentiellement vous indiquer ce que fait la macro et à quoi elle s’applique. Dans ce cas, nous remplaçons un nom existant, nous avons donc décidé de réutiliser le nom existant.
Ensuite, vous devez copier le script xml au bas de cet article dans la fenêtre de code xml de la nouvelle macro d’interface utilisateur. Il s’agit d’un excellent moyen de fournir des détails à un approbateur lorsque vous effectuez des approbations d’éléments de campagne via des tâches d’approbation dans les plans d’exécution de Catalogue de services.
À l’ancienne
Il s’agit de la vue que vous voyez dans Mes approbations lors de l’utilisation d’une tâche d’approbation via l’ancienne méthode.
Notez qu’il n’y a pas beaucoup de détails indiquant à l’approbateur ce qu’il approuve réellement. Vous pouvez voir la description brève de la tâche, mais pas grand-chose autour de l’élément.
La nouvelle façon de faire
Il s’agit de la vue que vous verrez si vous utilisez le script XML ci-dessous à la place de la macro d’interface utilisateur prête à l’emploi (prête à l’emploi).
Cette méthode vous permet de voir les détails, tout comme l’approbation de la demande. Vous disposez d’un lien vers l’article commandé, d’une brève description (qui contient la possibilité de développer les variables de l’article), du prix, de la quantité et du prix total. Cela aide l’approbateur dans la mesure où il affiche plus de détails. Ils peuvent maintenant voir ce qu’ils approuvent réellement.
Script :
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="true" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<tr>
<td class="label_left" width="100%">
<label style="margin-left: 10px">
${gs.getMessage('Summary of Item being approved')}:
<input style="visibility: hidden" NAME="make_spacing_ok"></input>
</label>
</td>
</tr>
<g:evaluate var="jvar_ni" expression="
var sc_task = ${ref}.sysapproval;
var sc_req_labels = new GlideRecord('sc_req_item');
sc_req_labels.initialize();
var sc_req_item = new GlideRecord('sc_req_item');
sc_req_item.addQuery('request_item', sc_task.request_item.sys_id);
sc_req_item.query();
" />
<tr>
<td width="100%">
<table width="100%">
<tr>
<td class="label_left" width="150px">
<label style="margin-left: 10px">
${sc_task.request_item.request.opened_by.sys_meta.label}:
</label>
</td>
<td>
${sc_task.request_item.request.opened_by.getDisplayValue()}
</td>
</tr>
<tr>
<td class="label_left" width="150px">
<label style="margin-left: 10px">
${sc_task.request_item.request.requested_for.sys_meta.label}:
</label>
</td>
<td>
${sc_task.request_item.request.requested_for.getDisplayValue()}
</td>
</tr>
<tr>
<td class="label_left" width="150px">
<label style="margin-left: 10px">${gs.getMessage('Total')}:</label>
</td>
<td>
<g:currency_format value="${sc_task.request_item.request.price}" />
</td>
</tr>
</table>
</td>
</tr>
<j:set var="jvar_line_num" value="0" />
<tr>
<td width="100%">
<table width="100%">
<tr class="header">
<td colspan="2">
${sc_req_labels.number.sys_meta.label}
</td>
<td>
${sc_req_labels.description.sys_meta.label}
</td>
<td>
${sc_req_labels.price.sys_meta.label}
</td>
<td>
${sc_req_labels.quantity.sys_meta.label}
</td>
<td>
${gs.getMessage('Total')}
</td>
</tr>
<j:set var="jvar_item_price" value="${sc_task.request_item.price * sc_task.request_item.quantity}"/>
<j:set var="jvar_overall_total" value="${jvar_overall_total + jvar_item_price}"/>
<j:set var="jvar_line_color" value="odd"/>
<j:set var="jvar_line_num" value="${jvar_line_num + 1}"/>
<j:if test="${jvar_line_num % 2 == 0}">
<j:set var="jvar_line_color" value="even"/>
</j:if>
<g:evaluate var="ni" expression="
var smart_description = sc_task.request_item.cat_item.short_description;
if (smart_description == null || smart_description == '' || smart_description == 'undefined')
smart_description = sc_task.request_item.cat_item.name;
"/>
<tr class="${jvar_line_color}">
<td valign="top">
<g2:evaluate var="jvar_pop_target" expression="$[ref].getRecordClassName()" />
<a class="linked" target="gsft_main" href="sc_req_item.do?sys_id=${sc_task.request_item.sys_id}" onmousemove="popListDiv(event, 'sc_req_item', '${sc_task.request_item.sys_id}','${sysparm_view}')" onmouseout="lockPopup(event)">
<img src="images/icons/hover_icon.gifx" class="clsshort"/>
</a>
</td>
<td valign="top">
<a class="linked" target="gsft_main" href="sc_req_item.do?sys_id=${sc_task.request_item.sys_id}">
${sc_task.request_item.number}
</a>
</td>
<td valign="top" width="50%">
<g:call function="variable_summary_approval.xml"
question_name="${sc_task.request_item.sys_id}"
question_help_tag="${smart_description}"
sc_req_item="${sc_task.request_item.sys_id}"
help_class="${jvar_line_color}"/>
</td>
<td valign="top"> <g:currency_format value="${sc_task.request_item.price}"/> </td>
<td valign="top"> ${sc_task.request_item.quantity}</td>
<td valign="top"> <g:currency_format value="${jvar_item_price}"/></td>
</tr>
</table>
</td>
</tr>
</j:jelly>