Développement de l’interface utilisateur avec React
Développez une interface utilisateur (UI) avec la bibliothèque React pour créer une application full-stack en code source.
Vue d’ensemble du développement d’interface utilisateur avec React
React est un framework web standard permettant de créer des composants d’interface utilisateur que vous utilisez pour développer et rendre des interfaces utilisateur personnalisées. Un composant React est une fonction JavaScript autonome et réutilisable, telle qu’un bouton, et prend en charge les syntaxes JavaScript (JS/JSX) et TypeScript (TS/TSX). Pour des informations générales sur React, consultez la documentation React sur le site Web de l’react.dev.
Avec le ou ServiceNow SDK, vous pouvez utiliser React dans votre application incluse dans le périmètre pour créer une page d’interface utilisateur dans ServiceNow Fluent le ServiceNow IDE code. L’API ServiceNow Fluent de page d’interface utilisateur fait référence à un point d’entrée HTML (index.html) qui charge la page au point de terminaison fourni. Une fois l’application générée et installée sur une instance, les actifs statiques sont stockés dans les tables appropriées. Pour obtenir un exemple d’application React dans le code source, consultez le référentiel d’exemples du SDK ServiceNow GitHub . Pour commencer à utiliser React, sélectionnez l’un des modèles React lors de la création d’une application avec le ou ServiceNow SDK.ServiceNow IDE
Processus de développement de l’interface utilisateur
La liste suivante est une vue d’ensemble de haut niveau du processus de développement d’une application React avec le ServiceNow IDE ou ServiceNow SDK:
- Créez une application et sélectionnez l’un des modèles React.
L’application comprend les fichiers et répertoires requis pour le développement de React.
- Dans le répertoire src/client , ajoutez des actifs clients pour une interface utilisateur, tels qu’un point d’entrée HTML (index.html), des scripts clients et des feuilles de style. Le fichier index.html doit contenir la
<![CDATA[<script>balise ]]>comme point d’entrée JavaScript. - Définir une page de l’interface utilisateur [sys_ui_page] dans le code avec l’API de page d’interface ServiceNow Fluent utilisateur. Dans le fichier now.ts qui contient la définition de page d’interface utilisateur, vous importez le code HTML et vous y référez à partir de la propriété html de l’objet UiPage .
- Créez l’application pour exécuter un script de déploiement prédéfini qui regroupe les dépendances et empaquette les actifs clients dans le répertoire src/client avant d’exécuter le reste du processus de version. Le processus de version de déploiement standard et les modules d’extension sont utilisés comme bundler JavaScript par défaut.
Les actifs statiques sont générés dans le répertoire dist/stat.
- Installez l’application pour ajouter les ressources statiques aux fichiers d’application [sys_metadata] dans les tables appropriées : Ressource UX [sys_ux_lib_asset], Images [db_image] et Ressource thématique UX [sys_ux_theme_asset]. Ces tables prennent en charge l’ajout de fichiers en tant que pièces jointes.Important :Le développement de l’interface utilisateur avec React est une fonctionnalité expérimentale en raison de la façon dont le contenu est servi à partir d’une instance et des types de contenu et tables actuellement pris en charge.
Limitations
- Le code HTML de la page de l’interface utilisateur ne doit être modifié que dans le code source. Les modifications apportées au code HTML d’une page d’interface utilisateur [sys_ui_page] sur une instance ne sont pas synchronisées dans le code source et sont susceptibles d’entraîner un comportement involontaire.
- Les types de contenu audio, vidéo et WASM ne sont pas pris en charge.
- La taille maximale des pièces jointes chargées est limitée par la taille configurée avec com.glide.attachment.max_size la propriété système. Pour plus d'informations, consultez Maximum allowed attachment size [Updated in Security Center 1.3].
- Les chemins de sortie doivent être déterministes.
- Le préchargement de contenu lié à partir de HTML n’est pas pris en charge (
rel="preload »). - Les feuilles de style relatives liées à partir de HTML ne sont pas prises en charge (
rel="stylesheet »).Importez plutôt des feuilles de style dans le code (@import 'chemin/vers/feuille de style'). - Les importations relatives dans CSS ne sont pas prises en charge.
- Les modules CSS ne sont pas pris en charge.
- Seul l’acheminement de hachage est pris en charge par les pages de l’interface utilisateur.
- Le rendu côté serveur et les composants du serveur React ne sont pas pris en charge.
Développement de pages d’interface utilisateur avec React
Dans un fichier .now.ts du répertoire src/fluent , une page d’interface utilisateur est définie dans ServiceNow Fluent le code. Le HTML de la page est importé à partir du fichier index.html dans le répertoire src/client .
//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,
})Dans le fichier index.html , la <![CDATA[<script>balise ]]> fait référence au fichier main.jsx dans le répertoire src/client .
//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>
)
}Après la création et l’installation de l’application, vous pouvez ouvrir la page à partir du point de terminaison fourni dans l’objet UiPage (https://<instance>/<scope>_incident_manager.do), qui affiche une interface pour la création et la gestion des incidents.