Widget erstellen, das eine ServiceNow-UI-Seite anzeigt

Sie können eine ServiceNow-UI-Seite erstellen, auf der eine Webseite angezeigt wird. Sie können diese UI-Seite dann einem Widget hinzufügen, das zu Dashboards hinzugefügt werden kann.

Vorbereitungen

Erforderliche Rolle: admin

Warum und wann dieser Vorgang ausgeführt wird

Eine UI-Seite ist eine ServiceNow-Seite, die keine Liste oder ein Formular ist. Nicht jede UI-Seite passt in ein Widget. Einige UI-Seiten, z. B. externe Website-Widgets oder Mini-Widgets, werden nicht ordnungsgemäß angezeigt, wenn sie in einem Dashboard platziert werden.

Weitere Informationen zum Erstellen einer UI-Seite, ohne eine Framework-Seitenvorlage zu verwenden, finden Sie im Blog-Post Making a UI page without using the framework page template (UI-Seite ohne Framework-Seitenvorlage erstellen) eines Entwicklers in der ServiceNow-Community.

Hinweis:

Diese Funktionalität erfordert Kenntnisse in JavaScript.

Prozedur

1. Erstellen oder suchen Sie eine ServiceNow-UI-Seite, die Sie als Widget anzeigen möchten.
   Notieren Sie sich den Namen dieser UI-Seite, der in Schritt 4 verwendet werden soll. Der Name der UI-Seite ist der Wert des Namensfelds im Formular, in dem Sie den Inhalt der UI-Seite definieren.
2. Navigieren zu System-UI > Widgets und klicken Sie auf Neu.
   Widgets-Datensätze sind Widget-Kategoriedatensätze, keine Datensätze für einzelne Widgets. Wenn Sie dem Dashboard ein Widget hinzufügen, wählen Sie zuerst die Kategorie und dann das Widget aus. Das in Schritt 4 angegebene JavaScript enthält die Liste der Widgets, die in diese Kategorie aufgenommen werden sollen.
3. Füllen Sie folgende Felder aus.

   Feld	Beschreibung
   Name	Der Name dieser Widget-Kategorie. Wählen Sie diese Kategorie aus, wenn Sie ihre Widgets einem Dashboard hinzufügen.
   Renderer-Typ	Wählen Sie JavaScript aus.
   Aktiv	Löschen Sie dieses Feld, um zu verhindern, dass das Widget zum Hinzufügen zu Dashboards verfügbar ist.
   Rollen	Wählen Sie aus, welche Rollen diese Kategorie beim Hinzufügen von Widgets zu Dashboards anzeigen können. Wenn Sie keine Rollen auswählen, können alle Rollen die Kategorie sehen.

4. Fügen Sie den folgenden JavaScript-Code im Feld Skript hinzu, und nehmen Sie dabei die Ersetzungen wie angegeben vor.
   Die Rückgabeanweisung enthält die in dieser Widget-Kategorie aufgeführten Widgets.

   Hinweis:

   Das Code-Fragment in diesem Schritt funktioniert in nicht-bereichsbezogenen Anwendungen. Verwenden Sie das Code-Fragment in Schritt 5 für bereichsbezogene Anwendungen.

   widget_name	Der Name des Widgets, den der Benutzer in der Widget-Auswahl auswählt, wenn er das Widget einem Dashboard hinzufügt. Diese Zeichenfolge wird auch in der Widget-Kopfzeile angezeigt. Dieser Wert ist der Name, den Sie in Schritt 3 konfigurieren.
   UI_page_name	Der Name der UI-Seite aus Schritt 1, die im Widget angezeigt werden soll.

   function sections() {
       return {
           'widget_name': { 'uiPageName' : 'UI_page_name'},
           'widget_name2': {'uiPageName': 'UI_page_name_2'}
       };
   }
   
   function render() {
       var uiPageName = renderer.getPreferences().get("uiPageName");
       return renderer.getRenderedPage(uiPageName);
   }
   
   function getEditLink() {
       var uiPageName = renderer.getPreference('uiPageName');
       return 'sys_ui_page.do?sysparm_query=' + encodeURIComponent('name=' + uiPageName);
   }

5. Wahlweise: Verwenden Sie dieses Codebeispiel für bereichsbezogene Anwendungen:

   function sections() {
       return {
       'Widget': {
       'type': 'widgetname'
       }
       };
   }
   
   function render() {
       var scope = gs.getCurrentScopeName();
       scope = (scope == "rhino.global" ? "" : scope + "_");
       var page = renderer.getPreference('type');
       return renderer.getRenderedPage(scope + page);
   }
   
   function getEditLink() {
       var scope = gs.getCurrentScopeName();
       scope = (scope == "rhino.global" ? "" : scope + "_");
       var page = renderer.getPreference('type');
       return "sys_ui_page.do?sysparm_query=name=" + scope + page;
   }

6. Klicken Sie auf Absenden.

Nächste Maßnahme

Bearbeiten eines reaktionsfähigen Dashboards