---
sourceDocument: Référence de l’API Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/xanadu/api-reference

 Release :

    - xanadu

ft:locale :

    - fr-FR

ft:publication_title :

    - Référence de l’API Xanadu

ft:clusterId :

    - crapiref

bundleId :

    - crapiref

workflow :

    - Creator


---

# Macros d'interface utilisateur

# Macros d'interface utilisateur {#ariaid-title1}

* Rversion finale: Xanadu
* 
* Mis à jour 1 août 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 7 minutes de lecture

Les macros d'interface utilisateur sont des composants scriptés discrets que les administrateurs peuvent ajouter à l'interface utilisateur.  
Les macros d'interface utilisateur sont généralement des contrôles qui fournissent des entrées ou des informations non fournies par les types de champs existants. Par défaut, le système fournit des macros d'interface utilisateur pour divers éléments d'interface utilisateur, notamment :

* 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
{#c_UIMacros__ul_d4b_dwq_rv}

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](http://commons.apache.org/proper/commons-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.  
Remarque :  
Pour afficher les macros d'interface utilisateur disponibles, accédez à Interface utilisateur \> système \> Macros d'interface utilisateur.

## Notions de base sur les macros d'interface utilisateur {#ariaid-title2}

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 {#ui-macro-basics__section_z1m_kty_4zb}

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.  
Une macro d'interface utilisateur peut être incluse dans une page d'interface utilisateur avec la balise Jelly \<g :\>. L'exemple suivant inclut la macro d'interface utilisateur ui_date_time, fournissant deux attributs facultatifs à la macro d'interface utilisateur :

    <g:ui_date_time name="due_date" value="2023-11-24 08:30:00" onchange="checkDateValue()" />

Les valeurs d'attribut de la balise Jelly \<g :\> sont fournies à la macro d'interface utilisateur en tant que variables préfixées par jvar. La macro d'interface utilisateur peut utiliser les variables préfixées par jvar dans son code XML.{#ui-macro-basics__table_o5n_1nx_qzb__entry__2}

| Attributs | variables préfixées par jvar |
|-|-|
| nom | jvar_name |
| valide | jvar_value |
| onchange | jvar_onchange |
[Tableau 1. Attributs de balise Jelly utilisés comme variables préfixées par jvar]

{#ui-macro-basics__table_o5n_1nx_qzb}  
Remarque :  
Ces macros d'interface utilisateur ne sont pas destinées à prendre en charge toutes les fonctionnalités de leur type de champ de formulaire correspondant. Dans de nombreux cas, les macros ne sont destinées qu'à des cas d'utilisation d'application spécifiques ServiceNow .

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 {#ui-macro-basics__section_chz_xhx_qzb}

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 <kbd class="ph userinput">ui_example</kbd> 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.  
Remarque :  
Si vous créez une macro et qu'elle ne s'affiche pas comme prévu dans la page d'interface utilisateur, il peut être utile de vider le cache. Pour vider le cache de votre instance, saisissez <kbd class="ph userinput">&lt;server_url&gt;/cache.do</kbd> dans votre navigateur.
**Référence associée**   

* [Pages de l'interface utilisateur](https://servicenow-prod.fluidtopics.net/0BrSS8eOAcSOPPpURfg0aQ#r_UIPages "Les pages de l’interface utilisateur permettent de créer et d’afficher des formulaires, des boîtes de dialogue, des listes et d’autres composants de l’interface utilisateur.")
* [Balises Jelly](https://servicenow-prod.fluidtopics.net/wB~UXsVksJEKix9t3GOQ9Q "Utilisez Jelly pour transformer XML en HTML.")
* [\< exemple :ui_form/\>](https://servicenow-prod.fluidtopics.net/FQ4kbJPKBvaiWbrFZeCAKQ#r_GUIForm "Cette balise définit un formulaire sur la page de l’interface utilisateur.")
* [\<g :ui_input_field /\>](https://servicenow-prod.fluidtopics.net/FQ4kbJPKBvaiWbrFZeCAKQ#r_GUIInputField "Cette balise ajoute une référence à une macro d’interface utilisateur qui crée un champ de saisie sur une page qui permet aux utilisateurs de saisir des informations. Le ui_input_field transmet une étiquette, un nom, une valeur et une taille dans la macro d’interface utilisateur.")
* [\< exemple :ui_checkbox/\>](https://servicenow-prod.fluidtopics.net/FQ4kbJPKBvaiWbrFZeCAKQ#r_GUICheckbox "Cette balise met une coche modifiable par l’utilisateur sur une page. Le nom et la valeur sont transmis dans la macro d’interface utilisateur.")

## Appel de macros d'interface utilisateur {#ariaid-title3}

Les administrateurs peuvent appeler des macros d'interface utilisateur à partir de certains types d'enregistrements associés à l'interface utilisateur.
{#r_CallingUIMacros__table_j2v_pzq_rv__entry__2}

| Type d'enregistrement | Exemple |
|-|-|
| Attribut du dictionnaire | Affichez une icône pour un champ de référence : ref_contributions=ui_macro_name |
| Page de l'interface utilisateur | Afficher quelque chose sur une page d'interface utilisateur : <g:macro_invoke macro="ui_macro_name" /> |
| Macro d'interface utilisateur | Appeler une macro d'interface utilisateur à partir d'une autre macro d'interface utilisateur : <?xml version= "1.0" encoding="utf-8"&nbsp;?> <j:jelly trim= "false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null"> <g:ui_macro_name /> <g:ui_macro_name_2 /> </j:jelly> |
[Tableau 2. Appel de macros d'interface utilisateur par type d'enregistrement]

{#r_CallingUIMacros__table_j2v_pzq_rv}

## Formulaire de macro d'interface utilisateur {#ariaid-title4}

Chaque enregistrement de macro d'interface utilisateur se compose d'un nom et d'un document XML écrits en code Jelly.
{#r_UIMacroForm__table_sx5_bhr_rv__entry__2}

| 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. |
[Tableau 3. Champs macro d'interface utilisateur]

{#r_UIMacroForm__table_sx5_bhr_rv}

## Macro d'interface utilisateur d'approbation personnalisée {#ariaid-title5}

Cette section explique comment créer une macro d'interface utilisateur d'approbation personnalisée.
Avertissement :  
La personnalisation décrite ici a été développée pour une utilisation dans des instances spécifiques, et n'est pas prise en charge par Now Support. Cette méthode est fournie telle quelle et doit être testée rigoureusement avant d'être implémentée. Publiez toutes les questions et commentaires concernant cette personnalisation dans notre [forum](http://community.service-now.com/) communautaire. 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.  
Figure 1. Macros d'approbation

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.  
Figure 2. Mes approbations (anciennement)

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).  
Figure 3. Mes approbations

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>