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écutez des requêtes d’enregistrement sur le serveur.
• Créer et mettre à jour des enregistrements.

Vous avez besoin d’expérience AngularJS pour :

• Lier les variables aux contrôleurs clients.
• Accéder aux objets serveur dans un widget.
• Collectez les entrées de l’utilisateur.

Si vous le souhaitez, vous pouvez vous appuyer sur le modèle Bootstrap en accédant aux composants Bootstrap. Portail de services utilise la version 3.3.6 de 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 une connaissance 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.
• Collecter des données auprès de l’utilisateur final.

Script client

Un composant de widget obligatoire.

Un script client nécessite de connaître à la fois l’API et AngularJS ServiceNow 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.
• Traitez les données avant de les afficher.
• Transmettez les données au modèle HTML.
• Transmettez l’entrée de l’utilisateur et les données au serveur pour traitement.

Script serveur

Un composant de widget obligatoire.

Un script de serveur nécessite de connaître l’API pour fonctionner avec des ServiceNow données d’enregistrement. Utilisez le script serveur pour :

• Définissez l’état initial du widget.
• Envoyez les données d’enregistrement au script client du widget à l’aide de la variable de données .
• Exécuter des requêtes côté serveur.

Fonction de lien

Un composant de widget facultatif.

La fonction de lien nécessite une connaissance d’AngularJS. Utilisez une fonction de lien pour manipuler directement les DOM.

Schéma de l’option

Un composant de widget facultatif.

Permet à un Portail de services administrateur de configurer un widget. Utilisez le schéma d’option 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

Un composant de widget facultatif.

Les fournisseurs Angular doivent connaître AngularJS. Utilisez les fournisseurs Angular pour :

• synchronisez les widgets lors du changement d’enregistrements ou de filtres.
• Contexte de partage entre les widgets.
• Conserver et conserver l’état.
• Créez des comportements et des composants d’interface utilisateur réutilisables et injectez-les dans plusieurs widgets.

Dépendances

Un composant de widget facultatif.

Une dépendance de widget est une ressource externe utilisée par votre widget, telle que 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é à partir du script client, cette variable n’est pas définie lors de l’initialisation initiale.

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 toutes 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 apportées au 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 remplacé 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 Configuration comme Portail de services 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.

• Recommandations pour le développement de widgets
  Lorsque vous développez des widgets personnalisés, gardez ces recommandations à l’esprit 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 manière unique chaque widget qu’ils ajoutent à une page. Utilisez l’option Schema pour définir les paramètres de votre widget.
• Référence API widget
  Portail de services inclut des API côté client et côté serveur à utiliser dans les scripts client et serveur de widget.
• Réutiliser des composants avec des fournisseurs d’angle
  Les fournisseurs Angular 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 Angular au lieu de surcharger vos contrôleurs clients avec des données persistantes et une logique supplémentaire. Avec les fournisseurs Angular, vous pouvez conserver les données pendant toute la durée de vie de vos Portail de services widgets et les réutiliser dans plusieurs widgets.
• Widgets incorporés
  Incorporez un widget dans le modèle HTML, le script serveur ou le script client.
• Créer une dépendance de widget
  Dans Service Portal, 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 remplacer les macros d’interface Portail de services 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 pour héberger du code réutilisable et l’incorporer dans le Catalogue de services formulaire. Utilisez une syntaxe spéciale pour accéder à tous les champs 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.