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. Passez en revue les macros d’interface utilisateur existantes pour obtenir des exemples et des approches suggérées. Ceux qui souhaitent créer des interfaces personnalisées avec les technologies JavaScript devraient envisager Service Portal comme alternative.
Bases des macros d’interface utilisateur
Les macros d’interface utilisateur peuvent être utilisées pour 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 ont des noms 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 de 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_ comprennent 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 à Toutes les > > d’interface utilisateur du 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 sous la forme d’attributs name, test_attribute et laptop_type dans une balise Jelly < par exemple : > dans une page d’interface utilisateur.
- Création de la macro d’interface utilisateur ui_example
- Accédez à Toutes lesmacrosd’interface utilisateur > système > 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> - Utiliser la macro dans une page d’interface utilisateur
- Accédez à Toutes les pages de l’interface utilisateur > del’interface utilisateur du système > et sélectionnez Nouveau. Il vous sera demandé de sélectionner un rôle administrateur.Nommez la page d’interface utilisateur et ajoutez le script suivant au 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
- Dans la page d’interface utilisateur, vous pouvez cliquer sur Essayer pour afficher les résultats.
Figure 1. Page d’interface utilisateur avec sortie formatée par macro d’interface utilisateur
Appeler des 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 | Affichez quelque chose sur une page d’interface utilisateur : |
| Macro d’interface utilisateur | Appelez une macro d’interface utilisateur à partir d’une autre macro d’interface utilisateur : |
Formulaire 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 le but 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 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 à l’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 donner 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 Service Catalog.
À l’ancienne
Il s’agit de la vue affichée 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 brève description 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.
Cette méthode vous permet d’afficher des détails, tout comme l’approbation de la demande. Vous disposez d’un lien vers l’élément commandé, d’une brève description (qui contient la possibilité de développer les variables de l’article), d’un prix, d’une quantité et du prix total. Cela aide l’approbateur à afficher 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>