Développement de widgets personnalisés

  • Rversion finale: Zurich
  • Mis à jour 31 juil. 2025
  • 4 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

    Pour développer des widgets, vous devez avoir de ServiceNow l’expérience en API pour :
    • Exécutez des requêtes d’enregistrement sur le serveur.
    • Créez et mettez à jour des enregistrements.
    Vous avez besoin de l’expérience AngularJS pour :
    • Lier les variables aux contrôleurs clients.
    • Accéder aux objets du serveur dans un widget.
    • Recueillez les entrées de l’utilisateur.

    Vous pouvez éventuellement vous appuyer 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.
    • Collectez les données de l’utilisateur final.
    Script client

    Un composant de widget obligatoire.

    Un script client nécessite une connaissance 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.
    • Traitez les données avant de les afficher.
    • 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 une connaissance de l’API pour travailler avec les ServiceNow données d’enregistrement. Utilisez le script serveur pour :

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

    Composant de widget facultatif.

    La fonction de liaison nécessite une 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 de l’option pour :

    • Spécifiez les paramètres d’un widget.
    • Autorisez les utilisateurs administrateurs à définir des 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 Angular nécessitent des connaissances sur AngularJS. Utilisez des fournisseurs d’angle pour :

    • Synchronisez les widgets lorsque vous modifiez des enregistrements ou des filtres.
    • Partager le contexte entre les widgets.
    • Maintenir et conserver l’état.
    • Créez des comportements et des composants d’interface utilisateur réutilisables et 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, 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é depuis le script client, cette variable n’est pas définie lors de sa première initialisation.

    Variables disponibles dans le script serveur et client global

    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 changer 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 input .

      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 du 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 scripting. 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.

    Remarque :
    Pour les scripts côté serveur, vous pouvez activer le mode JavaScript ECMAScript 2021 (ES12) si votre application utilise le mode ES5 Standards ou le mode Compatibilité. Les scripts dans les applications dont le mode JavaScript est défini sur ECMAScript 2021 (ES12) utilisent ECMAScript 2021 (ES12) par défaut. Pour plus d'informations, consultez Turn on ECMAScript 2021 (ES12) mode for a script.

    IDE de l’éditeur de widget