登録・編集・参照画面の作成
ここでは、登録・編集・参照画面を作成する際の基本的なフローと設定について紹介します。
このケースは、Accel Studioの「マスタメンテナンス」テンプレートの一覧画面をもとに説明しています。コンテンツ種別はBulmaです。実際の画面や設定などを確認したい場合は、「ローコード開発チュートリアルガイド - 4.2.2. テンプレートからアプリケーションのベースを作る」を参照し、アプリケーションを生成してください。
Step 1 画面レイアウトとデザイン調整
登録・編集・参照画面は、情報を入力・送信し、参照するための画面です。1つの画面を分解すると、以下のような構成要素に分けられます。それぞれの要素はコンテナ単位で整理しています。
- 画面のレイアウトやデザイン調整方法については、「画面レイアウトとデザイン調整」を参照してください。
- コンテナページに分ける手順については、「画面デザインの編集 > コンテナページに分ける」を参照してください。
登録・編集・参照画面のレイアウト構成やデザインについては、「intra-mart Design System - フォーム画面」を参照してください。
Step 2 画面変数の設定
登録・編集・参照画面の表示や操作に必要な変数をあらかじめ準備します。
変数（$variable）の準備
画面内で使う変数は、画面の操作によって変化する値やサーバ通信で利用する値だけでなく、業務フローで使用される一意識別キーも定義します。
ここでは、主に次の変数を準備します。
state：画面表示・操作用の状態変数endPoint：サーバ通信関連businessKey：一意識別キー
entityの配下では、IM-Repositoryのデータ定義を利用しています。エンティティを利用することで、変数の構造を維持しつつ、同じデータ定義を繰り返し作成する手間を省くことができます。
変数にエンティティを利用する方法については、「画面変数の設定 - 応用操作 > IM-Repositoryのデータ定義を利用する」を参照してください。
これらの配下に含まれる変数については、下記の一覧を参照してください。
- state
- endPoint
- businessKey
stateは、画面上の表示状態や操作状態を保持するための変数です。たとえば、入力内容の保持や選択状態の管理に使用します。
| 変数 | 型 | 説明 |
|---|---|---|
entity.tutorial_todo_app | オブジェクト | Todoデータ1件の情報を格納するオブジェクト |
entity.tutorial_todo_app.id | 文字列 / null | TodoのID（主キー） |
entity.tutorial_todo_app.title | 文字列 / null | タイトル |
entity.tutorial_todo_app.detail | 文字列 / null | 詳細説明 |
entity.tutorial_todo_app.category | 文字列 / null | カテゴリ |
entity.tutorial_todo_app.importance | 文字列 / null | 重要度 |
entity.tutorial_todo_app.status | 文字列 / null | ステータス（未着手、進行中、完了など） |
entity.tutorial_todo_app.manager | 文字列 / null | 担当者 |
entity.tutorial_todo_app.deadline | 文字列 / null | 期限 |
entity.tutorial_todo_app.registered_user | 文字列 / null | 登録者 |
entity.tutorial_todo_app.registered_date | 文字列 / null | 登録日 |
entity.tutorial_todo_app.update_user | 文字列 / null | 更新者 |
entity.tutorial_todo_app.update_date | 文字列 / null | 更新日 |
confirmResult | 真偽値 | 確認ダイアログの結果（OK/キャンセルなど）を保持 |
isChanged | 真偽値 | 画面の入力値が変更されたかどうかを判定するフラグ |
isLocked | 真偽値 | データがロックされているか（編集不可か）を判定するフラグ |
key.id | 文字列 / null | 現在操作対象のTodoのIDを保持（参照・編集・削除用） |
endPointは、サーバと通信する際のエンドポイント情報を保持します。データの取得や送信時に参照されます。
- refer
- edit
- register
- delete
| 変数 | 型 | 説明 |
|---|---|---|
requestParameter.id | 文字列 / null | 取得したいTodoのID |
responseData.entity.tutorial_todo_app | オブジェクト | APIから返却されるTodoデータ |
| 変数 | 型 | 説明 |
|---|---|---|
requestParameter.entity.tutorial_todo_app | オブジェクト | 更新対象のTodoデータ。ユーザが編集した内容を送信する |
| 変数 | 型 | 説明 |
|---|---|---|
requestParameter.entity.tutorial_todo_app | オブジェクト | 新規登録するTodoデータ |
responseData.duplicate | 真偽値 / null | 登録時に重複IDなどがある場合に設定される |
| 変数 | 型 | 説明 |
|---|---|---|
requestParameter.id | 文字列 / null | 削除対象のTodoのID |
businessKeyは、複数の画面やワークフローをまたぐ処理の管理に使用されることが多いキーです。
| 変数 | 型 | 説明 |
|---|---|---|
businessKey | 文字列 / null | 業務フローで使用される一意識別キー（ワークフロー連携やトランザクション管理などで使用） |
変数の命名方法や構造については、「Low-Code HANDBOOK - 変数構造を検討する - IM-BloomMaker」を参照してください。
定数（$constant）の準備
画面内で使う定数は、画面モード、画面URL、アイコン、検索・ソート・ページングの初期値を体系的に管理するために定義します。
ここでは、主に次の定数を準備します。
mode：画面モードの定義screenUrl：画面URL
- mode
- screenUrl
modeは、画面の操作モードを表す定数です。各モードによって画面の表示や操作の振る舞いを切り替えます。
| キー | 値 | 説明 |
|---|---|---|
register | "register" | 新規登録モード |
refer | "refer" | 参照モード（編集不可） |
edit | "edit" | 編集モード |
screenUrlは、各モードに対応する画面のパスを定義しています。画面遷移時に使用します。
| キー | 値 | 説明 |
|---|---|---|
list | "accel-studio-app/template_master_maintenance/list" | 一覧画面の URL |
定数の命名例については、「Low-Code HANDBOOK - 定数の定義例 - IM-BloomMaker」を参照してください。
入力変数（$input）の準備
入力変数は、画面や処理がどのモードで動作するかを指定するために定義します。
| 変数名 | 型 | 用途 | 説明 |
|---|---|---|---|
__mode__ | 文字列 | 画面やフローの動作モードを制御 | "register"は新規登録モードを示す |
id | 文字列 / null | 登録対象のデータIDを保持 | 新規登録時はnull、編集や参照時は対象データのIDがセットされる |
画面種別の判別する入力変数については、「Accel Studio テンプレートカタログ - 8.1.2. 画面種別の判別処理」を参照してください。
多言語変数（$i18n）の準備
多言語変数は、UIテキストやメッセージ、説明文といった文言を複数の言語に対応させるため定義します。 まずは、Step 3のアクション設定で使用するメッセージの「キー名」と「標準」を登録し、動作を確認してみましょう。
| キー | 標準 |
|---|---|
cap_dialog_ok | OK |
cap_dialog_cancel | キャンセル |
msg_register_confirm | 登録します。よろしいですか？ |
msg_update_confirm | 更新します。よろしいですか？ |
msg_delete_confirm | 削除します。よろしいですか？ |
msg_duplicate_primary_key | 既にレコードが存在しています。 |
msg_validation_error | 入力内容に誤りがあります。 |
msg_screen_transition_confirm | 入力内容を破棄して画面遷移します。よろしいですか？ |
多言語変数を準備する際に、画面の文言を整理することが大切です。詳細は「intra-mart Developer Portal - 画面の文言を用途に合わせて変数に置き換えたい」を参照してください。
Step 3 アクション設定
Step 2で設定した画面変数を利用して、ユーザ操作に応じたアクションを作成します。変数の値をどのように受け渡し、どのような処理の流れを構築しているのかを確認してみましょう。
アクション設定1 - 「初期表示時」
「初期表示時」アクションでは、登録・編集・参照画面を表示した際の処理を設定します。
No. アクションアイテムと設定内容 1 入力規則エラーを非表示にする
2 空処理 【実行条件】全ての条件に一致
変数$input.modeが$constant.mode.registerでないとき3 カスタムスクリプトを実行する
const requestParameter = $im.resolve('$input');
delete requestParameter.__mode__;
$variable.state.key = requestParameter;
$variable.businessKey = requestParameter;4 変数
$variable.endPoint.refer.requestParameterに$variable.state.keyを代入する5 変数
$variable.state.isChangedに$env.const.falseを代入する6 IM-LogicDesignerフロールーティング
accel-studio-app/template_master_maintenanceにリクエスト送信する
・リクエストパラメータ：$variable.endPoint.refer.requestParameter
・レスポンスデータ：$variable.endPoint.refer.responseData.entity7 変数
$variable.state.entityに$variable.endPoint.refer.responseData.entityを代入する
- IM-LogicDesignerのビジネスロジックと連携する方法については、「intra-mart Developer Portal - アクション設定でビジネスロジックと連携したい」を参照してください。
- アクション設定では、スクリプトを直接記述することが可能です。スクリプトにはIM-BloomMaker独自の記法を用いるため、詳細は「intra-mart Developer Portal - アクション設定でカスタムスクリプトを使用したい」を参照してください。
「空処理」アクションアイテムは、以下のような場面で利用します。
- 条件分岐の一方を意図的に処理なしにする場合：
たとえば、分岐Aは処理を行わず、分岐Bだけに処理を割り当てたいとき、A側に「空処理」を配置する - 一部の条件で何もせずフローを終了させたい場合：
「空処理」を利用することで、明示的に「処理なし」と示すことができる
アクション設定2 - 「一覧画面へ遷移」
登録・編集・参照画面から一覧画面に表示を切り替えるための処理を設定します。
No. アクションアイテムと設定内容 1 URL $constant.screenUrl.listに遷移する
アクション設定3 - 「〇〇ボタンが押されたとき」
登録・編集・参照画面に配置したボタンをユーザがクリックした後の処理を設定します。
「登録ボタンが押されたとき」アクション
「登録」ボタンをクリックした後、再度確認ダイアログを表示しています。アクション設定2で作成した「一覧画面へ遷移」アクションを呼び出します。
No. アクションアイテムと設定内容 1 入力規則エラーを非表示にする
2 メッセージ $i18n.msg_validation_errorを表示する
・メッセージのタイプ：warning
・閉じる時間(ミリ秒)：5000【実行条件】全ての条件に一致
変数$variable.state.entityが入力規則に即していないとき3 空処理 【実行条件】全ての条件に一致
変数$variable.state.entityが入力規則に即していないとき4 メッセージ $i18n.msg_register_confirmを確認ダイアログで表示する
・代入先：$variable.state.confirmResult
・OKボタンのラベル名：$i18n.cap_dialog_ok
・キャンセルボタンのラベル名：$i18n.cap_dialog_cancel
・ボタンの位置：右寄せ5 空処理 【実行条件】全ての条件に一致
変数$variable.state.confirmResultが$env.const.trueでないとき6 変数 $variable.endPoint.register.requestParameter.entityに$variable.state.entityを代入する7 IM-LogicDesignerフロールーティング accel-studio-app/template_master_maintenanceにリクエスト送信する
・リクエストパラメータ：$variable.endPoint.register.requestParameter.entity
・レスポンスデータ：$variable.endPoint.register.responseData
・セキュアトークンを送信する：チェック8 アクション 「一覧画面へ遷移」を実行する【実行条件】全ての条件に一致
変数$variable.endPoint.register.responseData.duplicateが$env.const.trueでないとき9 メッセージ $i18n.msg_duplicate_primary_keyを表示する【実行条件】全ての条件に一致
変数$variable.endPoint.register.responseData.duplicateが$env.const.trueのとき
メッセージの確認ダイアログは、右側のイメージのようなデザインです。処理実行前にユーザへ確認を促すために利用します。
「更新ボタンが押されたとき」アクション
「登録ボタンが押されたとき」アクションと基本的な流れは同じです。この場合、既存のアクションを複製して、一部のアクションアイテムを変更します。
No. アクションアイテムと設定内容 1 入力規則エラーを表示する 2 メッセージ $i18n.msg_validation_errorを表示する
・メッセージのタイプ：warning
・閉じる時間(ミリ秒)：5000【実行条件】全ての条件に一致
変数$variable.state.entityが入力規則に即していないとき3 空処理 【実行条件】全ての条件に一致
変数$variable.state.entityが入力規則に即していないとき4 メッセージ $i18n.msg_update_confirmを確認ダイアログで表示する
・代入先：$variable.state.confirmResult
・OKボタンのラベル名：$i18n.cap_dialog_ok
・キャンセルボタンのラベル名：$i18n.cap_dialog_cancel
・ボタンの位置：右寄せ5 空処理 【実行条件】全ての条件に一致
変数$variable.state.confirmResultが$env.const.trueでないとき6 変数 $variable.endPoint.edit.requestParameter.entityに$variable.state.entityを代入する7 IM-LogicDesignerフロールーティング accel-studio-app/template_master_maintenanceにリクエスト送信する
・リクエストパラメータ：$variable.endPoint.edit.requestParameter.entity
・セキュアトークンを送信する：チェック8 URL $constant.screenUrl.listに遷移する
アクションの複製方法について、詳細は「アクション設定 > アクションを複製する」を参照してください。
「削除ボタンが押されたとき」アクション
「削除」ボタンをクリックした後、アクション設定2で作成した「一覧画面へ遷移」アクションを呼び出します。
No. アクションアイテムと設定内容 1 メッセージ $i18n.msg_delete_confirmを確認ダイアログで表示する
・代入先：$variable.state.confirmResult
・OKボタンのラベル名：$i18n.cap_dialog_ok
・キャンセルボタンのラベル名：$i18n.cap_dialog_cancel
・ボタンの位置：右寄せ2 空処理 【実行条件】全ての条件に一致
変数$variable.state.confirmResultが$env.const.trueでないとき3 変数 $variable.endPoint.delete.requestParameterに$variable.state.keyを代入する4 IM-LogicDesignerフロールーティング accel-studio-app/template_master_maintenanceにリクエスト送信する
・リクエストパラメータ：$variable.endPoint.delete.requestParameter
・セキュアトークンを送信する：チェック5 空処理 【実行条件】全ての条件に一致
変数$variable.state.confirmResultが$env.const.trueでないとき6 変数 $variable.endPoint.delete.requestParameterに$variable.state.keyを代入する7 アクション 「一覧画面へ遷移」を実行する
「戻るボタンが押されたとき」アクション
「戻る」ボタンをクリックした後、確認ダイアログで「OK」が選択された場合、またはデータに変更がない場合に「一覧画面へ遷移」アクションを呼び出します。
No. アクションアイテムと設定内容 1 メッセージ $i18n.msg_screen_transition_confirmを確認ダイアログで表示する
・代入先：$variable.state.confirmResult
・OKボタンのラベル名：$i18n.cap_dialog_ok
・キャンセルボタンのラベル名：$i18n.cap_dialog_cancel
・ボタンの位置：右寄せ【実行条件】全ての条件に一致
変数$variable.state.isChangedが$env.const.trueのとき2 アクション 「一覧画面へ遷移」を実行する【実行条件】いずれかの条件に一致
変数$variable.state.confirmResultが$env.const.trueのとき
変数$variable.state.isChangedが$env.const.falseのとき
アクション設定4 - 「入力フォームの値を編集したとき」
編集画面で入力フォームの値を変更した場合の処理を設定します。
No. アクションアイテムと設定内容 1 変数 $variable.state.isChangedに$env.const.trueを代入する
この画面コンテンツは、登録・編集・参照（CRUD）処理に最適化された基本形です。画面ごとに役割を持ち、構成されています。
- 登録画面：新しいデータを追加するための画面。必要な入力項目をユーザに提示する
- 編集画面：既存データの内容を更新するための画面。変更可能な項目のみを編集できるようにする
- 参照画面：データを閲覧するための画面。フィルタリングによって必要な情報を確認できる
この基本構成をもとに、さまざまなシナリオを想定しながら活用してみましょう。