intra-mart Accel Platform ローコード開発チュートリアルガイド 第9版 2022-12-21

4.2.6. 一覧画面の修正

前のページではToDoの登録や更新を行う画面から不要な項目や表示するデータの修正を行いました。
一覧画面はまだテンプレートで作成されたままのため、操作画面同様に不要な項目が表示されていたり、データベースから取得したそのままのデータが表示されてます。
一覧画面の表示項目の変更やデータベースから取得してきたデータを表示用に変換を行いましょう。
また、 IM-LogicDesigner で作成した検索ロジックを呼び出し、高度な検索を行えるようにします。
アプリケーションの全体図だと、以下の色が塗られた箇所が対象です。
../../../_images/todo_screen_search_overall.png

このページの手順については、以下で動画による解説も行っています。併せてご利用ください。

4.2.6.1. 表示項目の修正

アプリケーション詳細のアプリケーション構成情報で「画面」のタブを選択します。
「【チュートリアル】ToDoアプリケーション一覧画面」を選択します。
IM-BloomMaker コンテンツ画面で「デザイン編集」を選択します。
IM-BloomMakerのデザイン編集画面が表示されます。
まず、操作画面の入力、表示項目の修正を行います。

4.2.6.1.1. 不要な表示項目の削除

まず、画面上部のタブから「Table」タブを選択してください。
一覧画面ではすべての項目が表示されているため、「ID」や「担当者」といった管理用の項目と文字数の多い「詳細」を一覧に表示させないようにします。
「マスタメンテナンステンプレート」から作成した画面の一覧は「リッチテーブル」エレメントを利用して作成されます。
「リッチテーブル」はエレメント固有の設定である「headerRowString」に設定した変数によって表示項目が変わるため、テンプレートで自動作成された変数を削除します。
画面右側で変数タブを選択します。
../../../_images/todo_bloom2-1.png

変数の「$variable > headerRowString > id」を選択し、 bm_variable_delete をクリックして削除します。
同様に、「$variable > headerRowString」配下の以下の変数も削除します。
「detail」、「manager」、「register_user」、「register_date」、「update_user」、「update_date」
../../../_images/todo_bloom2-2.png

4.2.6.1.2. 表示内容の修正

次に、表示する値をデータベースに格納された値ではなく、ユーザが確認しやすい形式に変更していきます。
また、テンプレートから生成された一覧取得処理を利用しているため、全ユーザが登録したToDoが表示されてるため、合わせて修正します。

まず、「カテゴリ」をユーザが確認しやすい値とするために、表示用の定数を作成します。
画面右側で変数タブを選択します。
表示を「変数」から「定数」に変更します。
「$constant」を選択し、 bm_variable_create_new をクリックします。
定数エディタ画面でキー名を「category」、値の型を「マップ」に設定します。
作成した「category」に以下の定数を設定します。
キー名 値の型 代入値
task 文字列 タスク
schedule 文字列 スケジュール
move 文字列 移動
memo 文字列 メモ

定数はJSON入力で以下を記載しても設定できます。
"category": {
  "task": "タスク",
  "schedule": "スケジュール",
  "move": "移動",
  "memo": "メモ"
}
JSON入力する場合は、定数の bm_variable_json をクリックして「JSONエディタ」を表示してください。また、JSON形式での入力の際には型が上記の表と誤りが無いか注意してください。

次に、「重要度」の表示用の定数を作成します。
「$constant」配下に、キー名を「importance」、値の型を「マップ」とした定数を追加します。
以下の定数を設定します。
キー名 値の型 代入値
high 文字列
medium 文字列
low 文字列

定数はJSON入力で以下を記載しても設定できます。
"importance": {
  "high": "高",
  "medium": "中",
  "low": "低"
}
JSON入力する場合は、定数の bm_variable_json をクリックして「JSONエディタ」を表示してください。また、JSON形式での入力の際には型が上記の表と誤りが無いか注意してください。

次に、「ステータス」の表示用の定数を作成します。
「$constant」配下に、キー名を「status」、値の型を「マップ」とした定数を追加します。
以下の定数を設定します。
キー名 値の型 代入値
waiting 文字列 未着手
working 文字列 着手中
completion 文字列 完了
pending 文字列 保留

定数はJSON入力で以下を記載しても設定できます。
"status": {
  "waiting": "未着手",
  "working": "着手中",
  "completion": "完了",
  "pending": "保留"
}
JSON入力する場合は、定数の bm_variable_json をクリックして「JSONエディタ」を表示してください。また、JSON形式での入力の際には型が上記の表と誤りが無いか注意してください。
../../../_images/todo_bloom_contant_map.png

一覧の表示を整え、操作ユーザが登録したToDoのみが表示されるように修正します。
画面右側で「アクション」タブを選択します。
../../../_images/todo_bloom2-3.png

「Load Table Data」の bm_action_edit を選択します。
アクションエディタ画面で「 IM-LogicDesigner 」タブにある「 IM-LogicDesigner フロールーティング〇にリクエストを送信する」をドラッグ&ドロップで一番上に配置します。
../../../_images/todo_bloom_action_logic.png

「 IM-LogicDesigner フロールーティング」に IM-LogicDesigner で作成した「tutorial_todo_app/list/search」を設定します。
レスポンスデータに「$variable.responseData.list.data」を設定します。
../../../_images/todo_bloom_action_flow.png

自動で作成された IM-LogicDesigner フロールーティングを無効にします。
../../../_images/todo_bloom_action_flow2.png

次に、表示項目をデータベースに格納された値ではなく、ユーザにわかりやすい状態に変更します。
取得した値を元に、作成した「カテゴリ」、「重要度」、「ステータス」の定数から表示用の項目を設定します。
アクションエディタ画面で「標準」タブにある「カスタムスクリプトを実行する」を以下の位置へ配置します。
../../../_images/todo_bloom_action_flow3.png

「カスタムスクリプト」に以下のコードを設定します。
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」のチェックを外します。
../../../_images/todo_bloom2-14.png

4.2.6.2.2. 検索の条件の変数を作成

検索処理を行うため、まずは検索用の変数を設定します。
画面右側の「変数」タブをクリックし、「$variable」に検索用の変数を追加します。
「$variable」を選択し、 bm_variable_create_new アイコンをクリックします。
変数エディタ画面でキー名を「searchCondition」、値の型を「マップ」、代入値を「マップ」に設定します。
「searchCondition」に以下の変数を設定します。
キー名 値の型
title 文字列
category 文字列
status 文字列
importance 文字列
../../../_images/todo_bloom2-11.png

変数はJSON入力で以下を記載しても設定できます。
"searchCondition": {
  "title": "",
  "category": "",
  "status": "",
  "importance": ""
}
JSON入力する場合は、入力値の bm_variable_json をクリックして「JSONエディタ」を表示してください。また、JSON形式での入力の際には型が上記の表と誤りが無いか注意してください。

4.2.6.2.3. 検索のアクション処理を作成

画面右側のアクションタブを選択します。
bm_action_create_new を選択し、アクションエディタを呼び出します。
../../../_images/todo_bloom2-12.png
アクションエディタ画面でアクション名を「search」に設定します。
「 IM-LogicDesigner 」タブにある「 IM-LogicDesigner フロールーティング〇にリクエストを送信する」をドラッグ&ドロップで配置します。
../../../_images/todo_bloom_logic.png

「 IM-LogicDesigner フロールーティング」に IM-LogicDesigner で作成した「tutorial_todo_app/list/search」を設定します。
リクエストパラメータに「$variable > searchCondition」を設定します。
レスポンスデータに「$variable > responseData > list > data」を設定します。
../../../_images/todo_bloom_search.png

アクションエディタ画面で「標準」タブにある「変数〇に〇を代入する」を以下の位置へ配置します。
../../../_images/todo_bloom_action_variable.png

変数は以下のように設定します。
変数「$variable.state.tableData」に「$variable.responseData.list.data.records」を代入する。
../../../_images/todo_bloom_action_variable2.png

次に、アクションエディタ画面で「標準」タブにある「カスタムスクリプトを実行する」を以下の位置へ配置します。
../../../_images/todo_bloom_action_variable3.png

カスタムスクリプトに以下のコードを設定します。
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)」 - 「水平フィールド」を選択し、配置します。
../../../_images/todo_bloom_field.png

入力欄として「フォーム部品(Bulma)」 - 「テキスト入力」を選択し、先ほど配置した「水平フィールド」に配置します。
../../../_images/todo_bloom_title_text.png

先ほど配置した「テキスト入力」を選択し、画面右側の「プロパティ」タブ - 「テキスト入力要素」 - 「エレメント固有」 - 「value」に作成した変数である「$variable > searchCondition > title」を指定します。
../../../_images/todo_bloom_title_select.png

「水平フィールド」の左側をクリックし、画面右側の「プロパティ」タブ - 「水平フィールドラベル」 - 「エレメント固有」 - 「label」に「概要」と入力します。
../../../_images/todo_bloom_search2.png

次にカテゴリの検索欄を作成します。
表示領域として「フォーム部品(Bulma)」 - 「水平フィールド」を選択し、配置します。
../../../_images/todo_bloom_search3.png

入力欄として「フォーム部品(Bulma)」 - 「プルダウン」を選択し、配置します。
../../../_images/todo_bloom_search4.png

先ほど配置した「プルダウン」を選択し、画面右側の「プロパティ」タブの「プルダウン要素」 - 「エレメント固有」の「labels」と「values」に固定値で以下を設定します。
  • labels
    • (空欄)
    • タスク
    • スケジュール
    • 移動
    • メモ
  • values
    • (空欄)
    • task
    • schedule
    • move
    • memo
画面右側の「プロパティ」タブの「プルダウン要素」 - 「エレメント固有」 - 「value」に作成した変数「$variable > searchCondition > category」を指定します。
../../../_images/todo_bloom_search5.png

「水平フィールド」の左側をクリックし、画面右側の「プロパティ」タブ - 「水平フィールドラベル」 - 「エレメント固有」 - 「label」に「カテゴリ」と入力します。
../../../_images/todo_bloom_search6.png

次にステータスの検索欄を作成します。
表示領域として「フォーム部品(Bulma)」 - 「水平フィールド」を選択し、配置します。
../../../_images/todo_bloom_search_status.png

入力欄として「フォーム部品(Bulma)」 - 「プルダウン」を選択し、配置します。
../../../_images/todo_bloom_search_status2.png

先ほど配置した「プルダウン」を選択し、画面右側の「プロパティ」タブの「プルダウン要素」 - 「エレメント固有」の「labels」と「values」に固定値で以下を設定します。
  • labels
    • (空欄)
    • 未着手
    • 着手中
    • 完了
    • 保留
  • values
    • (空欄)
    • waiting
    • working
    • completion
    • pending
画面右側の「プロパティ」タブの「プルダウン要素」 - 「エレメント固有」 - 「value」に作成した変数「$variable > searchCondition > status」を指定します。
../../../_images/todo_bloom_search_status3.png

「水平フィールド」の左側をクリックし、画面右側の「プロパティ」タブ - 「水平フィールドラベル」 - 「エレメント固有」 - 「label」に「ステータス」と入力します。
../../../_images/todo_bloom_search_status4.png

最後に重要度の検索欄を作成します。作成手順はカテゴリ、ステータスと同様です。
表示領域として「フォーム部品(Bulma)」 - 「水平フィールド」を選択し、配置します。
../../../_images/todo_bloom_search_importance.png

入力欄として「フォーム部品(Bulma)」 - 「プルダウン」を選択し、配置します。
../../../_images/todo_bloom_search_importance2.png

先ほど配置した「プルダウン」を選択し、画面右側の「プロパティ」タブの「プルダウン要素」 - 「エレメント固有」の「labels」と「values」に固定値で以下を設定します。
  • labels

    • (空欄)
  • values

    • (空欄)
    • high
    • medium
    • low
画面右側の「プロパティ」タブの「プルダウン要素」 - 「エレメント固有」 - 「value」に作成した変数「$variable > searchCondition > importance」を指定します。
../../../_images/todo_bloom_search_importance3.png

「水平フィールド」の左側をクリックし、画面右側の「プロパティ」タブ - 「水平フィールドラベル」 - 「エレメント固有」 - 「label」に「重要度」と入力します。
../../../_images/todo_bloom_search_importance4.png

コラム

labelやvalueを変数で設定する場合はまず設定用の定数を作成します。
例として「カテゴリー」のlabelとvalueを変数で設定します。
定数を新規作成して以下を設定します。
キー名 category_lavel
配列の次元数 1次元配列
配列の要素数 5
作成された「category_lavel」の配列に以下を設定します。
キー名 代入値
1 タスク
2 スケジュール
3 移動
4 メモ
同様に以下を作成します。
ラベル 入力値
キー名 category_values
配列の次元数 1次元配列
配列の要素数 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」タブを選択します。
../../../_images/todo_bloom_table_search.png

「フォーム部品(Bulma)」 - 「フィールド」を選択し、画面左側に配置します。
../../../_images/todo_bloom_table_search2.png

「フォーム部品(Bulma)」 - 「ボタン」を選択し、配置します。
../../../_images/todo_bloom_table_search3.png

配置した「ボタン」を選択し、画面右側の「プロパティ」タブの「ボタン要素」 - 「エレメント固有」 - 「textContent」に「検索」と入力します。
「ボタン要素」 - 「エレメント固有」 - 「leftIconClass」に「fas fa-search」と入力し、アイコンを表示します。
../../../_images/todo_bloom_table_search4.png

「ボタン要素」 - 「イベント」 - 「クリック時」に作成した「search」を設定します。
../../../_images/todo_bloom_table_search5.png

検索機能が実装できたので動作確認を行いましょう。
画面上部の bm_preview を押下してください。
../../../_images/todo_bloom_pre_button.png
../../../_images/todo_bloom_pre2.png

検索欄を埋めて検索してみましょう。
../../../_images/todo_bloom_pre3.png