4.2.5. 登録/更新/参照画面の修正¶
前のページまでで仕様に合わせた業務ロジックが作成できました。「マスタメンテナンステンプレート」から作成した画面は登録、更新、参照画面が一つの画面で作られており、アクセスするURLによってどの画面を表示するかが決まります。しかし、テンプレートから生成された画面では、設定した全ての項目が入力項目となっているため、修正した処理と合わなくなっています。そのままでも画面の利用は可能ですが、反映されない項目が必須入力になっていたり、一部項目が期待した値ではないことがあるため、仕様に合わせて画面を修正していきます。アプリケーションの全体図だと、以下の色が塗られた箇所が対象です。
このページの手順については、以下で動画による解説も行っています。併せてご利用ください。
4.2.5.1. 入力、表示項目の修正¶
まずは、操作画面の入力、表示項目の修正を行います。アプリケーション詳細のアプリケーション構成情報で「画面」のタブを選択します。「【チュートリアル】ToDoアプリケーション 登録・編集・参照画面」を選択します。IM-BloomMaker コンテンツ画面で「デザイン編集」を選択します。IM-BloomMakerのデザイン編集画面が表示されます。
4.2.5.1.1. 入力項目の修正¶
画面上部のタブの中から「Input Area」タブを選択します。「Input Area」タブは入力項目が設定された画面です。まずは、プルダウンの入力項目を登録したい値となるように修正します。テンプレートから自動生成された画面のプルダウンには、初期状態では以下のように設定されています。
- labels
- （空欄）
- Selection 1
- Selection 2
- Selection 3
- values
- （空欄）
- 1
- 2
- 3
カテゴリのプルダウンから設定します。画面に配置された「カテゴリ」のプルダウン要素を選択します。
画面右側に表示される「プルダウン要素」の「エレメント固有」 - 「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 > entry > id」のを選択します。
変数エディタの入力規則欄にある「必須」のチェックを外して決定を選択します。
同様に「$variable > state > entry]に設定されている「manager」、「register_user」、「register_date」、「update_user」、「update_date」の「必須」チェックを外します。再度、動作確認を行ってみましょう。登録が完了し、一覧画面への遷移が行われました。
これで、操作画面の修正は完了です。画面上部ので編集内容を保存してください。