はじめに

前回の記事で作成したEntityを使用します。

社員情報(Employee)Entityを一覧表示する画面と、一覧から1行クリックするまたは新規作成ボタンを押すと編集画面へ遷移し、社員情報を編集できるイメージで作成していきます。

1.一覧画面作成

まずはEmployeeを取得する処理を作成します。
画面を作成し、右クリックしてFetch Data From Databaseを選択します。

するとAggregateというものが作成されます。
Aggregateとは一般的なデータベースにおける、SQLのSELECT文のようなものと思っていただければ大丈夫です。

この状態で画面をクリックするとポップアップから取得したいEntityを選択できるので、Employeeを選択します。

一覧画面にはEmployeeに紐づく部署情報(Department)も表示したいので、Add Sourceボタンを押してDepartmentを選択します。

するとEmployeeに対してDepartmentが結合されます。
EmployeeがDepartmentのキーとなるAttributeのDepartmentIdを持っているため、結合の条件が自動で作成されます（結合条件は自由に変えることもできます）。

また、こちらのドロップダウンで結合方法を変えられます。With or WithoutがLEFT JOIN、Only WithがINNER JOIN、WithがFULL OUTER JOINになります。
今回はWith or Withoutのままにしておきます。

これでEmployeeの取得処理は作成できました。
次は作成したAggregateを画面にドラッグ&ドロップします。

一覧のウィジェットとページングとソートのアクションが自動生成されます。

デフォルトだと一覧のヘッダーが英語のままなので日本語に書き換えます。

また、デフォルトだと一覧は4列までしか自動生成されないため部署名の列を追加しましょう。
Widgetタブから部署コードの列を右クリックし、Add New Column Rightを選択します。

列が追加されるので、まずHeader CellのSort AttributeをDepartmentNameに設定します。

次に他の列と同じようにText WidgetをHeader Cellに配置し、部署名と入力します。

最後にRow CellにExpression Widgetを配置し、GetEmployees.List.Current.Department.DepartmentNameを設定します。

一旦一覧画面はここまでにしましょう。

2.編集画面作成

まずはScreenを1つ作成します。
編集画面には一覧画面で選択されたEmployeeの情報を渡す必要があるので、Screenを右クリックしてAdd Input Parameterを選択します。

Input Parameterとは引数のことです。
データ型はEmployeeの識別子であるEmployee Identifier型に設定します。

そしてEmployeeを取得するAggregateを作成します。
一覧画面から渡された識別子のレコードだけ取得したいのでFilterタブでEmployeeId = InputIdと設定します。
FilterとはSQLにおけるWHERE句と同じで、取得するレコードをフィルタリングできます。

次に画面にForm Widgetを配置します。

配置したFormの上にAggregateをドラッグ&ドロップすると、Employeeの各項目の入力欄とSaveボタンが自動生成されます。

各項目名を日本語に変更しておきましょう。

そして、デフォルトではSaveボタンに何もアクションが割り当てられていないため、編集内容を保存するClient Actionを作りましょう。
今回は入力値のバリデーションチェック処理などは省きます。
Client Actionを追加し、Employee EntityのCreateOrUpdateEmployeeをドラッグ&ドロップします。

SourceにはGetEmployeeById.List.Currentを設定します。

保存が終わったら、「保存しました。」というメッセージを表示し一覧画面へ戻る処理を実装しましょう。
まずMessageをドラッグ&ドロップで配置し、テキストを入力します。

次にDestinationを配置し、遷移先を先ほど作成した一覧画面に設定します。

フローの最後がDestinationなどの場合、Endを配置する必要はありませんのでEndを削除し、Destinationにコネクタを繋げます。
後はSaveボタンにこのアクションを割り当てたら編集画面の実装は完了です。

3.一覧画面から編集画面への導線を作成

一覧画面のEmployeeCodeを右クリックし、Link toから編集画面を選択します。

Input ParameterにGetEmployees.List.Current.Employee.Idを設定すると、選択された行のEmployeeIdが編集画面へ渡せるようになります。

最後に新規作成ボタンを追加しましょう。
適当な位置にボタンを配置し、On Clickに編集画面を設定します。

新規作成時には識別子がまだ存在しないため、Input ParameterにはNullIdentifier()を選択しましょう。

これで一覧画面から編集画面へ遷移できるようになりました。

4.動作を確認してみる

Publish後、Open In Browserで画面を開き、動作を確認してみましょう。

5.最後に

全体的にSQLの知識がある前提の説明になってしまっておりすみません…
次回はStructureの使い方について紹介していきます。