従業員の名前をクリックしたら詳細をポップアップで表示させる

ReactiveWebにモーダルは対応していないので、ポップアップを使用します。

1. はじめに

テーブルにはGetEmployeesエンティティの内容が表示されています。

Employeeエンティティ

2. 画面を右クリックし、［Add Local Variable］からBooleanデータ型の変数を画面に追加する

3. Name(従業員名)の横にポップアップウィジェットを配置

［Properties］タブで、Show Popupプロパティの変数を2.で作成したShowPopupローカル変数に設定する。
Show Popupプロパティは、ポップアップを表示するかしないかを設定する箇所で、
・True->ポップアップを表示、
・False->ポップアップを非表示となる。

True、Falseを設定するとポップアップが常に表示あるいは非表示になってしまうので、TrueかFalseかだけを格納するBoolean変数を設定する。
この変数の値に応じてポップアップを切り替えることができるようになります。

4. Name(従業員名)のリンク先を設定

リンクプロパティのOn ClickにNew Client Actionを選択し、名前を「EmployeeDetailPopup」とする。

5. EmployeeDetailPopupアクションの設定

ShowPopup変数の値を［True］に設定する。
Name(従業員名)がクリックされると、EmployeeDetailPopupのShowPopup変数が［True］に設定され、ポップアップが開く。
EmployeeIdにGetEmployees.List.Current.Employee.Idを設定する。
ポップアップに表示されるのは、GetEmployeeById Aggregate
GetEmployeeById.List.Current.Employee.Name
GetEmployeeById.List.Current.Employee.Department
GetEmployeeById.List.Current.Status.Label

RefreshDataウィジェットにGetEmployeeByIdを設定。

6. ポップアップを閉じる

ShowPopup変数の値を［False］に設定する。

7. ポップアップの表示のさせ方はExpressionで定義することもできます。