アプリビルダーのリリース: 変数とイベントを使用したマスター詳細スタイルのアプリ
マスター詳細スタイルのアプリケーションを構築したいですか? ローコードの App Builder で実現できます。詳細はこちら。
Zdravko Kolev
11min read
App Builder、最新のフレームワークを使用してユーザー インターフェイスを作成するのに優れています。実際のデータをバインドしてCRUD 操作を実行できますが、それ以上の機能も備えています。最新のリリースでは、変数、状態管理、選択イベントなどの新しい概念を導入してアプリに活気を与え、マスター/詳細などの不足しているパターンを有効にします。
App Builderのマスター詳細: 概要
当初、この機能はマスター詳細設計インターフェースの基本に従う予定でした。しかし、それははるかに進化しました。本質的には、レコードのリストを提示し、ユーザーが簡単に管理できるようにする方法です。通常、次の 2 つのビューで構成されます。
- 1つは記録のマスターリストです
- もう1つは、単一のレコードに関する拡張データを表示するために使用されます。
この UI パターンは、日常業務やアクティビティで使用されます。マスター詳細 UI の一般的な例としては、Facebook Messenger、Outlook や Gmail などのすべてのメール クライアント、およびフライト予約 Web サイトの 80% が挙げられます。
App Builderに設定された豊富な UI コンポーネントのおかげで、一般的なマスター詳細の使用例を超えた、より複雑なデザインを作成するためのツールが提供されるようになりました。
これは、私たちが導入した新しい概念であるアプリケーション変数によって可能になります。これらの変数と新しいイベント アクションは、データ ストレージと状態管理の接着剤であり中核です。つまり、コンポーネントのイベントをこれらの変数にバインドし、コンテキストを使用してアプリをより動的で活気のあるものにすることができます。
新しい機能は、マスター詳細パターンによって確立された次の主要な要素をカバーします。
- プライマリ ペイン: 前述したように、アイテムのリストやアプリの他の部分の読み込みを開始できるものが含まれる領域です。
- 詳細ペイン: この領域には、プライマリペイン領域で選択した特定の項目の詳細が表示されます。これは、提供されたデータに基づいてできるだけ多くの情報を表示することを目的として、相互に作用するさまざまなコンポーネントで構成できます。
- インタラクション: これは、マスター内の項目とその詳細との間のインタラクションに関するものです。たとえば、マスター内の項目を選択すると、マスター ペインの隣のペインまたはポップアップに詳細が表示されたり、さらにページをドリルダウンしたりできます。インタラクションは、コンテキスト、ドリルダウン、ポップアップに大まかに分類できます。
新しい機能についてさらに詳しく見ていきましょう。
注:以下のチュートリアルでは、Northwind WebAPIを使用します。
1. 変数の管理
簡単に言うと、次の方法でアプリケーション内のコンポーネント間でデータを渡すことができるようになりました。
- グローバル変数– ビュー間でデータを渡すために使用
- ローカル変数– 同じビューのコンポーネント間でデータを渡すために使用されます
変数の型は、文字列、数値、ブール値、日付、オブジェクト、配列のいずれかになります。
いずれのプリミティブ タイプでも、値エディターを使用して既定値を指定できます。配列とオブジェクトについては、フライアウト メニューからエンドポイントまたはスキーマ タイプを選択できます。これらは、アプリで使用可能なデータ ソース スキーマに基づいてリストされます。
変数の操作を開始するには、次の 2 つの方法があります。
1.1. 変数を使用する特定のコンポーネントのイベントハンドラを通じて
たとえば、Movies テーブルにバインドされたコンボを追加し、変数アクションの設定を含む選択変更イベント ハンドラーを追加すると、変数フィールドを選択して [+ 新しい変数] ボタンを使用できます。
これをクリックすると、コンボ データ ソース タイプ (興行収入) とコンボ選択モードに基づいて、データ タイプがすでに事前入力された状態で [新しい変数] ダイアログが開きます。なぜでしょうか。単一選択モードが指定されている場合、変数は単一のオブジェクト(興行収入) を使用することが想定され、複数選択モードが使用されている場合は、このケースのように、オブジェクトの配列(興行収入の配列) を使用する必要があります。
これはアプリケーション ライフサイクル作成の一部であるため、変数作成の主なフローとして考えます。
.. コンポーネントから始めます
.. 日付にバインドする
.. イベントを追加
.. 特定のアクションにタイトにする（変数設定アクション）
.. 状態を保存するための変数を作成する
.. この変数は後でアプリ内で使用します
1.2. 変数セクションで変数を作成します。
そこから、ダイアログを開いて変数を作成および編集できます。命名プロセスをガイドする検証が用意されています。変数の型を設定するには、ドロップダウン メニューで定義済みの型として指定するか、API リクエスト (エンドポイントを選択) からの自動初期化のいずれかの 2 つの方法があります。このオプションを使用すると、選択したエンドポイントのスキーマ データ型に基づいてデータ型が自動的に選択されます。
以下のセクションでは、変数を活用する方法について詳しく説明します。
1.3. エンドポイントからのデータの初期化
変数にデータを保存し、既存のコンポーネントのデータ コンテキストで使用できるようになりました。また、選択したエンドポイントに基づいて変数の種類が自動的に検出されます。その情報はデータ スキーマから取得されます。
以下の例を見てみましょう。/Customers エンドポイント リクエストからデータを初期化し、後でこのデータを Combo コンポーネントにバインドします。推論型は Customers の配列です。
1.4. コンポーネント イベント コンテキストまたはデータ コンテキストを通じて変数値を設定します。
この機能を使用すると、空の変数に動的にデータを埋め込むことができます。例として、Customers 配列型の空の変数 (`selectedCustomers`) があります。以下の gif は、このような変数を作成し、コンボ値の選択が変更されたときにデータを埋め込む方法を示しています。このシナリオの最後の手順は、たとえば `selectedCustomers` 配列にグリッド コンポーネントをバインドすることです。
同様のシナリオが次の「コンポーネントへのバインディング」セクションの一部としてリストされていますが、ここでの主な焦点は変数値の設定ではなくプロパティのバインディングです。
2. 拡張されたバインディングオプション
コンポーネントへのバインドとは、コンポーネント構成の実際のプロパティへのバインドを意味します。実際のバインドは、バインド可能な各コンポーネント プロパティに表示されるプラグ アイコンを通じて行われます。次の例を見てみましょう。以前は、カード コンポーネントのタイトルとサブタイトルを設定するには、データの配列を反復処理する必要がありました。その後、データ コンテキストがバインド オプションとして表示され、特定のデータ フィールドを設定できるようになりました。現在、変数は、データ繰り返しコンテキストだけでなく、任意のコンポーネントをバインドできるコンテキストを提供します。したがって、任意のタイプの変数を作成し、データ リピーターなしで単純なカードにバインドできます。
2.1. 配列型の変数を通じてデータを繰り返す
映画のコレクションがあり、複数選択に基づいて興行収入が最も高い映画の詳細リストを表示したいとします。どうすればできますか?
- Movies コレクションを複数選択機能 (コンボ) を持つコンポーネントにバインドし、上記で説明したイベント ハンドラーと変数設定アクションを追加するフローに従います。
- Box Office Revenue タイプの空の配列変数を作成します。データ タイプは、コンボ コンポーネントに提供されたデータ ソースに基づいて事前に入力されます。
- カード コンポーネントを追加し、新しく作成した変数「selectedMovies」にバインドします。タイトル プロパティとサブタイトル プロパティをデータ コンテキストのデータ フィールドにバインドします。
変更の結果は次のとおりです。
2.2. グローバル変数を使用したビュー間通信。
私たちが知っていることは次のとおりです。
- グローバル変数は、ビュー間でデータを渡すために使用されます。
- ローカル変数は、同じビューのコンポーネント間でデータを渡すために使用されます。
つまり、グローバル変数は、異なるマスター ビューと子ビューで使用できます。 1 つのビューでグローバル変数を作成すると、他のすべてのビューでも表示されます。
3. データリクエストとリピーターのURLパラメータバインディング
3.1. データ要求
パス/クエリパラメータを必要とするデータエンドポイントを指定する場合、それらを指定できるようになりました。指定すると、指定されたパラメータに基づいてデータを取得するデータリクエストが行われます。「CustomerID」パスパラメータに基づいて、顧客注文にバインドされたグリッドの例
3.2. データリピーター
もう 1 つの例は、選択された顧客 ID に基づいて取得された注文コレクションを通じてツリー ノード コンポーネントを繰り返すことです。違いを確認してください。ここでは、これをデータの繰り返しコンテキストにバインドしています。
4. イベントの操作
現在、変数管理のコンテキストで使用できるコンポーネント イベント ハンドラーを公開しています。このようなイベントは次のとおりです。
- 選択変更イベント– コンボコンポーネント用
- 行選択変更イベント– グリッド コンポーネント用。
- クリック イベント- クリック イベントによる変数設定のデータ コンテキスト (ツールボックス内のすべての既存のコンポーネント)。
Grid および Combo コンポーネントは、選択モードを設定する方法を公開します。選択モードに基づいて変数タイプを動的に変更します。
次に例を示します。単一選択モードで顧客の配列にバインドされた Combo コンポーネントは、選択された項目のイベント コンテキストを通じて顧客オブジェクトを渡します。
App Builderのすべてのコンポーネント部分には、変数のコンテキストで使用できる OnClick イベント ハンドラーがあります。選択項目の場合、繰り返しデータがバインドされている場合は、On Click -> Set variable アクションを通じて特定の項目のデータ コンテキストにアクセスし、それを使用して変数値を変更できます。以下にツリーの例を示します。
`valueKey` を設定した Combo の使用に関する注意点。Combo の動作は、選択変更イベントでプリミティブ値を渡すことです。たとえば、Number タイプの CustomerID が設定されている場合、イベント引数は CustomerID を渡します。CustomerName が設定されている場合は、文字列が渡されます。
5. ステップバイステップの例
以下に、2 つのシナリオの実際の使用例を示します。これらのシナリオでは、これまで説明した内容がすべて網羅されます。
あるビューからのグローバル変数セットと、ビュー コンテナーを介した別のビューからのグリッド更新要求。
- コンボ選択変更イベント時に設定されるグローバル変数を追加します。コンボは顧客エンドポイントにバインドされます。
- コンボから顧客IDを選択してください
- 他のビューに移動すると、グリッドはCustomerIDに基づいて注文を取得するAPIリクエストにバインドされています。
- グリッドは、選択された顧客ID（コンボから）で更新される必要があります。
- 注文グリッドから注文をクリックすると、注文詳細を含む別のグリッドが読み込まれます。
- 結果
グリッドとチャートのデータを読み込む階層データソースにバインドされたツリー
- ツリー コンポーネントを追加し、その親を階層データ ソース (繰り返しデータ コンテキスト) にバインドします。
- 親ツリーノードのクリック時イベントを、CustomerID – String変数を格納する変数設定アクションにバインドします。
- ツリー子ノードを追加し、親データコンテキストに繰り返します。子ツリーノードのクリック時イベントを、OrderID – Number変数を格納する変数設定アクションにバインドします。
- ルートツリー要素に顧客が表示され、子ツリーノードに注文が表示されることを確認します。
- クエリパラメータとしてOrderID変数に基づいて注文を取得するエンドポイントにグリッドをバインドします。
- クエリパラメータとしてCustomerID変数に基づいて顧客を取得するエンドポイントにチャートをバインドします。
- 結果
興味深い記事
私たちが最近取り組んでいる記事のリストをご覧ください:
- App Builderを使用してFigmaデザインを HTML コードに変換する
- App BuilderによるAngularコード生成
- ローコードツールでミッションクリティカルなエンタープライズソフトウェアの複雑さを軽減
- 迅速なアプリケーション開発とは
- 設計からコードまでのソリューションの説明
- UI コンポーネント ライブラリ – 構築 vs 購入
- グリッド CRUD アクション、ネストされたデータバインディングのサポート、カテゴリチャートの集計
まとめ！
ご覧のとおり、Infragistics Ultimate Q4 リリースには多数の新機能とアップデートがあり、アプリを 1 つずつ美しくシンプルに構築する方法が大幅に改善、合理化、最新化されます。
このリリースの各部分の詳細は、こちらで確認できます:
- Angular–変更履歴とアップデート
- App Builder–変更ログと新機能
さらに詳しい情報が必要な場合は、以下をご覧ください。
To experience everything, visit your customer portal and get the latest version. As usual, we are always excited to get your feedback and hear what you want to add or recommend. So please email me at zkolev@infragistics.com and let me know how we can help you continue delivering value to your customers with Infragistics.
