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 Portail de services comme alternative.
Informations de base sur les 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 portent 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 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 JVAR |
|---|---|
| nom | jvar_name |
| valide | jvar_value |
| sur changement | 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 à .
Macros d’interface utilisateur personnalisées
La macro d’interface utilisateur ui_example utilise trois variables préfixées 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 laptop_type dans une balise Jelly <g :> dans une page d’interface utilisateur.
- Création de la macro d’interface utilisateur ui_example
- Accédez à la et sélectionnez Nouveau.Nommez le ui_example macro et ajoutez le script suivant au 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 à la 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 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.
Macros d’interface utilisateur d’appel
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 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 la case pour afficher l’élément comme 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 ont été transmis. |
| XML | Script Jelly qui définit la macro. |
Macro d’interface utilisateur d’approbation personnalisée
Cette section décrit 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. Pour ce faire, vous pouvez créer 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 le approval_summarizer_sc_task existant en quelque chose comme approval_summarizer_sc_task_old et le 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 dans la nouvelle macro d’interface utilisateur. C’est un excellent moyen de donner des détails à un approbateur lorsque vous procédez à 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 méthode
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 brève description de la tâche, mais pas grand-chose sur la nature de l’élément.
La nouvelle façon de faire
C’est 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 les détails 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 à partir de l’article), du prix, de la quantité et du prix total. Cela aide l’approbateur en montrant 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>