---
sourceDocument: Interface utilisateur de la Now Platform Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/xanadu/platform-user-interface

 Release :

    - xanadu

ft:locale :

    - fr-FR

ft:publication_title :

    - Interface utilisateur de la Now Platform Xanadu

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Widgets incorporés

# Widgets incorporés {#ariaid-title1}

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

Incorporez un widget dans un modèle HTML, un script serveur ou un script client.

## Incorporer un widget dans un modèle HTML {#c_NestedWidgets__section_bwv_nqw_q1b}

Utilisez l'élément `<widget></widget>` pour intégrer un widget dans un modèle HTML. Transmettez l'ID du widget que vous essayez d'intégrer comme paramètre.

    <div>
        <widget id="widget-cool-clock"></widget>
    </div>

Si un widget dispose d'un schéma d'options, vous pouvez définir des options d'instance au format JSON.

    <widget id="widget-cool-clock" options='{"zone": "America/Los_Angeles","title": "San Diego, CA"}'></widget>

Vous pouvez également définir des options dans le script du serveur de widgets.

Modèle HTML
:

        <widget id="widget-cool-clock" options='data.clockOptions'></widget>

Script serveur
:

        (function() {
          data.clockOptions = {"zone": "America/Los_Angeles","title": "San Diego, CA"};
        })();

## Incorporer un widget dans un script client {#c_NestedWidgets__section_txc_xjd_k1b}

Utilisez [spUtil.get()](https://www.servicenow.com/docs/access?context=spUtilAPI&version=xanadu&pubname=xanadu-api-reference&ft:locale=en-US) pour obtenir un modèle de widget dans le script client.

    spUtil.get("widget-sc-cat-item", {sys_id: "your_catalog_item_sys_id"}).then(function(response) {
        c.catalogItemWidget = response;
    });

Lors de l'utilisation de la classe spUtil dans un script client de widget, vous devez injecter la classe dans la fonction de script client. L'exemple suivant incorpore le widget Cool Clock :

Script client
:

        function(spUtil) {
            var c = this;
            spUtil.get("widget-cool-clock").then(function(response) {
                    c.myClockWidget = response;
            });
        }

Modèle HTML
:

        <sp-widget widget="c.myClockWidget"></sp-widget>

## Incorporer un widget dans un script serveur {#c_NestedWidgets__section_s1k_xjd_k1b}

Utilisez [$sp.getWidget()](https://www.servicenow.com/docs/access?context=c_GlideSPScriptableScopedAPI&version=xanadu&pubname=xanadu-api-reference&ft:locale=en-US) pour obtenir un modèle de widget dans le script serveur.

    data.catalogItemWidget = $sp.getWidget("widget-sc-cat-item");

L'exemple suivant incorpore le widget Cool Clock :

Script serveur
:

        (function() {
            var coolClockOptions = {"zone": "America/Los_Angeles","title": "San Diego, CA"}
            data.coolClockWidget = $sp.getWidget('widget-cool-clock', coolClockOptions);
        })();

Modèle HTML
:

        <sp-widget widget="data.coolClockWidget"></sp-widget>

## Propriétés du modèle de widget {#c_NestedWidgets__section_x3x_dkd_k1b}

Lorsqu'un modèle de widget est appelé à partir d'un autre widget, le modèle HTML, le script client et la fonction de lien sont chargés tels qu'ils sont dans l'enregistrement sp_widget. La propriété de données est le résultat de l'exécution du script du serveur de widgets. Tout ce que vous placez sur l'objet de données sur le serveur est disponible dans l'objet de données sur le client.  
{#c_NestedWidgets__table_jr3_vhp_jw__entry__3}

| Nom de la propriété | Type | Description |
|-|-|-|
| client_script | chaîne | Champ de script client de widget. |
| CSS | chaîne | Compilation de la sortie CSS à partir du champ SASS pour le widget. |
| données | objet | Objet de données contenant des clés et des valeurs provenant du script du serveur de widgets. |
| dépendances | tableau | Toutes les bibliothèques tierces à charger avant que le widget ne s'exécute. |
| options | objet | Options utilisées pour initialiser le widget. |
| modèle | chaîne | Champ de modèle HTML pour le widget. |
[ ]

{#c_NestedWidgets__table_jr3_vhp_jw}

## Incorporer un widget plusieurs fois avec des options personnalisées {#ariaid-title2}

Incorporez le widget d'horloge cool plusieurs fois à l'aide d'options personnalisées.

### Avant de commencer

Rôle requis : admin ou sp_admin

### Pourquoi et quand exécuter cette tâche

Créez un widget qui intègre plusieurs instances du widget Horloge cool, chacune avec un fuseau horaire et un titre différents. Ouvrez le widget Horloge cool dans l'éditeur de widget pour afficher les options de widget référencées dans le modèle HTML et le script client.  
Figure 1. Widget d'horloge cool avec options en surbrillance

### Procédure

1. Clonez le widget Horloge cool avec le nom <kbd class="ph userinput">Horloge incorporée</kbd>.
2. Remplacez les blocs de code par ce qui suit :  
   Modèle HTML

       <div class="panel panel-default">
         <div class="panel-heading">Time across the US</div>
         <div class="panel-body">
           <div class="row">
             <div class="col-sm-3" ng-repeat="myClock in c.data.clocks">
               <sp-widget widget="myClock"></sp-widget>
             </div>
           </div>
         </div>
       </div>

   CSS

       .panel {
           margin-top: 10px;
       }

   Script client

       function() {
           // nothing to do here...
       }

   Script serveur

       (function() {
           var options = [
               {zone: "America/Los_Angeles", title: "San Diego"},
               {zone: "America/Denver", title: "Denver"},
               {zone: "America/Chicago", title: "Chicago"},
               {zone: "America/New_York", title: "New York"}
           ];

           data.clocks = [];
           for (var i in options) {
               data.clocks.push($sp.getWidget("widget-cool-clock", options[i]));
           }
       })();

{#embed-widgets-custom-options__steps_vr2_vb4_q1b}

### Résultats

Chaque instance de l'horloge dans le widget d'horloge incorporé apparaît avec un fuseau horaire différent.  
Figure 2. Options d'exemple d'horloge ![Horloge intégrée avec quatre widgets intégrés avec quatre fuseaux horaires différents]()