Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

モバイルアプリとリアクティブWebアプリにのみ適用されます

 

 

OutSystems

Master Detail

Master Detailパターンを使用すると、項目のマスターリストと各項目に関連する詳細を表示できます。たとえば、従業員のリストと各従業員に関する詳細を表示できます。

Master Detail UIパターンの使用方法

  1. Service StudioのツールボックスでMaster Detailを検索します。

    Master Detailウィジェットが表示されます。

  2. ツールボックスから、Master Detailウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

    デフォルトで、Master Detailウィジェットには右プレースホルダと左プレースホルダ(リストを想定)が含まれています。

  3. リストを読み込むため、画面名を右クリックして[Fetch Data from Database]を選択し、Aggregateを作成します。

  4. データベースエンティティを追加するため、画面上をクリックし、関連するエンティティを選択して[OK]をクリックします。この例では、Userエンティティを使用します。

    Aggregateの名前は自動的に追加されます。この例では、Aggregateの名前はGetUsersです。

  5. Interface]タブで画面名をダブルクリックし、[LeftContent]プレースホルダでListウィジェットを選択します。[Properties]タブの[Source]ドロップダウンで、先ほど作成したAggregateを選択します。この例では、GetUsers.Listです。

  6. Interface]タブで、画面の左側に表示するアトリビュートに移動して、それをListにドラッグします。この例では、Nameアトリビュートを使用します。

    これにより、画面の左側にすべてのユーザー名が表示されます。

  7. リスト内の各項目をユーザーが選択できるようにするため、ListのExpressionを右クリックして[Link to -> New Client Action]を選択し、ユーザーアクションを作成します。

  8. 新しいクライアントアクションをダブルクリックして、名前を入力します。この例では、「ClickSelectedUser」という名前を付けます。

  9. ツールボックスからAssignロジックをクライアントアクションに追加し、[Value]ドロップダウンでExpressionエディタを選択します。現在のユーザーIDに移動してダブルクリックし、[Done]をクリックします。

  10. このユーザーIDを保存するため、画面名を右クリックして[Add Local Variable]を選択し、ローカル変数を作成します。変数の名前を入力します。この例では、「SelectedUserId」という名前を付けます。

  11. Assignロジックを選択し、[Variable]ドロップダウンで作成したローカル変数(この例では、[SelectedUserId])を選択します。

    注記: これで、Master Detailウィジェットの側に表示される情報がすべて作成されました。以下の手順では、Master Detailウィジェットの側に表示される情報を作成します。

  12. 選択されているユーザーの詳細を画面の右側に表示するため、画面名を右クリックして[Fetch Data from Database]を選択し、新しいAggregateを作成します。

  13. Aggregateの名前を入力します。この例では、「GetUserDetails」という名前を付けます。

  14. データベースエンティティを追加するため、画面上をクリックし、関連するエンティティを選択して[OK]をクリックします。この例では、Userエンティティを使用します。

  15. GetUserDetails]画面で、[Filters]をクリックして[Add Filter]をクリックします。

  16. フィルタ条件エディタで以下の条件を入力し、[Done]をクリックします。

    User.Id = SelectedUserId

    これにより、Userエンティティのすべての結果を現在選択されているユーザーでフィルタリングします。

  17. クライアントアクション名(この例では、ClickSelectedUser)をダブルクリックし、GetUserDetails Aggregateをクライアントアクションにドラッグします。これにより、現在選択されているユーザーでAggregateが実行されます。

  1. 画面名をダブルクリックし、GetUserDetails Aggregateから[RightContent]プレースホルダに表示するアトリビュートをドラッグします。この例では、UsernameアトリビュートとEmailアトリビュートを使用します。

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

プロパティ

プロパティ 説明
LeftPercentage(Decimal型): オプション LeftContentの幅をパーセンテージで設定します。デフォルト値は50%です。
OpenedOnPhone(Boolean型):オプション スマホ上で詳細が開かれているかどうかを保持する変数。デフォルト値はFalseです。
Height(Text型):オプション ウィジェットの高さ(ピクセル単位または%)を設定します。デフォルトでは、ウィンドウからタイトルとヘッダーを除いた高さです。

他のパターンとの互換性

このパターンは親の高さに合わせるため、画面コンテンツ内で単独で使用する必要があります。また、Tabsなど、スワイプイベントを使用するパターン内でのMaster Detailパターンの使用は避けてください。

  • Was this article helpful?