Master Detail
Master Detailパターンを使用すると、項目のマスターリストと各項目に関連する詳細を表示できます。たとえば、従業員のリストと各従業員に関する詳細を表示できます。
Master Detail UIパターンの使用方法
-
Service Studioのツールボックスで
Master Detailを検索します。Master Detailウィジェットが表示されます。
-
ツールボックスから、Master Detailウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。
デフォルトで、Master Detailウィジェットには右プレースホルダと左プレースホルダ（リストを想定）が含まれています。
-
リストを読み込むため、画面名を右クリックして［Fetch Data from Database］を選択し、Aggregateを作成します。
-
データベースエンティティを追加するため、画面上をクリックし、関連するエンティティを選択して［OK］をクリックします。この例では、Userエンティティを使用します。
Aggregateの名前は自動的に追加されます。この例では、Aggregateの名前はGetUsersです。
-
［Interface］タブで画面名をダブルクリックし、［LeftContent］プレースホルダでListウィジェットを選択します。［Properties］タブの［Source］ドロップダウンで、先ほど作成したAggregateを選択します。この例では、GetUsers.Listです。
-
［Interface］タブで、画面の左側に表示するアトリビュートに移動して、それをListにドラッグします。この例では、Nameアトリビュートを使用します。
これにより、画面の左側にすべてのユーザー名が表示されます。
-
リスト内の各項目をユーザーが選択できるようにするため、ListのExpressionを右クリックして［Link to -> New Client Action］を選択し、ユーザーアクションを作成します。
-
新しいクライアントアクションをダブルクリックして、名前を入力します。この例では、「ClickSelectedUser」という名前を付けます。
-
ツールボックスからAssignロジックをクライアントアクションに追加し、［Value］ドロップダウンでExpressionエディタを選択します。現在のユーザーIDに移動してダブルクリックし、［Done］をクリックします。
-
このユーザーIDを保存するため、画面名を右クリックして［Add Local Variable］を選択し、ローカル変数を作成します。変数の名前を入力します。この例では、「SelectedUserId」という名前を付けます。
-
Assignロジックを選択し、［Variable］ドロップダウンで作成したローカル変数（この例では、［SelectedUserId］）を選択します。
注記: これで、Master Detailウィジェットの左側に表示される情報がすべて作成されました。以下の手順では、Master Detailウィジェットの右側に表示される情報を作成します。
-
選択されているユーザーの詳細を画面の右側に表示するため、画面名を右クリックして［Fetch Data from Database］を選択し、新しいAggregateを作成します。
-
Aggregateの名前を入力します。この例では、「GetUserDetails」という名前を付けます。
-
データベースエンティティを追加するため、画面上をクリックし、関連するエンティティを選択して［OK］をクリックします。この例では、Userエンティティを使用します。
-
［GetUserDetails］画面で、［Filters］をクリックして［Add Filter］をクリックします。
-
フィルタ条件エディタで以下の条件を入力し、［Done］をクリックします。
User.Id = SelectedUserIdこれにより、Userエンティティのすべての結果を現在選択されているユーザーでフィルタリングします。
-
クライアントアクション名（この例では、ClickSelectedUser）をダブルクリックし、GetUserDetails Aggregateをクライアントアクションにドラッグします。これにより、現在選択されているユーザーでAggregateが実行されます。
- 画面名をダブルクリックし、GetUserDetails Aggregateから［RightContent］プレースホルダに表示するアトリビュートをドラッグします。この例では、UsernameアトリビュートとEmailアトリビュートを使用します。
これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。
プロパティ
| プロパティ | 説明 |
|---|---|
| LeftPercentage（Decimal型）: オプション | LeftContentの幅をパーセンテージで設定します。デフォルト値は50%です。 |
| OpenedOnPhone（Boolean型）:オプション | スマホ上で詳細が開かれているかどうかを保持する変数。デフォルト値はFalseです。 |
| Height（Text型）:オプション | ウィジェットの高さ（ピクセル単位または%）を設定します。デフォルトでは、ウィンドウからタイトルとヘッダーを除いた高さです。 |
他のパターンとの互換性
このパターンは親の高さに合わせるため、画面コンテンツ内で単独で使用する必要があります。また、Tabsなど、スワイプイベントを使用するパターン内でのMaster Detailパターンの使用は避けてください。