UI ビルダーページでデータを動的に公開する (高度な機能)

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

    • ServiceNow テーブル間でデータを同期し、UI ビルダー を使用してビルドしたページとデータを同期します。ページには同期されたデータがリアルタイムで表示され、ユーザーが情報を入力するとデータ/テーブルが更新されます。

    UI ビルダーのデータリソースの説明

    UI ビルダーは、データリソースを使用して ServiceNow テーブル/データを同期します。データリソースは、UI ビルダーがコンポーネントに情報を表示するために使用するデータをフェッチします。UI ビルダー コンポーネントはデータリソースを使用して、さまざまなエクスペリエンス間でデータを同期します。データリソースにより、コンポーネントのデータが動的なものになります。つまり、すべてのページのデータを再作成する必要がなくなります。

    複数のページにデータを分散するデータリソーススタック。

    データリソースはデータリソースドロワーにあります。データリソースドロワーでは、ページのデータリソースを追加および構成できます。データリソースを構成した後、ページ上のコンポーネントと ServiceNow テーブル/データの間でデータを同期できます。

    図 : 1. データリソースドロワー
    UI ビルダーのデータリソースドロワーを指す矢印。
    データリソースドロワーには、次の 3 つのセクションがあります。
    • データリソース：エクスペリエンスの一部であるデータリソース
    • 構成/イベント：エクスペリエンス用に構成されたデータリソースとイベント
    • プレビュー：データリソースによって返される情報の JSON

    コンポーネント、その他のデータリソース、クライアントスクリプト、クライアントステータス、およびイベントの構成プロパティをこれらのデータリソースにバインドできます。

    データリソースのフィルターの条件を設定します。詳細については、「 コンポーネントへのデータ接続」を参照してください。

    UI ビルダーのデータリソースの仕組み

    データリソースは、Glide、GraphQL、および REST API からデータをフェッチし、UI ビルダー ページ上のコンポーネントで使用するために変換します。

    コンポーネントは、継承されたデータリソースインスタンスとローカルデータリソースインスタンスの両方を使用します。継承されたデータリソースは自動的に UI ビルダー ページにロードされ、ローカルデータリソースインスタンスを追加して構成できます。データリソースは指定された入力値に基づいて評価されます。これで正しいデータが取得されます。継承されたデータリソースとローカルデータリソースの詳細については、「UI ビルダーの継承されたデータリソースとローカルデータリソースの比較」を参照してください。

    UI ビルダーのローカルデータリソース

    サーバーデータ、操作、変換、または gForm API のようなクライアントデータなどのローカルデータリソースを選択して、データを UI ビルダーページに取り込むことができます。
    注:
    UI ビルダー のページごとに 1 つの GlideForm のみがサポートされます。GlideForm の詳細については、ServiceNow Developer サイトを参照してください。
    データリソースは、アプリケーション別にデータリソースドロワーに整理されます。さらに、サーバーデータや変換などのデータリソースタイプ別に分類されます。たとえば、グローバルアプリケーションにはいくつものデータリソースがありますが、カスタマーサービス管理 (CSM) ワークスペースアプリケーションには少数のデータリソースしかありません。
    図 : 2. データリソース
    データリソース選択モーダル。

    使用しているアプリケーションに応じて、さまざまなデータリソースが表示されます。グローバルアプリケーションを選択した場合、CSM 構成可能ワークスペースアプリケーションを選択した場合とは異なるデータリソースが [サーバーデータ] に表示されます。

    UI ビルダーのデータバインディングの使用

    データバインディングを使用すると、ページとコンポーネントをデータリソースに同期することで、動的ページを作成できます。データをコンポーネントにバインドしてバックエンドからデータを取得し、フィールドパラメーターを使用して URL からプロパティを取得できます。URL パラメーターを変更すると、パラメーターに応じて異なるデータを表示する動的ページを作成できます。

    次の方法でデータをコンポーネントにバインドできます。

    コンテキストのバインディング

    URL パラメーターを使用して、URL の一部をページのプロパティに接続します。たとえば、@context.props.table などの @context 構文を使用して、URL からコンポーネントにテーブル名をリンクできます。

    table という名前の必須フィールドを持つ UI ビルダー ページがあるとします。ページの URL は、/demo/page/<table-name> のようになります。<table-name> は incident などとなります。データは、親データリソースから取得することも、ページ固有のローカルプロパティにすることもできます。

    コンポーネントプロパティ、他のデータリソースプロパティ、またはイベント詳細をページプロパティにリンクするには、@context.props.table バインディングを使用します。コンテキストバインディングを使用している場合は、URL にテスト値を指定するか、ページの構成でそのプロパティの固定値を設定します。

    データリソースのバインディング

    クライアントステータス、GraphQL、REST API など、インスタンスのバックエンドからデータをフェッチするデータリソースを使用します。これらのデータソースには、UI ビルダー ページ上の要素にリンクできるプロパティがあります。

    たとえば、[ルックアップレコード] データリソースを使用している場合は、ボタンコンポーネントで利用できます。@data.lookup_record_1.result.number.displayValue のような「ラベル」プロパティでデータ式を使用できます。

    コンポーネントのバインディング
    コンポーネントのバインディングを使用して、あるコンポーネントを別のコンポーネントに接続します。UI ビルダー ページにリストメニューコンポーネントがあるとします。リストメニューは、現在選択されているリストを同じページ上の他のコンポーネントに表示します。他のコンポーネントは、@elements.list_menu_1.selectedListId などの式を使用してデータにリンクすることで、データにアクセスできます。
    クライアントステータスパラメーターのバインディング

    クライアントステータスパラメーターのバインディングを使用して、クライアントサイドアプリケーションと UI ビルダー コンポーネントの間でデータを接続して同期します。パラメーターバインディングを使用すると、クライアントステータスはコンポーネント内のデータを自動的に更新できます (その逆も同様です)。@state 構文を使用して、ステータスプロパティをクライアントステータスパラメーターにバインドします。

    UI ビルダー で利用可能なデータソースのタイプ

    次の表に示すデータリソースタイプを使用できます。

    表 : 1. データリソースタイプ
    データリソースタイプ 説明
    コントローラー データとイベントロジックをカプセル化し、コンポーネントのプリセットを有効にします。
    GraphQL 実行される GraphQL クエリとミューテーション。
    変換 入力データを別の形式に変換するスクリプト。
    クライアントステータス クライアント情報、ドメイン固有のステータスまたはロジック、ユーザー設定などを含むクライアントサイドのデータリソース。
    総合 複数のデータリソースを含む単一の再利用可能なデータリソース。
    REST REST API 要求を介して作成されたデータリソース。

    UI ビルダーの継承されたデータリソースとローカルデータリソースの比較

    継承されたデータリソースは、アプリケーションなどの UI ビルダー ページの周辺部分の情報を共有します。ページが大きなフレーム内にあり、そのフレームまたはその周りの他の部分から何らかの情報を取得することを想像してください。この情報は、パズルのピースをつなぎ合わせるように、ページのプロパティに接続することで使用できます。フレームからこの情報を取得する場合に、自分で再度取得する必要はありません。

    継承されたデータリソースとローカルデータリソースの違いを示す図。

    ローカルデータリソースは、自分で UI ビルダー ページに追加するアイテムです。出張要求のページを作成しているとします。従業員データをリストコンポーネントに同期すると、従業員は自分の情報にリンクされた出張を要求できるようになります。

    これらのデータリソースを使用するには、アプリから取り込むか、ServiceNow プラットフォームで作成します。その後、UI ビルダー で、これらのリソースをコンポーネントで使用できるようにします。次に、データをコンポーネントに関連付けて、操作できるようにします。たとえば、一連のレコードを UI ビルダーで公開して、コンポーネントにリンクできます。そこから、新しいレコードの保存などのデータ処理を行うようにコンポーネントを構成します。

    ページでデータを同期したら、ページ内でデータを必要とする部分 (コンポーネントなど) に接続します。これは、適切なパズルのピースが適切な場所に収まることを確認するようなものです。これで、ページのその部分に対し、データをどう処理するかを指定できます。たとえば、データを使用して従業員の新しい出張計画を追加できます。

    UI ビルダーデータリソースのプロパティ

    UI ビルダー にデータリソースを追加するのは、情報の取得先を把握しているツールを追加するようなものです。データリソースプロパティは、データを UI ビルダー ページに取り込む方法をデータリソースに伝える指示です。これらのプロパティは、取得するデータ、その編成方法、従うべき条件をデータリソースに指示します。たとえば、これらのプロパティを使用して、検索するテーブル、データのソート方法などを指定できます。これらのプロパティは、データリソースを正しく動作させ、必要なデータを提供するものです。

    データリソースを追加した後、積極的にロードするか明示的にロードするかを選択できます。以下の説明を参考に、どのアプローチがページに最も適しているかを判断してください。この決定は、パフォーマンス、ユーザーエクスペリエンス、およびリソース効率に影響を与える可能性があるため、違いを理解することが重要です。
    すぐに (先行的な評価)
    ページまたはコンポーネントがロードされると、データが自動的にロードされます。
    ユーザーがすぐに表示すると予想されるコアコンテンツに役立ちます。
    未使用のデータをフェッチすることで、ページやコンポーネントのロードが遅くなる場合があります。
    呼び出された場合のみ (明示的な評価)
    ユーザーが特定のアクションを実行するまでデータのロードを保留します。たとえば、ボタンをクリックしたり、フィールドにデータを入力したりします。
    必要な場合にのみデータをフェッチすることで、リソースを節約します。
    最初のページのロードを高速化します。
    図 : 3. データリソース評価オプション
    [このデータリソースを評価するタイミング] ドロップダウンを指す矢印。

    UI ビルダーデータリソースのスクリプト

    データリソーススクリプトは、特定のデータを返すために UI ビルダー に与える特別な指示です。たとえば製品のリストを処理している場合、スクリプトを使用してデータリソースに対し、在庫のある製品のみを表示したり、製品を特定の順序で並べ替えたりすることを指示できます。データリソーススクリプトを使用すると、ルールやアクションの追加など、UI ビルダー で情報をどのように処理するかをカスタマイズできます。