Entwicklung anwenderdefinierter Widgets

  • Freigeben Version: Zurich
  • Aktualisiert 31. Juli 2025
  • 3 Minuten Lesedauer

    • Entwickeln Sie anwenderdefinierte Widgets für Portale mit AngularJS, Bootstrap und ServiceNow API.

    Bevor Sie beginnen

    Um Widgets zu entwickeln, brauchen Sie ServiceNow-API-Erfahrung zum:
    • Ausführen von Datensatzabfragen auf dem Server.
    • Erstellen und Aktualisieren von Datensätzen.
    Sie benötigen AngularJS-Erfahrung zum:
    • Binden Sie Variablen an Client-Controller.
    • Zugreifen auf Serverobjekte in einem Widget.
    • Sammeln von Benutzereingaben.

    Optional können Sie auf der Bootstrap-Vorlage aufbauen, indem Sie auf Bootstrap-Komponenten zugreifen.

    Teile eines Widgets

    Wie Angular-Direktiven führen Widgets ein bestimmtes Verhalten auf einer Serviceportal-Seite aus. Ein Widget enthält obligatorische und optionale Skriptkomponenten.

    HTML-Vorlage

    Eine obligatorische Widgetkomponente.

    Die HTML-Vorlage erfordert Kenntnis von AngularJS, um Daten anzuzeigen und zu erfassen. Verwenden Sie die HTML-Vorlage zum:

    • Rendern der dynamischen Ansicht, die ein Benutzer im Browser sieht, unter Verwendung von Informationen des Modells und des Controllers.
    • Binden Sie Clientskriptvariablen an Ihr Markup.
    • Sammeln Sie Daten vom Endbenutzer.
    Clientskript

    Eine obligatorische Widgetkomponente.

    Ein Clientskript erfordert Kenntnis von der ServiceNow-API und AngularJS zum Erstellen eines Client-Controllers. Verwenden Sie das Clientskript zum:

    • Zuordnen von Serverdaten von JavaScript- und JSON-Objekten zu Clientobjekten.
    • Verarbeiten von Daten, bevor Sie sie rendern.
    • Übertragen von Daten an die HTML-Vorlage.
    • Übertragen von die Benutzereingaben und Daten zur Verarbeitung an den Server.
    Serverskript

    Eine obligatorische Widgetkomponente.

    Ein Serverskript erfordert Kenntnis von der ServiceNow-API zum Arbeiten mit Datensatzdaten. Verwenden Sie das Serverskript zum:

    • Festlegen des Anfangsstatus des Widgets.
    • Senden von Datensatzdaten mit dem Widget-Clientskript, mithilfe der Daten-Variablen.
    • Ausführen von serverseitigen Abfragen.
    Linkfunktion

    Eine optionale Widgetkomponente.

    Die Link-Funktion erfordert Kenntnisse in AngularJS. Verwenden Sie eine Verknüpfungsfunktion, um DOM direkt zu bearbeiten.

    Optionsschema

    Eine optionale Widgetkomponente.

    Erlaubt einem Serviceportal-Admin das Widget zu konfigurieren. Verwenden Sie das Optionsschema zum:

    • Angeben eines Parameters für ein Widget.
    • Zulassen des Definierens von Instanzoptionen für eine Widget-Instanz durch Admin-Benutzer.
    • Entwickeln eines flexiblen, wiederverwendbaren Widgets.
    Angular Provider

    Eine optionale Widgetkomponente.

    Angular Provider erfordern Kenntnisse über AngularJS. Verwenden Sie Angular Provider zum:

    • Aufrechterhalten der Synchronisierung von Widgets, beim Ändern von Datensätzen bzw. Filtern.
    • Teilen von Kontext zwischen Widgets.
    • Beibehalten und Fortbestehen lassen des Status.
    • Erstellen Sie wiederverwendbare Verhaltensweisen und UI-Komponenten, und fügen Sie sie in mehrere Widgets ein.
    Abhängigkeiten

    Eine optionale Widgetkomponente.

    Eine Widgetabhängigkeit ist eine externe Ressource, die von Ihrem Widget verwendet wird, beispielsweise JavaScript- oder CSS-Dateien.

    Globale Objekte in Widgets

    Wenn ein Widget zum ersten Mal auf einer Seite gerendert wird, wird das Serverskript zuerst ausgeführt und greift auf drei globale Objekte zu: Eingabe, Optionen und Daten. Weil die Eingabe-Variable ein Datenobjekt ist, das vom Clientskript gesendet wird, ist diese Variable bei der Erstinitialisierung nicht definiert.

    Verfügbare Variablen in Server- und Client-Skript global

    Wenn ein Widget zum ersten Mal instanziiert wird, führt das Serverskript Folgendes durch:

    1. Initialisiert ein leeres Daten-Objekt.
    2. Initialisiert das Eingabe-Objekt mit beliebigen Daten, die vom Client-Controller gesendet werden, bzw. das Optionen-Objekt mit allen Daten, die zum Initialisieren des Widgets verwendet werden.
    3. Sendet das Daten-Objekt an den Client-Controller als JSON.

    Das Clientskript:

    1. Greift auf das Server-Daten.Objekt mit c.data zu.

      Hinweis:
      Standardmäßig verwenden Widgets die c-Variable zur Darstellung der Controller-Instanz mit Syntax Controller als. Sie können diese Variable beim Erstellen oder Klonen von Widgets ändern.

    2. Verwendet server.update() um Änderungen am Datenmodell zu veröffentlichen. Diese Methode aktualisiert das Serverskript mit dem Eingabe-Objekt.

      Hinweis:
      Nach dem Aufruf von server.update() wird das Clientskript-Daten-Objekt automatisch vom Serverskript-Daten-Objekt überschrieben.
    3. Verwendet c.options zum Zugriff auf die Werte, die zum Aufrufen des Widgets auf dem Server verwendet werden. Dieses Objekt ist schreibgeschützt.

    Verwenden des Widget-Editors

    Wenn Sie ein Widget erstellen, wird ein Datensatz in der Tabelle sp_widget erstellt. Sie können jedoch den Widget-Editor in der Serviceportal-Konfiguration als Ihre Skriptumgebung verwenden. Der Widget-Editor ist eine ganzseitige Anwendung, die einer IDE ähnelt. Sie können die zu bearbeitenden Teile des Widgets anzeigen und den Rest ausblenden, während Sie eine Vorschau der Änderungen in Echtzeit anzeigen.

    Hinweis:
    Für serverseitige Skripts können Sie den JavaScript-Modus ECMAScript 2021 (ES12) aktivieren, wenn Ihre Anwendung den ES5-Standardmodus oder den Kompatibilitätsmodus verwendet. Skripts in Anwendungen, bei denen der JavaScript-Modus auf ECMAScript 2021 (ES12) festgelegt ist, verwenden standardmäßig ECMAScript 2021 (ES12). Weitere Informationen finden Sie unter Turn on ECMAScript 2021 (ES12) mode for a script.

    Widget-Editor-IDE