App Builder リリース: マスター-ディテイルスタイルアプリを構築する

新しい App Builder リリースでマスター-ディテイルアプリを構築でき、変数、状態管理、選択イベントなどの新しい概念を使用できます。詳細をご覧ください。

Zdravko Kolev Last Updated Apr 2, 2024 2min read

App Builder は最新のフレームワークでユーザーインターフェイスを作成することに優れています。実際のデータをバインドして CRUD操作を実行できますが、今ではそれ以上のことが可能です。最新リリースでは、変数、状態管理、選択イベントなどの新しい概念を導入し、アプリケーションを生き生きとさせ、マスター-ディテイルなどの不足していたパターンを実現します。

App Builder のマスター-ディテイル: 概要

最初、この機能はマスター-ディテイルデザインインターフェイスの基本に従うことが計画されていました。しかし、それはより多くのものへと進化しました。本質的には、レコードのリストを提示し、ユーザーがそれらを簡単に管理できるようにする方法です。通常、2つのビューで構成されています。

1つはレコードのマスターリスト
もう1つは単一レコードに関する拡張データを表示するために使用されます

この UI パターンは、日常の仕事や活動で使用しています。マスター-ディテイル UI の一般的な例としては、Facebook Messenger、Outlook や Gmail などのすべてのメールクライアント、およびフライト予約サイトの 80% があります。

App Builder のマスター-ディテイルアプリビュー

App Builder の充実した UI コンポーネントセットのおかげで、一般的なマスター-ディテイルのユースケースを超えた、より複雑な設計を作成するためのツールを提供します。

これは、私たちが導入する新しい概念 (アプリケーション変数) を通じて可能になります。これらの変数と新しいイベントアクションは、データストレージとステートメッセージの 接着剤とコア です。これは、コンポーネントのイベントをこれらの変数にバインドし、コンテキストを使用してアプリケーションをより動的で活き活きとしたものにすることができることを意味します。

App Builder リリース: 変数とイベントを使用したマスター-ディテイルスタイルアプリ

新しい機能は、マスター-ディテイルパターンによって確立された、これらの主要な要素をカバーしています。

プライマリペイン: 前述のとおり、アイテムのリスト、またはアプリケーションの他の部分の読み込みを開始できるものを含むエリア。
ディテイルペイン: このエリアには、プライマリペインエリアで選択した特定のアイテムの詳細が表示されます。提供されたデータに基づいて、できるだけ多くの情報を表示することを目的として、相互作用する様々なコンポーネントで構成することができます。
インタラクション: これはマスターのアイテムとその詳細間のインタラクションです。たとえば、マスターのアイテムを選択すると、マスターペインの横のペインに詳細が表示されたり、ポップアップに表示されたり、さらに多くのページにドリルダウンしたりできます。インタラクションを大まかに、コンテキスト、ドリルダウン、ポップアップに分類できます。

新機能についてさらに詳しく見てみましょう。

注記: 以下のウォークスルーでは、Northwind WebAPI を使用します。

1. 変数の管理

簡単に言えば、以下を通じてアプリケーション内のコンポーネント間でデータを渡すことができるようになりました。

グローバル変数 – ビュー間でデータを渡すために使用
ローカル変数 – 同じビューのコンポーネント間でデータを渡すために使用

変数は String、Number、Boolean、Date、Object、Array のいずれかの型です。

プリミティブ型のいずれについても、値エディタを使用してデフォルト値を指定できます。配列とオブジェクトについては、フライアウトメニューからエンドポイントまたはスキーマタイプを選択できます。利用可能なデータソーススキーマに基づいてそれらをリストしています。

App Builder で変数を管理

変数の使用を開始する 2 つの方法があります:

1.1. 変数を使用する特定のコンポーネントのイベントハンドラーを通じて

たとえば、Movies テーブルにバインドされた Combo を追加し、Set Variable アクションを使用して Selection Changed イベントハンドラーを追加する場合、変数フィールドを選択して「+ 新しい変数」ボタンを使用できます。

変数の操作

これをクリックすると、Combo データソースタイプ (ボックスオフィス収益) と Combo 選択モードに基づいてデータ型が事前入力された新しい変数ダイアログが開きます。なぜでしょうか。単一選択モード が指定されている場合、変数は 単一のオブジェクト (ボックスオフィス収益) を使用することが予想され、複数選択モード が使用される場合は、オブジェクトの配列 (ボックスオフィス収益の配列) を使用する必要があり、これが私たちの場合です。

変数作成のメインフロー

これはアプリケーションのライフサイクル作成の一部であるため、変数作成のメインフローと考えます。

.. コンポーネントから始めます

.. それを日付にバインドします

.. イベントを追加します

.. 特定のアクション (Set Variable アクション) に固定します

.. 状態を保持するために変数を作成します

.. そして、アプリケーション内でこの変数を後で使用します

新しいローカル変数を作成

1.2. 変数セクションを通じて変数を作成する

そこから、変数を作成および編集するダイアログを開くことができます。命名プロセスをガイドするための検証が実行されます。変数型を設定する方法は 2 つあります。ドロップダウンメニューで事前に定義された型として指定するか、API リクエストから自動初期化して指定します (エンドポイントを選択して)。そのオプションにより、データ型は選択したエンドポイントのスキーマデータ型に基づいて自動的に選択されます。

変数セクションから変数を作成

以下のセクションでは、変数の使用方法についての詳細を確認できます。

1.3. エンドポイントからデータを初期化する

変数にデータを保存し、既存のコンポーネントのいずれかのデータコンテキストで使用できるようになりました。また、選択したエンドポイントに基づいて変数型が何であるかを自動的に検出します。その情報はデータスキーマから取得します。

以下の例を見てみましょう。/Customers エンドポイントリクエストからデータを初期化して、このデータを後で Combo コンポーネントにバインドしています。推論型は Customers の配列です。

エンドポイントからデータを初期化

1.4. コンポーネントイベントコンテキストまたはデータコンテキストを通じて変数値を設定する

この機能は、空の変数を動的にデータで埋めることができます。たとえば、Customers Array 型の空の変数 (selectedCustomers) などです。以下の gif は、このような変数を作成し、Combo 値選択が変わった場合にデータで埋める方法を示しています。このシナリオの最終ステップは、Grid コンポーネントなどを selectedCustomers 配列にバインドすることです。

コンポーネントイベントコンテキストまたはデータコンテキストを通じて変数値を設定

同様のシナリオは、次の コンポーネントへのバインディング セクションの一部としてリストされていますが、ここでの主な焦点は変数値の設定ではなく、プロパティバインディングになります。

2. 拡張されたバインディングオプション

コンポーネントへのバインディングについて話すときは、コンポーネント構成の実際のプロパティへのバインディングを意味します。実際のバインディングは、各バインド可能なコンポーネントプロパティに表示されるプラグアイコンを通じて行われます。次の例を見てみましょう。以前は、Card コンポーネントのタイトルとサブタイトルを設定するには、データの配列を反復処理する必要があり、データコンテキスト のみがバインディングオプションとして表示されていました。これにより、特定のデータフィールドを設定できました。今では、変数は、データリピーターがあるコンポーネントだけでなく、任意のコンポーネントにバインドできるコンテキストを提供します。したがって、任意の型の変数を作成し、データリピーターなしで単純な Card にバインドできます。

2.1. 配列型の変数によるデータリピート

映画のコレクションがあり、複数選択によって選択された最高売上高のボックスオフィス映画に関する詳細のリストを表示したいとします。どうすればいいですか？

複数選択機能を備えたコンポーネント (Combo) に Movies コレクションをバインドし、上記で説明したイベントハンドラーを追加して Set Variable アクションを実行します。

配列型の変数によるデータリピート

Box Office Revenue 型の空の配列変数を作成します。データ型は、Combo コンポーネント用に提供されたデータソースに基づいて、自動的に事前入力されます。

空の配列変数を作成

カードコンポーネントを追加し、新しく作成された変数「selectedMovies」にバインドします。タイトルとサブタイトルのプロパティをデータコンテキストのデータフィールドにバインドします。

カードコンポーネントを追加

以下は、変更の結果です。

変更と結果

2.2. グローバル変数を使用したクロスビュー通信

ここで知っていることは:

グローバル変数は、ビュー間でデータを渡すために使用されます。
ローカル変数は、同じビューのコンポーネント間でデータを渡すために使用されます。

つまり、異なるマスターとチャイルドビュー間でグローバル変数を使用できます。1 つのビューでグローバル変数を作成すると、他のすべてのビューにも表示されます。

3. データリクエストとリピーターの URL パラメータバインディング

3.1. データリクエスト

パス/クエリパラメータを想定するデータエンドポイントを指定する場合、それらを指定でき、存在する場合、提供されたパラメータに基づいてデータを取得するデータリクエストが行われます。「CustomerID」パスパラメータに基づいて Customers Orders にバインドされたグリッドの例

データリクエスト

3.2. データリピーター

別の例として、選択された顧客 ID に基づいて取得された Orders コレクションによって Tree ノードコンポーネントを繰り返すことができます。違いを観察します。これでデータリピートコンテキストにバインドします。

データリピーター

4. イベントの操作

現在、変数管理のコンテキストで使用できるコンポーネントイベントハンドラーを公開しています。このようなイベントには次のものがあります。

選択変更イベント – Combo コンポーネント用
行選択変更イベント – Grid コンポーネント用
クリックイベント – クリックイベント付き Set Variable 用のデータコンテキスト (ツールボックス内のすべての既存コンポーネント)

Grid と Combo コンポーネントは、選択モードを設定する方法を公開しています。選択モードに基づいて変数型を動的に変更します。

以下は例です: 単一選択モードの Customers の配列にバインドされた Combo コンポーネントは、選択されたアイテムのイベントコンテキスト経由で Customer Object を渡します。

イベントの操作

App Builder の一部であるすべてのコンポーネントには、変数のコンテキストで使用できる OnClick イベントハンドラーがあります。Select アイテムの場合、繰り返されたデータがバインドされている場合、On Click -> Set variable アクションを通じて特定のアイテムのデータコンテキストにアクセスでき、変数値を変更するために使用できます。以下のツリーを使用した例:

ツリーの例

valueKey が設定された Combo の使用に関する注記。Combo の動作方法は、選択変更イベントでプリミティブ値を渡すことです。たとえば、Number 型の CustomerID が設定されている場合、イベント引数は CustomerID を渡します。CustomerName が設定されている場合、文字列を渡します。

CustomerID