4.2.5. 登録/更新/参照画面の修正¶
「マスタメンテナンステンプレート」から作成した画面は登録、更新、参照画面が1つの画面で作られており、アクセスするURLによって表示する画面種別を制御しています。テンプレートから生成された画面では、設定した全ての項目が入力項目となっているため、修正した処理と合わなくなっています。修正せずとも画面の利用は可能ですが、ロジックの仕様に合わせて画面を修正していきます。以下のアプリケーション全体図にある、色が塗られたところが該当箇所です。
4.2.5.1. 入力、表示項目の修正¶
まずは、操作画面の入力、表示項目の修正を行います。「サイトマップ」→「Accel Studio」→「アプリケーション管理」→「アプリケーション一覧」→「【チュートリアル】ToDoアプリケーション」の順に遷移します。アプリケーション管理画面のアプリケーション構成情報で「画面」のタブを選択します。「【チュートリアル】ToDoアプリケーション 登録・編集・参照画面」を選択します。IM-BloomMakerの「デザイン編集画面」が表示されます。
4.2.5.1.1. 入力項目の修正¶
画面上部のタブの中から「Input Area」タブを選択します。「Input Area」タブは入力項目が設定された画面です。まずは、プルダウンの入力項目を登録したい値となるように修正します。テンプレートから自動生成された画面のプルダウン要素のlabels、valuesには変数値が設定されています。画面項目「カテゴリ」のプルダウンから設定します。画面に配置された「カテゴリ」のプルダウン要素を選択します。
画面右側に表示される「プルダウン要素」の「エレメント固有」 - 「labels」のラジオボタンで固定値を選択し、以下のように設定します。「labels」はプルダウンの表示要素です。1行目には何も入力せずに改行するように注意してください。
- labels
- （空欄）
- タスク
- スケジュール
- 移動
- メモ
同様に「エレメント固有」 - 「values」のラジオボタンで固定値を選択し、以下のように設定します。「values」はプルダウンを選択した際に送信される値の要素です。「labels」同様に、1行目には何も入力せずに改行するように注意してください。
- values
- （空欄）
- task
- schedule
- move
- memo
「labels」と「values」は同じ行番号の値同士が対応して選択値と送信値として設定されます。例えば、上記の設定を行った場合、プルダウンで3行目の「スケジュール」を選択した場合、「values」の3行目である「schedule」が送信値として「value」に指定した変数に設定されます。同様にほかのプルダウン要素も設定していきます。「重要度」の「labels」と「values」に以下のように設定します。
- labels
- （空欄）
- 高
- 中
- 低
- values
- （空欄）
- high
- medium
- low
次は、「ステータス」の「labels」と「values」を以下のように設定します。
- labels
- （空欄）
- 未着手
- 着手中
- 完了
- 保留
- values
- （空欄）
- waiting
- working
- completion
- pending
これで、プルダウン要素の入力値の設定が完了しました。
4.2.5.1.2. 画面の表示非表示の修正¶
続けて、画面の表示、非表示の設定を行います。「ステータス」は登録のタイミングでは自動で「未着手」を設定します。そのため、登録画面では「ステータス」を非表示に、更新、参照画面では表示するようにします。画面に配置された、「ステータス」のフィールドを選択します。
画面右側の「プロパティ」タブの「共通」 - 「表示/非表示」の「変数値」を選択し、入力ボックスに以下の値を入力します。「= $input.__mode__ != $constant.mode.register」定数である「$constant.mode」には、表示する画面の種別がテンプレートで以下のように設定されています。
キー 画面種別 register 登録画面 edit 編集画面 refer 参照画面 list 一覧画面 「$input.__mode__」はテンプレートで作成された前処理によって、画面を表示した際に上記のいずれかの値が格納されます。そのため、この2つの変数の比較によって、表示画面毎の処理の切り替えが行えます。
4.2.5.1.3. 不要な入力項目の削除¶
業務ロジックの修正で自動設定とした、「ID」や「登録者」などの情報を画面上の入力項目から削除します。IDのフィールドを選択し、Deleteキーを押すか、画面上部のをクリックして削除します。
同様に、「担当者」についても今回のチュートリアルでは自動設定するため、入力項目から削除します。以下の表示項目についてもデータベース上での管理用の項目のため削除していきます。
- 登録者
- 登録日
- 更新者
- 更新日
コラム
画面項目の削除で誤った項目を削除してしまった場合など、前の操作を取り消したい場合は画面上部の 
か、「Ctrl＋z」で直前の操作を取り消せます。
か、「Ctrl＋z」で直前の操作を取り消せます。
4.2.5.1.4. 動作確認と必須設定の修正¶
これまでの操作で画面には必要な項目のみとなったため、動作確認を行いましょう。画面上部のをクリックしてください。
プレビュー画面に登録画面が表示されました。以下のように値を入力し、登録ボタンをクリックします。
登録ボタンを押下しても、画面は動作しません。これは、登録処理等に利用している削除対象の変数が必須設定されているためです。変数の必須設定を削除します。ブラウザの「デザイン編集」タブに戻り、デザイン編集画面の右側にある変数タブを選択します。
「$variable > state > entity > tutorial_todo_app > id」のを選択します。
変数エディタの入力規則欄にある「必須」のチェックを外して決定を選択します。
同様に「$variable > state > entity > tutorial_todo_app」に設定されている「manager」、「registered_user」、「registered_date」、「update_user」、「update_date」の「必須」チェックを外します。再度、動作確認を行ってみましょう。登録が完了し、一覧画面への遷移が行われました。これで、操作画面の修正は完了です。ブラウザの「デザイン編集」タブに戻り、画面上部ので編集内容を保存してください。