Reactによるユーザーインターフェース開発
React ライブラリを使用してユーザーインターフェイス (UI) を開発し、ソースコードでフルスタックアプリケーションを構築します。
React を使用した UI 開発の概要
React は、カスタムユーザーインターフェイスの開発とレンダリングに使用する UI コンポーネントを構築するための業界標準の Web フレームワークです。React コンポーネントは、ボタンなどの自己完結型の再利用可能な JavaScript 関数であり、JavaScript (JS/JSX) および TypeScript (TS/TSX) 構文をサポートします。React に関する一般的な情報については、react.dev Web サイトの React ドキュメント を参照してください。
ServiceNow IDE または ServiceNow SDK を使用すると、スコープ対象のアプリケーションで React を使用して、ServiceNow Fluentコードで UI ページを作成できます。ServiceNow Fluent UI ページ API は、指定されたエンドポイントでページをロードする HTML エントリポイント (index.html) を参照します。インスタンスでアプリケーションをビルドしてインストールすると、静的資産が適切なテーブルに保存されます。ソースコード内の React アプリケーションの例については、 ServiceNow SDK サンプル GitHub リポジトリを参照してください。React の使用を開始するには、 ServiceNow IDE または ServiceNow SDK でアプリケーションを作成するときに、いずれかの React テンプレートを選択します。
UI 開発プロセス
次のリストは、 ServiceNow IDE または ServiceNow SDKで React アプリケーションを開発するプロセスの大まかな概要です。
- アプリケーションを作成し、いずれかの React テンプレートを選択します。
アプリケーションには、React 開発に必要なファイルとディレクトリが含まれています。
- src/client ディレクトリに、HTML エントリーポイント (index.html)、クライアントスクリプト、スタイルシートなど、ユーザーインターフェイスのクライアント資産を追加します。index.htmlファイルには、JavaScript エントリーポイントとして
<![CDATA[<script>]]>タグが含まれている必要があります。 - ServiceNow Fluent UI ページ API を使用して、コードで UI ページ [sys_ui_page] を定義します。UI ページ定義を含む now.ts ファイルで、HTML をインポートし、UiPage オブジェクトの html プロパティから参照します。
- ビルド前のロールアップスクリプトを実行するアプリケーションをビルドします 依存関係をバンドルしてクライアント資産を src/client ディレクトリにパッケージ化してから、残りのビルドプロセスを実行します。標準のロールアップビルドプロセスとプラグインがデフォルトの JavaScript バンドラーとして使用されます。
静的資産は dist/static ディレクトリに出力されます。
- アプリケーションをインストールして、該当するテーブル (UX 資産 [sys_ux_lib_asset]、イメージ [db_image]、および UX テーマ資産 [sys_ux_theme_asset] テーブル) のアプリケーションファイル [sys_metadata] に静的資産を追加します。これらのテーブルは、ファイルを添付ファイルとしての追加をサポートしています。重要:React を使用した UI 開発は、インスタンスからのコンテンツの提供方法と、現在サポートされているコンテンツタイプとテーブルにより、実験的な機能です。
制限事項
- UI ページの HTML は、ソースコードでのみ変更する必要があります。インスタンス上の UI ページ [sys_ui_page] の HTML への変更はソースコードに同期されず、意図しない動作が発生する可能性があります。
- オーディオ、ビデオ、および WASM コンテンツタイプはサポートされていません。
- アップロードされた添付ファイルの最大ファイルサイズは、 com.glide.attachment.max_size システムプロパティで構成されたサイズによって制限されます。詳細については、「Maximum allowed attachment size [Updated in Security Center 1.3]」を参照してください。
- 出力パスは確定的である必要があります。
- HTML からリンクされたコンテンツのプリロードはサポートされていません (
rel="preload")。 - HTML からリンクされた相対スタイルシートはサポートされていません (
rel="stylesheet")。代わりにスタイルシートをコードにインポートします (「path/to/style-sheet」@import)。 - CSS での相対インポートはサポートされていません。
- CSS モジュールはサポートされていません。
- UI ページでは、ハッシュルーティングのみがサポートされています。
- サーバーサイドレンダリングと React サーバーコンポーネントはサポートされていません。
React を使用した UI ページ開発
src/fluent ディレクトリの .now.ts ファイルでは、UI ページがServiceNow Fluentコードで定義されています。ページの HTML は、src/client ディレクトリの index.html ファイルからインポートされます。
//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,
})index.html ファイルでは、<![CDATA[<script>]]> タグは src/client ディレクトリ内の main.jsx ファイルを参照します。
//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>
)
}アプリケーションをビルドしてインストールした後、 UiPage オブジェクト (https://<instance>/<scope>_incident_manager.do) で指定されたエンドポイントからページを開くことができます。これにより、インシデントを作成および管理するためのインターフェイスが表示されます。