4.2.6. 一覧画面の修正¶
前のページではToDoの登録や更新を行う画面から不要な項目や表示するデータについて修正を行いました。一方で、一覧画面はテンプレートで作成されたままであるため、操作画面同様に不要な項目が表示されていたり、データベースから取得したそのままのデータが表示されてます。ここからは、一覧画面の表示項目を変更したり、データベースから取得してきたデータを表示用に変換するための修正を行います。以下のアプリケーション全体図にある、色が塗られたところが該当箇所です。
このページの手順について、以下の動画からも確認できます。併せてご利用ください。注意
動画は2023 Autumn(Hollyhock)環境で録画したものです。操作内容に大きな差はありませんが、アプリケーション管理画面など一部のUIに差異があります。
4.2.6.1. 表示項目の修正¶
「サイトマップ」→「Accel Studio」→「アプリケーション管理」→「アプリケーション一覧」→「【チュートリアル】ToDoアプリケーション」の順に遷移します。アプリケーション管理画面のアプリケーション構成情報で「画面」のタブを選択します。「【チュートリアル】ToDoアプリケーション一覧画面」を選択します。IM-BloomMaker コンテンツ画面で「デザイン編集」を選択します。IM-BloomMakerの「デザイン編集画面」が表示されます。
4.2.6.1.1. 不要な表示項目の削除¶
まず、操作画面の入力、表示項目の修正を行います。画面上部のタブから「Table」タブを選択してください。現状の一覧画面ではすべての項目が表示されています。ここから「ID」や「担当者」といった管理用の項目、文字数の多い「詳細」を一覧に表示させないように修正します。「マスタメンテナンステンプレート」から作成した画面の一覧は「リッチテーブル」エレメントを利用して作成されます。「リッチテーブル」はエレメント固有の設定である「headerRowString」に設定した変数によって表示項目が変わるため、テンプレートで自動作成された変数を削除します。画面右側で変数タブを選択します。
変数の「$variable > headerRowString > id」を選択し、をクリックして削除します。
同様に、「$variable > headerRowString」配下の以下の変数も削除します。「detail」、「manager」、「registered_user」、「registered_date」、「update_user」、「update_date」
4.2.6.1.2. 表示内容の修正¶
次に、表示する値をデータベースに格納された値ではなく、ユーザが確認しやすい形式に変換するための修正を行います。また、現状はテンプレートから生成された一覧取得処理を利用しているため、全ユーザが登録したToDoが表示されます。これについても、操作ユーザのToDoのみが表示されるよう、併せて修正します。まず、「カテゴリ」をユーザが確認しやすい値とするために、表示用の定数を作成します。画面右側で変数タブを選択します。表示を「変数」から「定数」に変更します。「$constant」を選択し、をクリックします。
定数エディタ画面でキー名を「category」、値の型を「マップ」に設定します。作成した「category」に以下の定数を設定します。
キー名 値の型 代入値 task 文字列 タスク schedule 文字列 スケジュール move 文字列 移動 memo 文字列 メモ 定数はJSON入力で以下のコードを記載しても設定できます。"category": { "task": "タスク", "schedule": "スケジュール", "move": "移動", "memo": "メモ" }JSON入力する場合は、定数のをクリックして「JSONエディタ」を表示してください。また、JSON形式での入力の際には型が上記の表と誤りが無いように注意してください。
次に、「重要度」の表示用の定数を作成します。「$constant」配下に、キー名を「importance」、値の型を「マップ」とした定数を追加します。以下の定数を設定します。
キー名 値の型 代入値 high 文字列 高 medium 文字列 中 low 文字列 低 定数はJSON入力で以下のコードを記載しても設定できます。"importance": { "high": "高", "medium": "中", "low": "低" }JSON入力する場合は、定数の次に、「ステータス」の表示用の定数を作成します。「$constant」配下に、キー名を「status」、値の型を「マップ」とした定数を追加します。以下の定数を設定します。
キー名 値の型 代入値 waiting 文字列 未着手 working 文字列 着手中 completion 文字列 完了 pending 文字列 保留 定数はJSON入力で以下のコードを記載しても設定できます。"status": { "waiting": "未着手", "working": "着手中", "completion": "完了", "pending": "保留" }JSON入力する場合は、定数の
次に、一覧の表示を整え、操作ユーザが登録したToDoのみが表示されるように修正します。画面右側で「アクション」タブを選択します。
「Load Table Data」のを選択します。
アクションエディタ画面で「標準」タブにある「変数〇に〇を代入する」をドラッグ＆ドロップで一番上に配置します。
左側の入力エリアに変数値で「$variable.endPoint.list.requestParameter.searchCondition.manager」と設定します。右側の入力エリアは「abc▼」をクリックして変数値での入力に切り替えた後、「$env.accountContext.userCd」と設定します。
次に、表示項目をデータベースに格納された値ではなく、ユーザにわかりやすい状態に変更します。取得した値を元に、作成した「カテゴリ」、「重要度」、「ステータス」の定数が一覧の値として表示されるように設定します。アクションエディタ画面で「標準」タブにある「カスタムスクリプトを実行する」を、「IM-LogicDesigner フロールーティング〇にリクエストを送信する」アクションの次（上から3番目）に追加します。
「カスタムスクリプト」に以下のコードを設定します。let records = $variable.endPoint.list.responseData.data.records for(let i = 0; i < records.length; i++){ if(records[i].category)records[i].category = $constant.category[records[i].category] if(records[i].status)records[i].status = $constant.status[records[i].status] if(records[i].importance)records[i].importance = $constant.importance[records[i].importance] }アクションエディタの「決定」ボタンをクリックし、保存します。
4.2.6.2. 検索機能の修正¶
「マスタメンテナンステンプレート」から作成した一覧画面には、テンプレートからアプリケーションのベースを作る で検索条件に指定した項目でデータを絞り込む検索機能が実装されています。検索機能を正常に使えるようにするため、各検索項目エレメントの修正を行います。
4.2.6.2.1. 検索項目の修正¶
画面上部のタブの中から「Search Condition」タブを選択します。「Search Condition」タブは検索項目が設定された画面です。「カテゴリ」「重要度」「ステータス」のプルダウンの入力項目を検索に適した値となるように修正し、不要な検索項目を削除しますテンプレートから自動生成された画面のプルダウン要素のlabels、valuesには変数値が設定されています。カテゴリのプルダウンから設定します。画面に配置された「カテゴリ」のプルダウン要素を選択します。画面右側に表示される「プルダウン要素」の「エレメント固有」 - 「labels」のラジオボタンで固定値を選択し、以下のように設定します。「labels」はプルダウンの表示要素です。1行目には何も入力せずに改行するように注意してください。
- labels
- （空欄）
- タスク
- スケジュール
- 移動
- メモ
同様に「エレメント固有」 - 「values」のラジオボタンで固定値を選択し、以下のように設定します。「values」はプルダウンを選択した際に送信される値の要素です。「labels」同様に、1行目には何も入力せずに改行するように注意してください。
- values
- （空欄）
- task
- schedule
- move
- memo
「labels」と「values」は同じ行番号の値同士が対応して選択値と送信値として設定されます。例えば、上記の設定を行った場合、プルダウンで3行目の「スケジュール」を選択した場合、「values」の3行目である「schedule」が送信値として「value」に指定した変数に設定されます。「Search Condition」タブで同様にほかのプルダウン要素も設定していきます。「重要度」の「labels」と「values」に以下のように設定します。
- labels
- （空欄）
- 高
- 中
- 低
- values
- （空欄）
- high
- medium
- low
次は、「ステータス」の「labels」と「values」を以下のように設定します。
- labels
- （空欄）
- 未着手
- 着手中
- 完了
- 保留
- values
- （空欄）
- waiting
- working
- completion
- pending
これで、プルダウン要素の入力値の設定が完了しました。
4.2.6.2.2. 不要な検索項目の削除¶
本アプリでは操作者が担当者として登録したデータのみを一覧に表示する仕様です。したがって、検索項目として「担当者」は不要になるため、不要な検索項目を削除します。「Search Condition」タブで「担当者」項目のフィールドを選択します。
画面上部のをクリックしてフィールドを削除します。
検索機能が動作するか確認を行いましょう。画面上部のを押下してください。
検索欄を埋めて検索してみましょう。
これで一覧画面の修正は完了です。