UI ページ API - ServiceNow Fluent

  • リリースバージョン: Zurich
  • 更新日 2025年07月31日
  • 所要時間：8分

    • UI ページ API は、フォーム、ダイアログ、リスト、およびその他の UI コンポーネントを表示するカスタムユーザーインターフェイス (UI) ページ [sys_ui_page] を定義します。

    UI ページは Web ページとして表示され、ダッシュボードで使用するためにウィジェットに追加できます。UI ページの一般的な情報については、「 UI pages」を参照してください。

    UI ページ API を使用して簡単な React アプリケーションを開発できます。src/client ディレクトリに、ページの HTML、クライアントスクリプト、およびスタイルを定義する静的コンテンツファイルを追加します。UiPage オブジェクトから、ページの HTML エントリーポイント (index.html) を参照します。詳細については、「Reactによるユーザーインターフェース開発」を参照してください。

    UiPage オブジェクト

    カスタムユーザーインターフェイスの UI ページ [sys_ui_page] を作成します。

    表 : 1. プロパティ
    名前 タイプ 説明
    $id 文字列または数値 必須。メタデータオブジェクトの一意の ID。アプリケーションをビルドすると、この ID は一意のsys_idにハッシュされます。詳細については、「ServiceNow Fluent 言語構成」を参照してください。

    形式: Now.ID['string' or number]
    endpoint 文字列 必須。Web ページにアクセスするためのエンドポイント。エンドポイント値にスペースを含めることはできません。

    形式: <scope>_<ui_page_name>.do
    説明 文字列 ユーザーインターフェイスとその目的の説明。
    直接 ブール UI ページで標準の HTML、CSS、および JavaScript を省略するかどうかを示すフラグ。React UI ページの場合は、このプロパティを true に設定します。
    有効な値：
    • true:標準の HTML、CSS、および JavaScript を省略し、ページにカスタム CSS と JavaScript を提供します。
    • false:標準の HTML、CSS、および JavaScript を含めます。

    デフォルト値：false
    html 文字列 ページが表示されるときに何をレンダリングするかを定義する本文 HTML コード。静的 XHTML、Jelly として定義された動的に生成されたコンテンツを含めるか、またはスクリプトインクルードと UI マクロを呼び出すことができます。このプロパティは、React 開発用の index.html ファイルをインポートするためのエイリアス、HTML を含むアプリケーション内の別のファイルへの参照、またはインライン JavaScript をサポートします。
    注:
    React 開発とインポートされた HTML では、UiPage オブジェクトの html プロパティは一方向の同期のみをサポートします。ソースコードで UI ページの HTML を定義した後、HTML がソースコードの外部で変更された場合、それらの変更は同期されず、ソースコードに反映されません。
    Format (形式)：
    • React を使用した UI 開発のために、以前のビルドから index.html ファイルをインポートするためのエイリアス。エイリアスは任意の値にすることができ、UiPage オブジェクトを含む now.ts ファイルにインポートする必要があります。 import <alias> from 'path/to/index.html'。
    • 別のファイルのテキストコンテンツを使用するには、 Now.include('path/to/file') の形式を使用してアプリケーションでファイルを参照します。詳細については、「ServiceNow Fluent 言語構成」を参照してください。
    • インライン HTML を提供するには、複数行のコードに文字列リテラルまたはテンプレートリテラルを使用します ( 「HTML」または「HTML」)。
    category 文字列 UI ページのタイプ。
    有効な値：
    • general:ページは汎用です。
    • homepages:ページはホームページとして使用されます。
    • htmleditor:このページは、HTML コンテンツを挿入するために使用されます。
    • kb:ページは ナレッジベースとともに使用されます。
    • cms:ページはコンテンツ管理システム (CMS) で使用されます。
    • catalog:ページは サービスカタログとともに使用されます。
    clientScript スクリプト ボタンによって呼び出される機能など、ブラウザーで実行されるスクリプト。このスクリプトは、ページのロード後にフィールドやその他のインタラクティブな DHTML 機能にフォーカスを設定するなど、必要なクライアント側の処理をすべて処理します。 このプロパティは、インライン JavaScript、またはスクリプトを含むアプリケーション内の別のファイルへの参照をサポートします。

    UI ページのクライアントスクリプトは <![CDATA[<script>]]> タグ内でブラウザーに展開されるため、HTML フィールド内で同様にコンテンツを定義できます。代わりに clientScript プロパティを使用してこれらのスクリプトを簡潔に定義し、Jelly および HTML の管理性を維持することができます。

    Format (形式)：
    • 別のファイルのテキストコンテンツを使用するには、 Now.include('path/to/file') の形式を使用してアプリケーションでファイルを参照します。詳細については、「ServiceNow Fluent 言語構成」を参照してください。
    • インラインスクリプトを指定するには、複数行のコードに文字列リテラルまたはテンプレートリテラルを使用します ( 「スクリプト」または「スクリプト」)。
    processingScript スクリプト ページの送信時にサーバーで実行されるスクリプト。ページに <g:ui_form/> または <g:form/> タグで定義されたフォームがある場合に便利です。 このプロパティは、JavaScript モジュールからの関数、スクリプトを含むアプリケーション内の別のファイルへの参照、またはインライン JavaScript をサポートします。
    Format (形式)：
    • 関数には、JavaScript モジュールからエクスポートされた関数、関数式、またはデフォルト関数の名前を使用し、 .now.ts ファイルにインポートします。JavaScript モジュールの詳細については、「 JavaScript モジュールとサードパーティライブラリ」を参照してください。
    • 別のファイルのテキストコンテンツを使用するには、 Now.include('path/to/file') の形式を使用してアプリケーションでファイルを参照します。詳細については、「ServiceNow Fluent 言語構成」を参照してください。
    • インラインスクリプトを指定するには、複数行のコードに文字列リテラルまたはテンプレートリテラルを使用します ( 「スクリプト」または「スクリプト」)。
    $meta オブジェクト アプリケーションメタデータのメタデータ。
    installMethod プロパティを使用すると、特定の状況でのみロードされる出力ディレクトリにアプリケーションメタデータをマップできます。
    $meta: {
      installMethod: 'String'
}
    installMethod の有効な値:
    • demo:[デモデータのロード] オプションが選択されている場合、アプリケーションメタデータを metadata/unload.demo ディレクトリに出力して、アプリケーションとともにインストールします。
    • 初回インストール:アプリケーションがインスタンスに初めてインストールされたときにのみインストールされるように 、アプリケーションメタデータをメタデータ/アンロード ディレクトリに出力します。

    React を使用した UI 開発のこの例では、ページの 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>