UI Builder ページでデータを動的に公開する (高度な機能)
テーブル間でServiceNow データを同期し、 を使用して構築UI ビルダーしたページとデータを同期します。ページは同期されたデータをリアルタイムで表示し、ユーザーが情報を入力するとデータ/テーブルを更新します。
データリソースの説明
UI ビルダーは、データリソースを使用してテーブル/データを同期しますServiceNow。データリソースは、UI Builder がコンポーネントに情報を表示するために使用するデータをフェッチします。 UI ビルダー コンポーネントはデータリソースを使用して、さまざまなエクスペリエンス間でデータを同期します。データリソースはコンポーネントのデータを動的なものにします。つまり、ページごとにデータを再作成する必要はありません。
データリソースはデータリソースドロワーにあります。データリソースドロワーでは、ページのデータリソースを追加および構成できます。データリソースを構成した後、ページ上のコンポーネントと ServiceNow テーブル/データの間でデータを同期できます。
- データリソース:エクスペリエンスの一部であるデータリソース
- 構成/イベント:エクスペリエンス用に構成されたデータリソースとイベント
- プレビュー:データリソースによって返される情報の JSON
コンポーネント、その他のデータリソース、クライアントスクリプト、クライアントステータス、およびイベントの構成プロパティをこれらのデータリソースにバインドできます。
データリソースのフィルターの条件を設定します。詳細については、「 コンポーネントへのデータ接続」を参照してください。
データリソースの仕組み
データリソースは、Glide、GraphQL、および REST API からデータをフェッチし、ページ上の UI ビルダー コンポーネントで使用するために変換します。
コンポーネントは、継承されたデータリソースインスタンスとローカルデータリソースインスタンスの両方を使用します。継承されたデータリソースは自動的にページにロード UI ビルダー され、ローカルデータリソースインスタンスを追加して構成できます。データリソースは指定された入力値に基づいて評価され、正しいデータが取得されていることを確認します。継承されたデータリソースとローカルデータリソースの詳細については、「継承されたデータリソースとローカルデータリソースの比較」を参照してください。
ローカルデータリソース
使用しているアプリケーションに応じて、さまざまなデータリソースが表示されます。グローバルアプリケーションを選択した場合、[サーバーデータ] には、構成可能ワークスペースアプリケーションを選択した場合 CSM とは異なるデータリソースが表示されます。
データバインディングの使用
データバインディングを使用すると、ページとコンポーネントをデータリソースに同期することで、動的ページを作成できます。データをコンポーネントにバインドしてバックエンドからデータを取得し、フィールドパラメーターを使用して URL からプロパティを取得できます。URL パラメーターを変更すると、パラメーターに応じて異なるデータを表示する動的ページを作成できます。
次の方法でデータをコンポーネントにバインドできます。
- コンテキストのバインディング
-
URL パラメーターを使用して、URL の一部をページのプロパティに接続します。たとえば、
@context.props.tableのように @context 構文を使用して、URL からコンポーネントにテーブル名をリンクできます。tableという名前の必須フィールドを持つページがあるとUI ビルダーします。ページの URL は、/demo/page/<table-name> のようになります。<table-name> はインシデントのようなものになります。データは、親データリソースから取得することも、ページに固有のローカルプロパティにすることもできます。コンポーネントのプロパティ、その他のデータリソースのプロパティ、またはイベントの詳細をページプロパティにリンクするには、
@context.props.tableバインディングを使用します。コンテキストバインディングを使用している場合は、URL にテスト値を指定するか、ページの構成でそのプロパティの固定値を設定してください。 - データリソースのバインディング
-
データリソースを使用して、クライアントステータス、GraphQL、REST API などのインスタンスのバックエンドからデータをフェッチします。これらのデータ ソースには、 UI ビルダー ページ上の要素にリンクできるプロパティがあります。
たとえば、ルックアップレコードデータリソースを使用している場合は、ボタンコンポーネントで利用できます。「label」プロパティでは、
@data.lookup_record_1.result.number.displayValueのようなデータ式を使用できます。 - コンポーネントのバインディング
- コンポーネントのバインディングを使用して、あるコンポーネントを別のコンポーネントに接続します。UI ビルダー ページにリストメニューコンポーネントがあるとします。リストメニューは、現在選択されているリストを同じページ上の他のコンポーネントに表示します。これらの他のコンポーネントは、
@elements.list_menu_1.selectedListIdなどの式を使用してデータにリンクすることで、データにアクセスできます。 - クライアントステータスパラメーターのバインディング
-
クライアントステータスパラメーターのバインディングを使用して、クライアント側アプリケーションと UI ビルダー コンポーネントの間でデータを接続して同期します。パラメーターのバインドを使用すると、クライアント状態はコンポーネント内のデータを自動的に更新できます (その逆も同様です)。
@state構文を使用して、ステータスプロパティをクライアントステータスパラメーターにバインドします。
UI ビルダー で利用可能なデータソースのタイプ
次の表に示すデータリソースタイプを使用できます。
| データリソースタイプ | 説明 |
|---|---|
| コントローラー | データとイベントロジックをカプセル化し、コンポーネントのプリセットを有効にします。 |
| GraphQL | 実行される GraphQL クエリとミューテーション。 |
| 変換 | 入力データを別の形式に変換するスクリプト。 |
| クライアントステータス | クライアント情報、ドメイン固有のステータスまたはロジック、ユーザー初期設定などを含むクライアントサイドのデータリソース。 |
| 総合 | 複数のデータリソースを含む単一の再利用可能なデータリソース。 |
| REST | REST API 要求を介して作成されたデータリソース。 |
継承されたデータリソースとローカルデータリソースの比較
継承されたデータリソースは、 UI ビルダー アプリケーションなどのページの周辺部分の情報を共有します。あなたのページが大きなフレームにあり、フレームまたはその周りの他の部分から何らかの情報を取得していると想像してください。この情報は、パズルのピースをリンクするように、ページのプロパティに接続することで使用できます。フレームからこの情報を取得する場合は、自分で再度取得する必要はありません。
ローカルデータリソースは、自分でページに追加する UI ビルダー アイテムです。出張要求のページを作成しているとします。従業員データをリストコンポーネントに同期して、従業員が自分の情報にリンクされた配車を要求できるようにすることができます。
これらのデータリソースを使用するには、アプリから取り込むか、プラットフォームで作成します ServiceNow 。次に、 で、 UI ビルダーこれらのリソースをコンポーネントで使用できるようにします。次に、データをコンポーネントに関連付けて、操作できるようにします。たとえば、一連のレコードを UI Builder で公開して、コンポーネントにリンクすることができます。そこから、新しいレコードの保存など、データで処理を行うようにコンポーネントを構成します。
ページでデータを同期したら、コンポーネントなど、ページ内のデータを必要とする部分に接続します。これは、適切なパズルのピースが適切な場所に収まることを確認するようなものです。次に、ページのその部分にデータをどうするかを伝えることができます。たとえば、従業員の新しい出張計画を追加するために使用できます。
データリソースのプロパティ
にデータ リソース UI ビルダーを追加するのは、どこから情報を取得するかを把握しているツールを追加するようなものです。データリソースプロパティは、データを UI ビルダー ページに取り込む方法をデータリソースに指示する指示です。これらのプロパティは、取得するデータ、その編成方法、および従う条件をデータリソースに指示します。たとえば、これらのプロパティを使用して、検索するテーブル、データの並べ替え方法などを指定できます。これらのプロパティは、データリソースを正しく動作させ、必要なデータを提供するものです。
データリソースのスクリプト
データリソーススクリプトは、特定のデータを返すための特別な指示 UI ビルダー です。たとえば、製品のリストを処理している場合、スクリプトは、在庫のある製品のみを表示するか、特定の順序で配置するようにデータリソースに指示できます。データリソーススクリプトを使用すると、ルールやアクションを追加するなど、情報をどのように処理するか UI ビルダー をカスタマイズできます。