---
sourceDocument: Analytics der Xanadu-Plattform
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/de-DE/xanadu/now-intelligence

 Release :

    - xanadu

ft:locale :

    - de-DE

ft:publication_title :

    - Analytics der Xanadu-Plattform

ft:clusterId :

    - par

bundleId :

    - par

workflow :

    - Platform


---

# Widget erstellen, das eine ServiceNow-UI-Seite anzeigt

# Widget erstellen, das eine ServiceNow-UI-Seite anzeigt {#ariaid-title1}

* Freigeben Version: Xanadu
* 
* Aktualisiert 1. August 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 Minuten Lesedauer

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](https://community.servicenow.com/community?id=community_blog&sys_id=e26e22eddbd0dbc01dcaf3231f96196e) (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-UIWidgets 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. |
   |-|-|

   {#create_widget_displays_webpage__choicetable_qhk_xbf_cw}
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. |

   {#create_widget_displays_webpage__simpletable_nph_gcf_cw}

       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](https://servicenow-prod.fluidtopics.net/B7DmMLQ5UZ5SwoIkJPoPFA "Sie können den Inhalt eines Dashboards bearbeiten, einschließlich Performance Analytics -Widgets, Berichte und Registerkarten. Da Dashboards freigegeben sind, werden alle vorgenommenen Änderungen global angewendet.")