UI-Seiten-API – ServiceNow Fluent
Die UI-Seiten-API definiert anwenderdefinierte Anwenderoberflächenseiten [sys_ui_page], die Formulare, Dialogfelder, Listen und andere UI-Komponenten anzeigen.
Eine UI-Seite wird als Webseite angezeigt und kann einem Widget zur Verwendung in Dashboards hinzugefügt werden. Allgemeine Informationen zu UI-Seiten finden Sie unter UI pages.
Sie können mit der UI-Seiten-API eine einfache React-Anwendung entwickeln. In src/Client Verzeichnis, fügen Sie statische Inhaltsdateien hinzu, die HTML, Clientskript und Stil der Seite definieren. Von UiSeite Objekt, siehe HTML-Einstiegspunkt der Seite ( index.html ). Weitere Informationen finden Sie unter Anwenderoberflächenentwicklung mit React.
UiPage-Objekt
Erstellen Sie eine UI-Seite [sys_ui_page] für eine anwenderdefinierte Anwenderoberfläche.
| Name | Typ | Beschreibung |
|---|---|---|
| $ID | Zeichenfolge oder Zahl | Erforderlich. Eine eindeutige ID für das Metadatenobjekt. Wenn Sie die Anwendung erstellen, wird diese ID in eine eindeutige sys_ID gehasht Weitere Informationen finden Sie unter ServiceNow Fluent Sprachkonstrukte. Format: |
| endpoint | Zeichenfolge | Erforderlich. Der Endpunkt für den Zugriff auf die Webseite. Der Endpunktwert darf keine Leerzeichen enthalten. Format: |
| Beschreibung | Zeichenfolge | Eine Beschreibung der Anwenderoberfläche und ihres Zwecks. |
| direkt | Boolean | Kennzeichnung, die angibt, ob Standard-HTML, CSS und JavaScript für eine UI-Seite ausgelassen werden sollen. Legen Sie für React-UI-Seiten diese Eigenschaft auf fest Wahr .Gültige Werte:
Standardwert: false |
| HTML | Zeichenfolge | Der HTML-Textcode, der definiert, was gerendert wird, wenn die Seite angezeigt wird. Es kann entweder statische XHTML-Datei, dynamisch generierte Inhalte, die als Jelly definiert sind, oder Skripteinbindungen und UI-Makros aufrufen. Diese Eigenschaft unterstützt einen Alias zum Importieren von index.html Datei für die React-Entwicklung, ein Verweis auf eine andere Datei in der Anwendung, die HTML oder Inline-JavaScript enthält. Hinweis: Mit React-Entwicklung und importiertem HTML wird die html Eigenschaft von UiSeite Das Objekt unterstützt nur die einseitige Synchronisierung. Wenn die HTML-Datei einer UI-Seite im Quellcode definiert wurde, werden diese Änderungen nicht synchronisiert und im Quellcode berücksichtigt, wenn die HTML außerhalb des Quellcodes geändert wird. Format:
|
| Kategorie | Zeichenfolge | Der Typ der UI-Seite. Gültige Werte:
|
| clientScript | Skript | Ein Skript, das im Browser ausgeführt wird, z. B. Funktionen, die von Schaltflächen aufgerufen werden. Dieses Skript verarbeitet alle erforderlichen clientseitigen Verarbeitungen, die erforderlich sind, z. B. das Festlegen des Fokus auf ein Feld oder andere interaktive DHTML-Funktionen, nachdem eine Seite geladen wurde. Diese Eigenschaft unterstützt Inline-JavaScript oder einen Verweis auf eine andere Datei in der Anwendung, die ein Skript enthält. Client-Skripts für die UI-Seite werden im Browser in bereitgestellt Format:
|
| VerarbeitungSkript | Skript | Ein Skript, das auf dem Server ausgeführt wird, wenn die Seite übermittelt wird. Dies ist nützlich, wenn für Ihre Seite ein Formular mit definiert ist <g:ui_form/> Oder <g:form/> Tags. Diese Eigenschaft unterstützt eine Funktion aus einem JavaScript-Modul, einen Verweis auf eine andere Datei in der Anwendung, die ein Skript enthält, oder Inline-JavaScript.Format:
|
| $Meta | Objekt | Metadaten für die Anwendungsmetadaten. Mit InstallMethod Eigenschaft können Sie die Anwendungsmetadaten einem Ausgabeverzeichnis zuordnen, das nur unter bestimmten Umständen geladen wird. Gültige Werte für InstallMethod :
|
In diesem Beispiel der UI-Entwicklung mit React wird die HTML-Datei der Seite aus importiert index.html Datei in src/Client Verzeichnis.
//incident-manager.now.ts
import '@servicenow/sdk/global'
import { UiPage } from '@servicenow/sdk/core'
import incidentPage from '../../client/index.html'
UiPage({
$id: Now.ID['incident-manager-page'],
endpoint: '<scope>_incident_manager.do',
description: 'Incident Response Manager UI Page',
category: 'general',
html: incidentPage,
direct: true,
})In index.html Datei, ]]>Tag bezieht sich auf Haupt.jsx Datei in src/Client Verzeichnis, das den Komponentencode enthält.
//index.html
<html>
<head>
<title>Incident Response Manager</title>
<!-- Initialize globals and Include ServiceNow's required scripts -->
<sdk:now-ux-globals></sdk:now-ux-globals>
<!-- Include your React entry point -->
<script src="./main.jsx" type="module"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>