Développement de widgets personnalisés

Développez des widgets personnalisés pour les portails à l’aide d’AngularJS, de Bootstrap et de l’API ServiceNow .

Avant de commencer

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.

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.

Si vous le souhaitez, vous pouvez créer sur le modèle Bootstrap en accédant aux composants Bootstrap.

Parties d’un widget

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.

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.

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.

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.

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.

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

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.

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.

Utilisation de l’éditeur de widget

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
  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é
  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
  Tirez parti du code existant en clonant et en modifiant un widget existant.
• Créer un widget
  Créez un widget pour créer un widget personnalisé à partir de zéro.
• Schéma de l’option de widget
  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
  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
  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
  Incorporez un widget dans un modèle HTML, un script serveur ou un script client.
• Créer une dépendance de widget
  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
  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
  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
  Utilisez les outils suivants pour examiner et résoudre les comportements inattendus dans vos widgets personnalisés Portail de services .
• Diagnostics des widgets
  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.