4.2.6. 一覧画面の修正¶
前のページではToDoの登録や更新を行う画面から不要な項目や表示するデータの修正を行いました。一覧画面はまだテンプレートで作成されたままのため、操作画面同様に不要な項目が表示されていたり、データベースから取得したそのままのデータが表示されてます。一覧画面の表示項目の変更やデータベースから取得してきたデータを表示用に変換を行いましょう。また、 IM-LogicDesigner で作成した検索ロジックを呼び出し、高度な検索を行えるようにします。アプリケーションの全体図だと、以下の色が塗られた箇所が対象です。
このページの手順については、以下で動画による解説も行っています。併せてご利用ください。
4.2.6.1. 表示項目の修正¶
アプリケーション詳細のアプリケーション構成情報で「画面」のタブを選択します。「【チュートリアル】ToDoアプリケーション一覧画面」を選択します。IM-BloomMaker コンテンツ画面で「デザイン編集」を選択します。IM-BloomMakerのデザイン編集画面が表示されます。まず、操作画面の入力、表示項目の修正を行います。
4.2.6.1.1. 不要な表示項目の削除¶
まず、画面上部のタブから「Table」タブを選択してください。一覧画面ではすべての項目が表示されているため、「ID」や「担当者」といった管理用の項目と文字数の多い「詳細」を一覧に表示させないようにします。「マスタメンテナンステンプレート」から作成した画面の一覧は「リッチテーブル」エレメントを利用して作成されます。「リッチテーブル」はエレメント固有の設定である「headerRowString」に設定した変数によって表示項目が変わるため、テンプレートで自動作成された変数を削除します。画面右側で変数タブを選択します。
変数の「$variable > headerRowString > id」を選択し、をクリックして削除します。
同様に、「$variable > headerRowString」配下の以下の変数も削除します。「detail」、「manager」、「register_user」、「register_date」、「update_user」、「update_date」
4.2.6.1.2. 表示内容の修正¶
次に、表示する値をデータベースに格納された値ではなく、ユーザが確認しやすい形式に変更していきます。また、テンプレートから生成された一覧取得処理を利用しているため、全ユーザが登録した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」のを選択します。
アクションエディタ画面で「 IM-LogicDesigner 」タブにある「 IM-LogicDesigner フロールーティング〇にリクエストを送信する」をドラッグ＆ドロップで一番上に配置します。
「 IM-LogicDesigner フロールーティング」に IM-LogicDesigner で作成した「tutorial_todo_app/list/search」を設定します。レスポンスデータに「$variable.responseDate.list.data」を設定します。
自動で作成された IM-LogicDesigner フロールーティングを無効にします。
次に、表示項目をデータベースに格納された値ではなく、ユーザにわかりやすい状態に変更します。取得した値を元に、作成した「カテゴリ」、「重要度」、「ステータス」の定数から表示用の項目を設定します。アクションエディタ画面で「標準」タブにある「カスタムスクリプトを実行する」を以下の位置へ配置します。
「カスタムスクリプト」に以下のコードを設定します。let records = $variable.responseData.list.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. 簡易検索の削除¶
詳細な検索を行う機能を追加するため、もともとある簡易検索を非表示にします。画面内のテーブル要素を選択し、「プロパティ」タブの「リッチテーブル」 - 「エレメント固有」 - 「allowSimpleSearch」のチェックを外します。
4.2.6.2.2. 検索の条件の変数を作成¶
検索処理を行うため、まずは検索用の変数を設定します。画面右側の「変数」タブをクリックし、「$variable」に検索用の変数を追加します。「$variable」を選択し、変数エディタ画面でキー名を「searchCondition」、値の型を「マップ」、代入値を「マップ」に設定します。「searchCondition」に以下の変数を設定します。
キー名 値の型 title 文字列 category 文字列 status 文字列 importance 文字列 
変数はJSON入力で以下を記載しても設定できます。"searchCondition": { "title": "", "category": "", "status": "", "importance": "" }JSON入力する場合は、入力値の
4.2.6.2.3. 検索のアクション処理を作成¶
画面右側のアクションタブを選択します。を選択し、アクションエディタを呼び出します。
アクションエディタ画面でアクション名を「search」に設定します。「 IM-LogicDesigner 」タブにある「 IM-LogicDesigner フロールーティング〇にリクエストを送信する」をドラッグ＆ドロップで配置します。
「 IM-LogicDesigner フロールーティング」に IM-LogicDesigner で作成した「tutorial_todo_app/list/search」を設定します。リクエストパラメータに「$variable > searchCondition」を設定します。レスポンスデータに「$variable > responseData > list > data」を設定します。
アクションエディタ画面で「標準」タブにある「変数〇に〇を代入する」を以下の位置へ配置します。
変数は以下のように設定します。変数「$variable.state.tableData」に「$variable.responseData.list.data.records」を代入する。
次に、アクションエディタ画面で「標準」タブにある「カスタムスクリプトを実行する」を以下の位置へ配置します。
カスタムスクリプトに以下のコードを設定します。let records = $variable.responseData.list.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. 検索の入力欄を作成¶
次に、検索を行う要素の入力欄を作成します。検索の入力欄は、「Search Condition」に作成します。画面上部のタブから「Search Condition」タブを選択してください。まずは、概要の入力欄から作成します。表示領域として「フォーム部品（Bulma）」 - 「水平フィールド」を選択し、配置します。
入力欄として「フォーム部品（Bulma）」 - 「テキスト入力」を選択し、先ほど配置した「水平フィールド」に配置します。
先ほど配置した「テキスト入力」を選択し、画面右側の「プロパティ」タブ - 「テキスト入力要素」 - 「エレメント固有」 - 「value」に作成した変数である「$variable > searchCondition > title」を指定します。
「水平フィールド」の左側をクリックし、画面右側の「プロパティ」タブ - 「水平フィールドラベル」 - 「エレメント固有」 - 「label」に「概要」と入力します。
次にカテゴリの検索欄を作成します。表示領域として「フォーム部品（Bulma）」 - 「水平フィールド」を選択し、配置します。
入力欄として「フォーム部品（Bulma）」 - 「プルダウン」を選択し、配置します。
先ほど配置した「プルダウン」を選択し、画面右側の「プロパティ」タブの「プルダウン要素」 - 「エレメント固有」の「labels」と「values」に固定値で以下を設定します。
- labels
- （空欄）
- タスク
- スケジュール
- 移動
- メモ
- values
- （空欄）
- task
- schedule
- move
- memo
画面右側の「プロパティ」タブの「プルダウン要素」 - 「エレメント固有」 - 「value」に作成した変数「$variable > searchCondition > category」を指定します。
「水平フィールド」の左側をクリックし、画面右側の「プロパティ」タブ - 「水平フィールドラベル」 - 「エレメント固有」 - 「label」に「カテゴリ」と入力します。
次にステータスの検索欄を作成します。表示領域として「フォーム部品（Bulma）」 - 「水平フィールド」を選択し、配置します。
入力欄として「フォーム部品（Bulma）」 - 「プルダウン」を選択し、配置します。
先ほど配置した「プルダウン」を選択し、画面右側の「プロパティ」タブの「プルダウン要素」 - 「エレメント固有」の「labels」と「values」に固定値で以下を設定します。
- labels
- （空欄）
- 未着手
- 着手中
- 完了
- 保留
- values
- （空欄）
- waiting
- working
- completion
- pending
画面右側の「プロパティ」タブの「プルダウン要素」 - 「エレメント固有」 - 「value」に作成した変数「$variable > searchCondition > status」を指定します。
「水平フィールド」の左側をクリックし、画面右側の「プロパティ」タブ - 「水平フィールドラベル」 - 「エレメント固有」 - 「label」に「ステータス」と入力します。
最後に重要度の検索欄を作成します。作成手順はカテゴリ、ステータスと同様です。表示領域として「フォーム部品（Bulma）」 - 「水平フィールド」を選択し、配置します。
入力欄として「フォーム部品（Bulma）」 - 「プルダウン」を選択し、配置します。
先ほど配置した「プルダウン」を選択し、画面右側の「プロパティ」タブの「プルダウン要素」 - 「エレメント固有」の「labels」と「values」に固定値で以下を設定します。
labels
- （空欄）
- 高
- 中
- 低
values
- （空欄）
- high
- medium
- low
画面右側の「プロパティ」タブの「プルダウン要素」 - 「エレメント固有」 - 「value」に作成した変数「$variable > searchCondition > importance」を指定します。
「水平フィールド」の左側をクリックし、画面右側の「プロパティ」タブ - 「水平フィールドラベル」 - 「エレメント固有」 - 「label」に「ステータス」と入力します。
コラム
labelやvalueを変数で設定する場合はまず設定用の定数を作成します。
例として「カテゴリー」のlabelとvalueを変数で設定します。
定数を新規作成して以下を設定します。
| キー名 | category_lavel |
| 配列の次元数 | １次元配列 |
| 配列の要素数 | 5 |
作成された「category_lavel」の配列に以下を設定します。
| キー名 | 代入値 |
| 1 | タスク |
| 2 | スケジュール |
| 3 | 移動 |
| 4 | メモ |
同様に以下を作成します。
| ラベル | 入力値 |
| キー名 | category_values |
| 配列の次元数 | １次元配列 |
| 配列の要素数 | 5 |
作成された「category_values」の配列に以下を設定します。
| キー名 | 代入値 |
| 1 | task |
| 2 | schedule |
| 3 | move |
| 4 | memo |
作成した「category_lavel」と「category_values」を検索欄のプルダウンにそれぞれ設定することで変数値で「label」と「values」を設定ができます。
4.2.6.2.5. 検索ボタンを作成¶
IM-LogicDesigner で作成した検索処理をアクションとして設定します。画面上部の「Table Operation」タブを選択します。
「フォーム部品（Bulma）」 - 「フィールド」を選択し、画面左側に配置します。
「フォーム部品（Bulma）」 - 「ボタン」を選択し、配置します。
配置した「ボタン」を選択し、画面右側の「プロパティ」タブの「ボタン要素」 - 「エレメント固有」 - 「textContent」に「検索」と入力します。「ボタン要素」 - 「エレメント固有」 - 「leftIconClass」に「fas fa-search」と入力し、アイコンを表示します。
「ボタン要素」 - 「イベント」 - 「クリック時」に作成した「search」を設定します。
検索機能が実装できたので動作確認を行いましょう。画面上部のを押下してください。
検索欄を埋めて検索してみましょう。