--- 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 --- # Développement de widgets personnalisés # Développement de widgets personnalisés {#ariaid-title1} * Rversion finale: Xanadu * * Mis à jour 1 août 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 minutes de lecture Développez des widgets personnalisés pour les portails à l'aide d'AngularJS, de Bootstrap et de l'API ServiceNow . ## Avant de commencer {#widget-dev-guide__section_xrx_qf2_kz} Pour développer des widgets, vous devez avoir de ServiceNow l'expérience en matière d'API pour : * Exécuter des requêtes d'enregistrement sur le serveur. * Créez et mettez à jour des enregistrements. {#widget-dev-guide__ul_bs4_rch_j1b} Vous devez avoir de l'expérience avec AngularJS pour : * Lier les variables aux contrôleurs clients. * Accéder aux objets serveur dans un widget. * Rassemblez les entrées de l'utilisateur. {#widget-dev-guide__ul_hmf_5ch_j1b} Si vous le souhaitez, vous pouvez créer sur le modèle Bootstrap en accédant aux composants Bootstrap. ## Parties d'un widget {#widget-dev-guide__section_gpd_lkw_h1b} Comme les directives Angular, les widgets exécutent un comportement spécifié dans une Portail de services page. Un widget inclut des composants de scripting obligatoires et facultatifs. Modèle HTML : Un composant de widget obligatoire. Le modèle HTML nécessite des connaissances d'AngularJS pour afficher et collecter des données. Utilisez le modèle HTML pour : * Affichez la vue dynamique qu'un utilisateur voit dans le navigateur à l'aide des informations du modèle et du contrôleur. * Liez les variables de script client à votre balisage. * Recueillir des données auprès de l'utilisateur final. {#widget-dev-guide__ul_chb_mdh_j1b} Script client : Un composant de widget obligatoire. Un script client nécessite des connaissances de l'API ServiceNow et d'AngularJS pour créer un contrôleur client. Utilisez le script client pour : * Mappez les données du serveur à partir d'objets JavaScript et JSON vers des objets clients. * Traiter les données avant de les restituer. * Transmettez les données au modèle HTML. * Transmettez l'entrée et les données de l'utilisateur au serveur pour traitement. {#widget-dev-guide__ul_elh_d2h_j1b} Script serveur : Un composant de widget obligatoire. Un script serveur nécessite des connaissances de l'API pour fonctionner avec les données d'enregistrement ServiceNow . Utilisez le script serveur pour : * Définissez l'état initial du widget. * Envoyez les données d'enregistrement au script client widget à l'aide de la variable de données . * Exécuter des requêtes côté serveur. {#widget-dev-guide__ul_n5p_42h_j1b} Fonction de lien : Composant de widget facultatif La fonction de lien nécessite la connaissance d'AngularJS. Utilisez une fonction de lien pour manipuler directement les DOM. Schéma de l'option : Composant de widget facultatif Permet à un Portail de services administrateur de configurer un widget. Utilisez le schéma d'options pour : * Spécifiez les paramètres d'un widget. * Autorisez les utilisateurs administrateurs à définir les options d'instance pour une instance de widget. * Développez des widgets flexibles et réutilisables. {#widget-dev-guide__ul_cmx_w3h_j1b} Fournisseurs d'angle : Composant de widget facultatif Les fournisseurs d'angle nécessitent une connaissance d'AngularJS. Utilisez les fournisseurs d'angle pour : * Synchronisez les widgets lors du changement d'enregistrements ou de filtres. * Partagez le contexte entre les widgets. * Maintenir et conserver l'état. * Créez des comportements et des composants d'interface utilisateur réutilisables, puis injectez-les dans plusieurs widgets. {#widget-dev-guide__ul_mm2_2zq_yz} Dépendances : Composant de widget facultatif Une dépendance de widget est une ressource externe utilisée par votre widget, comme des fichiers JavaScript ou CSS. ## Objets globaux dans les widgets {#widget-dev-guide__section_rsq_g1h_j1b} Lorsqu'un widget commence à s'afficher pour la première fois sur une page, le script serveur s'exécute en premier et accède à trois objets globaux : entrée, options et données. Étant donné que la variable d'entrée est un objet de données envoyé par le script client, cette variable n'est pas définie lors de sa première initialisation. Lorsqu'un widget est instancié pour la première fois, le script serveur : 1. Initialise un objet de données vide. 2. Initialise l'objet d'entrée avec les données envoyées par le contrôleur client ou l'objet options avec les données utilisées pour initialiser le widget. 3. Envoie l'objet de données au contrôleur client au format JSON. {#widget-dev-guide__ol_sh3_btw_xz} Le script client : 1. Accède à l'objet de données du serveur à l'aide de `c.data`. Remarque : Par défaut, les widgets utilisent la variable c pour représenter l'instance du contrôleur en utilisant le `contrôleur comme` syntaxe. Vous pouvez modifier cette variable lors de la création ou du clonage de widgets. 2. Utilise `server.update()` pour publier les modifications dans le modèle de données. Cette méthode met à jour le script serveur à l'aide de l'objet d'entrée . Remarque : Après avoir appelé `server.update(),` l'objet de données du script client est automatiquement écrasé par l'objet de données du script serveur. 3. Utilise `c.options` pour accéder aux valeurs utilisées pour appeler le widget sur le serveur. Cet objet est en lecture seule. {#widget-dev-guide__ol_mjs_jtw_xz} ## Utilisation de l'éditeur de widget {#widget-dev-guide__section_dsy_kch_j1b} Lorsque vous créez un widget, un enregistrement est créé dans la table sp_widget. Toutefois, vous pouvez utiliser l'éditeur de widget dans Portail de services Configuration comme environnement de script. L'éditeur de widget est une application pleine page similaire à un IDE. Vous pouvez afficher les parties du widget que vous souhaitez modifier et masquer le reste, tout en prévisualisant vos modifications en temps réel. * **[Directives générales pour le développement de widgets](https://servicenow-prod.fluidtopics.net/qOyIHxn2DUKL_x7x8~bG0Q)** Lors du développement de widgets personnalisés, gardez à l'esprit ces directives générales pour des performances optimales, un développement évolutif et une bonne expérience utilisateur. * **[Didacticiel : Créer un widget personnalisé](https://servicenow-prod.fluidtopics.net/cNDCoduY0Gs9dnIcSOUb_Q#adv-widget-tutorial)** Suivez ce didacticiel pour créer un widget personnalisé qui affiche Catalogue de services des éléments. Utilisez ce didacticiel comme modèle pour vous aider à comprendre la puissance de scripting avancée du Portail de servicesfichier . * **[Cloner un widget](https://servicenow-prod.fluidtopics.net/E9JfwNM2tFq3AVKQBZpDEg)** Tirez parti du code existant en clonant et en modifiant un widget existant. * **[Créer un widget](https://servicenow-prod.fluidtopics.net/K_E2M37omQP7Li9A8w6C1w)** Créez un widget pour créer un widget personnalisé à partir de zéro. * **[Schéma de l'option de widget](https://servicenow-prod.fluidtopics.net/sMhU1hJsD7jy83HgaYN6_A#c_WidgetInstanceOptions)** Les instances de widget permettent aux utilisateurs de configurer de façon unique chaque widget qu'ils ajoutent à une page. Utilisez le schéma d'option pour définir les paramètres de votre widget. * **[Référence de l'API de widget](https://servicenow-prod.fluidtopics.net/smf8oCVUm_3HF2Pk7__l8w#widget-api-reference)** Portail de services inclut les API côté client et côté serveur à utiliser dans les scripts client widget et serveur. * **[Réutiliser les composants avec les fournisseurs d'angle](https://servicenow-prod.fluidtopics.net/32JBcbRlzjcXeYvf9FOH5A)** Les fournisseurs d'angle sont des composants réutilisables qui peuvent être injectés dans plusieurs widgets. Pour garantir un chargement rapide des widgets et un portail performant, créez des fournisseurs d'angle au lieu de surcharger vos contrôleurs clients avec des données persistantes et une logique supplémentaire. Avec les fournisseurs d'angle, vous pouvez conserver les données pendant toute la durée de vie de vos Portail de services données et réutiliser des composants et des objets de données dans plusieurs widgets. * **[Widgets incorporés](https://servicenow-prod.fluidtopics.net/gfj~_p5jp1QjojGSmCbqYA#c_NestedWidgets)** Incorporez un widget dans un modèle HTML, un script serveur ou un script client. * **[Créer une dépendance de widget](https://servicenow-prod.fluidtopics.net/sb63lsuAVLqvaFH81Sw7oQ)** 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. * **[Internationaliser un widget](https://servicenow-prod.fluidtopics.net/RKG1Hsb5xBS2Fu_Tz92frA)** Utilisez la syntaxe `${}` ou `gs.getMessage()` dans les champs Modèle HTML, Script client ou Script serveur d'un widget pour baliser les chaînes à traduire afin de localiser votre Portail de services contenu. * **[Remplacer un script de Catalogue de services formulaire par un widget](https://servicenow-prod.fluidtopics.net/9Sx7DYfU83~rHmbJxDV85A)** Vous pouvez utiliser des widgets pour Portail de services remplacer les macros d'interface utilisateur. Si votre Catalogue de services formulaire inclut une macro d'interface utilisateur qui fait référence à d'autres champs ou variables du formulaire, vous pouvez créer un widget contenant du code réutilisable et l'intégrer au Catalogue de services formulaire. Utilisez une syntaxe spéciale pour accéder à tous les champs de variables du formulaire. * **[Guide de dépannage des widgets](https://servicenow-prod.fluidtopics.net/R_eqb6Ou9~L~5hpM__3S9w)** Utilisez les outils suivants pour examiner et résoudre les comportements inattendus dans vos widgets personnalisés Portail de services . * **[Diagnostics des widgets](https://servicenow-prod.fluidtopics.net/rrio8phEBzDtb4pLxSZNcg)** Résolvez les problèmes de page Portail de services en identifiant les niveaux de personnalisation des widgets et en vérifiant le code du widget directement sur une page du portail.