API de la page de l’interface utilisateur : ServiceNow Fluent

L’API de page d’interface utilisateur définit des pages d’interface utilisateur personnalisées [sys_ui_page] qui affichent des formulaires, des boîtes de dialogue, des listes et d’autres composants d’interface utilisateur.

Une page d’interface utilisateur s’affiche sous la forme d’une page Web et peut être ajoutée à un widget pour être utilisée dans des tableaux de bord. Pour en savoir plus sur les pages de l’interface utilisateur, reportez-vous à la section UI pages.

Vous pouvez développer une application React simple avec l’API UI Page. Dans le répertoire src/client , ajoutez des fichiers de contenu statique qui définissent le code HTML, le script client et le style de la page. À partir de l’objet UiPage , consultez le point d’entrée HTML (index.html) de la page. Pour plus d'informations, consultez Développement de l’interface utilisateur avec React.

Concepts associés

• ServiceNow Fluent

Objet UiPage

Créez une page d’interface utilisateur [sys_ui_page] pour une interface utilisateur personnalisée.

Tableau 1. Propriétés

Nom	Type	Description
$id	Chaîne ou numéro	Requis. ID unique pour l’objet de métadonnées. Lorsque vous créez l’application, cet ID est haché en une sys_id unique. Pour en savoir plus, consultez ServiceNow Fluent Constructions linguistiques. Format : Now.ID['chaîne' ou numéro]
endpoint	Chaîne	Requis. Point de terminaison permettant d’accéder à la page Web. La valeur du point de terminaison ne peut pas contenir d’espaces. Format : <scope>_<ui_page_name>.do
description	Chaîne	Description de l’interface utilisateur et de son objectif.
direct	Booléen	Marqueur indiquant s’il faut omettre le HTML, CSS et JavaScript standard pour une page d’interface utilisateur. Pour les pages de l’interface utilisateur React, définissez cette propriété sur vrai. Valeurs valides : vrai : omettez le HTML, CSS et JavaScript standard et fournissez un CSS et JavaScript personnalisés pour la page. false : incluez le HTML, CSS et JavaScript standard. Valeur par défaut : false
HTML	Chaîne	Le code HTML du corps qui définit ce qui est rendu lorsque la page est affichée. Il peut contenir du XHTML statique, du contenu généré dynamiquement défini comme Jelly ou des includes de script d’appel et des macros d’interface utilisateur. Cette propriété prend en charge un alias pour importer un fichier index.html pour le développement React, une référence à un autre fichier dans l’application qui contient du HTML ou du JavaScript en ligne. Remarque : Avec le développement React et le HTML importé, la propriété html de l’objet UiPage ne prend en charge que la synchronisation unidirectionnelle. Après avoir défini le code HTML d’une page d’interface utilisateur dans le code source, si le code HTML est modifié en dehors du code source, ces changements ne sont pas synchronisés et reflétés dans le code source. Format : Un alias pour importer le fichier de index.html à partir de la version précédente pour le développement d’interface utilisateur avec React. L’alias peut être n’importe quelle valeur et doit également être importé dans le fichier now.ts qui contient l’objet UiPage : import <alias> à partir de « path/to/index.html ». Pour utiliser le contenu textuel d’un autre fichier, reportez-vous à un fichier de l’application en utilisant le format suivant : Now.include('chemin/vers/fichier'). Pour plus d'informations, consultez ServiceNow Fluent Constructions linguistiques. Pour fournir du HTML en ligne, utilisez des chaînes de caractères ou des modèles littéraux pour plusieurs lignes de code : « HTML » ou « HTML ».
catégorie	Chaîne	Type de page d’interface utilisateur. Valeurs valides : général : la page est à usage général. Pages d’accueil : la page est utilisée comme page d’accueil. htmleditor : La page est utilisée pour insérer du contenu HTML. kb : La page est utilisée avec un Base de connaissances. cms : la page est utilisée avec le système de gestion de contenu (CMS). catalog : la page est utilisée avec Catalogue de services.
clientScript	Script	Un script qui s’exécute dans le navigateur, comme les fonctions appelées par des boutons. Ce script gère tout traitement côté client requis, comme la mise au point d’un champ ou d’autres fonctionnalités DHTML interactives après le chargement d’une page. Cette propriété prend en charge le JavaScript en ligne ou une référence à un autre fichier dans l’application qui contient un script. Les scripts clients de la page d’interface utilisateur sont déployés dans le navigateur au sein d’une <![CDATA[<script>balise ]]> , de sorte que le contenu puisse être défini de la même manière dans le champ HTML. La propriété clientScript peut être utilisée à la place pour définir ces scripts de manière concise afin de garantir la facilité de gestion Jelly et HTML. Format : Pour utiliser le contenu textuel d’un autre fichier, reportez-vous à un fichier de l’application en utilisant le format suivant : Now.include('chemin/vers/fichier'). Pour plus d'informations, consultez ServiceNow Fluent Constructions linguistiques. Pour fournir un script inline, utilisez des chaînes de caractères ou des modèles de lignes de code : « Script » ou « Script ».
processingScript	Script	Script qui s’exécute sur le serveur lorsque la page est soumise, ce qui est utile si votre page comporte un formulaire défini avec les balises <g :ui_form/> ou <g :form/> . Cette propriété prend en charge une fonction d’un module JavaScript, une référence à un autre fichier dans l’application qui contient un script ou JavaScript en ligne. Format : Pour les fonctions, utilisez le nom d’une fonction, d’une expression de fonction ou d’une fonction par défaut exportée à partir d’un module JavaScript et importez-la dans le fichier .now.ts . Pour en savoir plus sur les modules JavaScript, reportez-vous à la section Modules JavaScript et bibliothèques tierces. Pour utiliser le contenu textuel d’un autre fichier, reportez-vous à un fichier de l’application en utilisant le format suivant : Now.include('chemin/vers/fichier'). Pour plus d'informations, consultez ServiceNow Fluent Constructions linguistiques. Pour fournir un script inline, utilisez des chaînes de caractères ou des modèles de lignes de code : « Script » ou « Script ».
$meta	Objet	Métadonnées pour les métadonnées de l’application. Avec la propriété installMethod , vous pouvez mapper les métadonnées d’application à un répertoire de sortie qui ne se charge que dans des circonstances spécifiques. $meta: {       installMethod: 'String' } Valeurs valides pour installMethod : demo : génère les métadonnées de l’application dans le répertoire metadata/unload.demo à installer avec l’application lorsque l’option Charger les données de démonstration est sélectionnée. première installation : génère les métadonnées de l’application dans le répertoire metadata/unload à installer uniquement la première fois qu’une application est installée sur une instance.

Dans cet exemple de développement d’interface utilisateur avec React, le code HTML de la page est importé 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 , qui contient le code du composant.

//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>