---
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


---

# Créer une dépendance de widget

# Créer une dépendance de widget {#ariaid-title1}

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

Dans Portail de services, vous pouvez lier des fichiers JavaScript et CSS aux widgets pour créer des dépendances entre les widgets et les bibliothèques tierces, les feuilles de style externes et les modules angulaires.

## Avant de commencer

Rôle requis : sp_admin ou admin

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

Les dépendances sont chargées de manière asynchrone à partir du serveur en cas de besoin.

Les widgets peuvent avoir autant ou aussi peu de dépendances que nécessaire. Cependant, plus vous en ajoutez, plus un widget doit télécharger de contenu pour s'afficher sur la page. Réduisez au maximum les dépendances pour des temps de chargement plus efficaces.

## Procédure

1. Créez un package de dépendance.  
   Un package de dépendances est une collection de fichiers JavaScript et CSS qui peuvent être connectés à un widget.
   1. Accédez à la Portail de servicesDépendances.
   2. Dans l'enregistrement de la dépendance, définissez les champs suivants.  
      {#widget-dependencies__table_mzc_jdl_3w__entry__2}

      | Champ | Description |
      |-|-|
      | Nom | Nom de votre dépendance. (Utile pour sélectionner une dépendance dans une liste déroulante.) |
      | Application | Périmètre de l'application pour l'enregistrement de dépendance. |
      | Inclure lors du chargement de page | Sélectionnez cette option si vous souhaitez que votre dépendance soit chargée sur la page lors du chargement initial de la page de Portail de services ou laissez l'option décochée pour charger la dépendance uniquement lorsque le widget lié est chargé sur une page. |
      | Nom du module d'angle | Facultatif. Définissez la valeur si le JavaScript lié est un module Angular. Fournissez le nom du module d'angle en cours de chargement afin qu'il puisse être injecté dans l'application d'angle du portail de services. |
      [ ]

      {#widget-dependencies__table_mzc_jdl_3w}
   {#widget-dependencies__substeps_sp3_vwd_k1b}
2. Ajoutez des fichiers au package de dépendance.  
   Après avoir enregistré les informations de votre package de dépendance, utilisez les listes connexes pour ajouter des fichiers d'inclusion JS et CSS. Pour chaque liste connexe, incluez les informations suivantes :  
   {#widget-dependencies__table_sjx_vgl_3w__entry__2}

   | Champ | Description |
   |-|-|
   | Nom d'affichage | Nom de l'include de script. |
   | Source | Selon que vous ajoutez un JS Include ou un CSS Include, sélectionnez l'une des options suivantes dans la liste : * URL * Script d'interface utilisateur (pour un include JS) ou feuille de style (pour un include CSS) {#widget-dependencies__ul_mdx_dcm_3w} Pour un JS Include, utilisez le champ Script d'interface utilisateur pour référencer un script d'interface utilisateur trouvé dans Interface utilisateur du systèmeScripts d'interface utilisateur. Pour l'include CSS, utilisez le champ Feuille de style pour référencer un enregistrement dans la table `sp_css` . |
   [ ]

   {#widget-dependencies__table_sjx_vgl_3w}
3. Ajoutez un package de dépendances à un widget.  
   Une fois que vous avez créé un package de dépendance et ajouté des fichiers, créez une relation entre la dépendance et un widget.
   1. Accédez à la Portail de servicesWidgets et recherchez l'enregistrement de widget auquel vous souhaitez ajouter la dépendance.
   2. Dans la liste connexe Dépendances, cliquez sur Modifier.
   3. Dans la zone de liste double, recherchez la dépendance que vous avez créée et double-cliquez dessus pour l'ajouter à la colonne des éléments sélectionnés à droite.
   4. Enregistrez la page pour revenir à l'enregistrement du widget.
{#widget-dependencies__steps_utm_swd_k1b}
* **[Inclure une icône de police dans un widget unique](https://servicenow-prod.fluidtopics.net/Fw~skbzavBtruzer26XdQg)**   
  Si vous souhaitez qu'un seul widget ait accès à une icône de police, incluez l'icône de police dans un seul widget.
* **[Inclure les icônes de police en tant que dépendance de widget](https://servicenow-prod.fluidtopics.net/d2WVdM0dTSYUVmHORiGGGw)**   
  Vous pouvez inclure des icônes de police partout où un widget est chargé en les incluant en tant que dépendance de widget.