Anwenderoberflächenentwicklung mit React
Entwickeln Sie eine Anwenderoberfläche (UI) mit der React-Bibliothek, um eine vollständige Stack-Anwendung im Quellcode zu erstellen.
Übersicht über die UI-Entwicklung mit React
React ist ein Webframework nach Branchenstandard zum Erstellen von UI-Komponenten, die Sie zum entwickeln und Rendern anwenderdefinierter Anwenderoberflächen verwenden. Eine React-Komponente ist eine in sich geschlossene, wiederverwendbare JavaScript-Funktion, z. B. eine Schaltfläche, und unterstützt die Syntax von JavaScript (JS/JSX) und TypeScript (TS/TSX). Allgemeine Informationen zu React finden Sie unter React-Dokumentation Auf der react.de-V-Website.
Mit ServiceNow IDEOder ServiceNow SDK, Sie können React in Ihrer bereichsbezogenen Anwendung verwenden, um eine UI-Seite in zu erstellen ServiceNow FluentCode. Die ServiceNow FluentUI-Seiten-API bezieht sich auf einen HTML-Einstiegspunkt ( index.html ), die die Seite am angegebenen Endpunkt lädt. Nach dem Erstellen und Installieren der Anwendung auf einer Instanz werden die statischen Assets in den entsprechenden Tabellen gespeichert. Ein Beispiel für eine React-Anwendung im Quellcode finden Sie unter ServiceNow-SDK-Beispiele GitHubRepository. Um mit React zu beginnen, wählen Sie beim Erstellen einer Anwendung mit eine der React-Vorlagen aus ServiceNow IDEOder ServiceNow SDK.
UI-Entwicklungsprozess
Die folgende Liste bietet eine allgemeine Übersicht über den Prozess zur Entwicklung einer React-Anwendung mit ServiceNow IDEOder ServiceNow SDK:
- Erstellen Sie eine Anwendung, und wählen Sie eine der React-Vorlagen aus.
Die Anwendung enthält die Dateien und Verzeichnisse, die für die React-Entwicklung erforderlich sind.
- In src/Client Verzeichnis, fügen Sie Client-Assets für eine Anwenderoberfläche hinzu, z. B. einen HTML-Einstiegspunkt ( index.html ), Client-Skripts und Stylesheets. Die index.html Datei muss enthalten
]]>Tag als JavaScript-Einstiegspunkt. - Definieren Sie eine UI-Seite [sys_ui_page] in Code mit ServiceNow FluentUI-Seiten-API. In Jetzt.TS Datei, die die UI-Seitendefinition enthält. Sie importieren die HTML und verweisen auf sie aus html Eigenschaft von UiSeite Objekt.
- Erstellen Sie die Anwendung, um ein Pre-Build-Rollup-Skript auszuführen Das Abhängigkeiten bündelt und die Client-Assets in verpackt src/Client Verzeichnis, bevor der Rest des Build-Prozesses ausgeführt wird. Der standardmäßige Rollup-Build-Prozess und Plugins werden als standardmäßiger JavaScript-Bundler verwendet.
Statische Assets werden an ausgegeben verteilung/statisch Verzeichnis.
- Installieren Sie die Anwendung, um die statischen Assets den Anwendungsdateien [sys_metadata] in den entsprechenden Tabellen hinzuzufügen: UX-Asset [sys_ux_lib_Asset], Images [DB_image] und UX-Themenobjekt [sys_ux_Theme_Asset]. Diese Tabellen unterstützen das Hinzufügen von Dateien als Anhänge.Wichtig:Die UI-Entwicklung mit React ist eine experimentelle Funktion aufgrund der Art und Weise, wie Inhalte von einer Instanz bereitgestellt werden, und der derzeit unterstützten Inhaltstypen und Tabellen.
Einschränkungen
- Die HTML-Datei der UI-Seite darf nur im Quellcode geändert werden. Änderungen am HTML einer UI-Seite [sys_ui_page] in einer Instanz werden nicht mit dem Quellcode synchronisiert und führen wahrscheinlich zu unbeabsichtigtem Verhalten.
- Inhaltstypen „Audio“, „Video“ und „WASM“ werden nicht unterstützt.
- Die maximale Dateigröße hochgeladener Anhänge wird durch die mit konfigurierte Größe begrenzt com.glide.attachment.max_sizeSystemeigenschaft. Weitere Informationen finden Sie unter Maximum allowed attachment size [Updated in Security Center 1.3].
- Ausgabepfade müssen deterministisch sein.
- Das Vorladen von Inhalten, die über HTML verknüpft sind, wird nicht unterstützt (
bez.="vorladen"). - Relative Stylesheets, die aus HTML verknüpft sind, werden nicht unterstützt (
bez.="Stylesheet"). Importieren Sie stattdessen Stylesheets in Code (@Import „Pfad/zu/Stylesheet“). - Relative Importe in CSS werden nicht unterstützt.
- CSS-Module werden nicht unterstützt.
- Nur Hash-Weiterleitung wird von UI-Seiten unterstützt.
- Serverseitiges Rendern und React-Serverkomponenten werden nicht unterstützt.
UI-Seitenentwicklung mit React
In A .Jetzt.TS Datei in src/Fluent Verzeichnis, eine UI-Seite ist in definiert ServiceNow FluentCode. Die HTML der Seite wird 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.
//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>//main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './app'
const rootElement = document.getElementById('root')
if (rootElement) {
ReactDOM.createRoot(rootElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
)
}Nach dem Erstellen und Installieren der Anwendung können Sie die Seite über den in bereitgestellten Endpunkt öffnen UiSeite Objekt ( https://<instance>/<scope>_Incident_Manager.do ), die eine Schnittstelle zum Erstellen und Verwalten von Incidents anzeigt.