メインコンテンツまでスキップ

一覧画面の作成

ここでは、一覧画面を作成する際の基本的なフローと設定について紹介します。

参考

このケースは、Accel Studioの「マスタメンテナンス」テンプレートの一覧画面をもとに説明しています。コンテンツ種別はBulmaです。実際の画面や設定などを確認したい場合は、「ローコード開発チュートリアルガイド - 4.2.2. テンプレートからアプリケーションのベースを作る」を参照し、アプリケーションを生成してください。

Step 1　画面レイアウトとデザイン調整​

一覧画面は、データや情報をテーブル形式で表示するための画面です。1つの画面を分解すると、以下のような構成要素に分けられます。それぞれの要素はコンテナ単位で整理しています。

参考
コラム

一覧画面のレイアウト構成やデザインについては、「intra-mart Design System - 一覧画面」を参照してください。

Step 2　画面変数の設定​

一覧画面の表示や操作に必要な変数をあらかじめ準備します。

変数（$variable）の準備​

画面内で使う変数は、画面の操作によって変化する値やサーバ通信で利用する値だけでなく、一覧画面の見た目や列の種類を定義するための値も定義します。

ここでは、主に次の変数を準備します。

  • state：画面表示・操作用の状態変数
  • endPoint：サーバ通信関連
  • headerRowString：列ヘッダ表示文字列
  • columnSettings：列ごとの表示・型設定

これらの配下に含まれる変数については、下記の一覧を参照してください。

stateは、画面上の表示状態や操作状態を保持するための変数です。たとえば、入力内容の保持や選択状態の管理に使用します。

変数名型用途
tableData配列（オブジェクト）一覧テーブルに表示するデータを保持。各オブジェクトが1件のタスク情報
transitionRequestParameter.id文字列詳細や編集画面に遷移する際の対象ID
clickedCellオブジェクトクリックしたテーブルセルの情報（index, key）
paginationオブジェクトページング情報（総件数、1ページあたり件数、現在ページ）
condition.isOpenedCondition真偽値検索条件パネルが開いているか
condition.searchConditionオブジェクト検索フォームの入力値（タイトル、カテゴリ、重要度、ステータス、担当者）
condition.sortCondition配列ソート条件（キー、昇順/降順）
prePagination.current整数前回のページ番号（ページ遷移用）
isFiltered真偽値フィルタ適用済みかどうか
コラム

変数の命名方法や構造については、「Low-Code HANDBOOK - 変数構造を検討する - IM-BloomMaker」を参照してください。

定数（$constant）の準備​

画面内で使う定数は、画面モード、画面URL、アイコン、検索・ソート・ページングの初期値を体系的に管理するために定義します。

ここでは、主に次の定数を準備します。

  • mode：画面モードの定義
  • screenUrl：画面URL
  • iconKey：画面モードに応じたアイコン
  • initCondition：初期条件

modeは、画面の操作モードを表す定数です。各モードによって画面の表示や操作の振る舞いを切り替えます。

キー値説明
register"register"新規登録モード
refer"refer"参照モード（編集不可）
edit"edit"編集モード
コラム

定数の命名例については、「Low-Code HANDBOOK - 定数の定義例 - IM-BloomMaker」を参照してください。

入力変数（$input）の準備​

入力変数は、画面や処理がどのモードで動作するかを指定するために定義します。

変数名型用途説明
__mode__文字列画面やフローの動作モードを制御"list"は一覧表示モードを示す
参考

画面種別の判別する入力変数については、「Accel Studio テンプレートカタログ - 8.1.2. 画面種別の判別処理」を参照してください。

Step 3　アクション設定​

Step 2で設定した画面変数を利用して、ユーザ操作に応じたアクションを作成します。変数の値をどのように受け渡し、どのような処理の流れを構築しているのかを確認してみましょう。

アクション設定1 - 「初期表示時」​

「初期表示時」アクションでは、一覧画面を表示した際の処理を設定します。

No.アクションアイテムと設定内容
1変数 $variable.state.pagination.rowPerPage に $constant.initCondition.limit を代入する
2変数 $variable.state.pagination.current に 1 を代入する
3変数 $variable.state.condition.searchCondition に $constant.initCondition.searchCondition を代入する
4変数 $variable.state.condition.sortCondition に $constant.initCondition.sortCondition を代入する
5変数 $variable.endPoint.list.requestParameter に $constant.initCondition を代入する
6アクション 「一覧データを取得」 を実行する
7変数 $variable.endPoint.list.requestParameter に $constant.initCondition を代入する
参考

ここでは、主に「変数○に○を代入する」というアクションアイテムを中心に使用しています。詳細は、「IM-BloomMaker ユーザ操作ガイド - 12.4.1.2. 変数○に○を代入する」を参照してください。

アクション設定2 - 「一覧データを取得」​

「一覧データを取得」アクションでは、一覧画面に表示するデータを取得する処理を設定します。このアクションは、「初期表示時」アクションから呼び出すことで、画面表示のタイミングでデータが取得されるようにします。

No.アクションアイテムと設定内容
1

IM-LogicDesignerフロールーティング accel-studio-app/template_master_maintenance/list にリクエスト送信する
・リクエストパラメータ：$variable.endPoint.list.requestParameter
・レスポンスデータ：$variable.endPoint.list.responseData.data

2

カスタムスクリプトを実行する

const records = $im.resolve('$variable.endPoint.list.responseData.data.records');

$variable.state.tableData = records.map((record) => {
  record._edit = null;
  record._refer = null;
  return record;
});
3

変数 $variable.state.pagination.total に $variable.endPoint.list.responseData.data.total を代入する

4

変数 $variable.state.condition.isOpenedCondition に $env.const.false を代入する

5

カスタムスクリプトを実行する

const searchCondition = $im.resolve('$variable.endPoint.list.requestParameter.searchCondition');

const isNullOrEmpty = (obj) => {
  for (const value of Object.values(obj)) {
    if (Object.prototype.toString.call(value) === '[object Object]' && value !== null) {
      if (isNullOrEmpty(value)) {
        return true;
      }
    } else if (value !== null && value !== '') {
      return true;
    }
  }
  return false;
};
$variable.state.isFiltered = isNullOrEmpty(searchCondition);
参考

アクション設定3 - 「〇〇画面へ遷移」​

一覧画面から別の画面に表示を切り替えるための処理を設定します。

「登録画面へ遷移」アクション​
No.アクションアイテムと設定内容
1URL $constant.screenUrl.register に遷移する　　　　　　　　　　　　
・メソッド：GET
「編集画面へ遷移」アクション​
No.アクションアイテムと設定内容
1URL $constant.screenUrl.edit に遷移する　　　　
・メソッド：GET
・リクエストパラメータ：$variable.state.transitionRequestParameter　　		【実行条件】全ての条件に一致
変数 $variable.state.clickedCell.index が $env.const.null でないとき
「参照画面へ遷移」アクション​
No.アクションアイテムと設定内容
1URL $constant.screenUrl.refer に遷移する　　　　
・メソッド：GET
・リクエストパラメータ：$variable.state.transitionRequestParameter　　		【実行条件】全ての条件に一致
変数 $variable.state.clickedCell.index が $env.const.null でないとき
参考

ここでは、変数が、環境情報変数で定義された定数に対して空でないときという条件を指定しています。詳細は「環境情報変数の確認 > 定数・その他」または「アクション設定 > 実行条件の設定」を参照してください。

アクション設定4 - 「アイコンが押されたとき」​

一覧画面に配置したアイコンやボタンをユーザがクリックした後の処理を設定します。

「編集/参照アイコンが押されたとき」アクション​

アクション設定3で作成した「編集画面へ遷移」アクションと「参照画面へ遷移」アクションを呼び出します。

No.アクションアイテムと設定内容
1

カスタムスクリプトを実行する

const requestParameter = $im.resolve('$variable.state.transitionRequestParameter');
const clickedCellData = $im.resolve('$variable.state.tableData[$variable.state.clickedCell.index]');
for (const key in clickedCellData) {
  if (key in requestParameter) {
    requestParameter[key] = clickedCellData[key];
  }
}
$variable.state.transitionRequestParameter = requestParameter;
2アクション 「編集画面へ遷移」 を実行する　　【実行条件】全ての条件に一致
変数 $variable.state.clickedCell.key が $constant.iconKey.edit のとき
3アクション 「参照画面へ遷移」 を実行する【実行条件】全ての条件に一致
変数 $variable.state.clickedCell.key が $constant.iconKey.refer のとき

アクション設定5 - 「検索エリアに関する設定」​

検索エリアの表示・非表示を制御する処理を設定します。

「検索ボタンが押されたとき」アクション​

入力した検索条件に基づき、アクション設定2で設定した「一覧データを取得」アクションを呼び出します。

No.アクションアイテムと設定内容
1変数 $variable.endPoint.list.requestParameter.searchCondition に $variable.state.condition.searchCondition を代入する
2変数 $variable.endPoint.list.requestParameter.sortCondition に $variable.state.condition.sortCondition を代入する
3変数 $variable.endPoint.list.requestParameter.limit に $variable.state.pagination.rowPerPage を代入する
4変数 $variable.endPoint.list.requestParameter.offset に 0 を代入する
5変数 $variable.state.pagination.current に 1 を代入する
6アクション 「一覧データを取得」 を実行する
「検索条件をクリア」アクション​
No.アクションアイテムと設定内容
1変数 $variable.state.condition.searchCondition に $constant.initCondition.searchCondition を代入する
「検索エリアの表示/非表示を切り替え」アクション​
No.アクションアイテムと設定内容
1変数 $variable.state.condition.isOpenedCondition に = !$variable.state.condition.isOpenedCondition を代入する
コラム

! は、論理否定（NOT）を意味し、変数をスイッチのように反転させる役割を持ちます。

  • 変数が true のとき→ falseに反転：表示されていた検索エリアは非表示
  • 変数が false のとき→ true に反転：非表示だった検索エリアが表示

ユーザが「検索条件を開く／閉じる」という操作をするときに使用されます。

アクション設定6 - 「一覧表示エリアに関する設定」​

一覧表示エリアのページングやソート処理を設定します。

「ページング/ソート処理」アクション​
No.アクションアイテムと設定内容
1

変数 $variable.endPoint.list.requestParameter.offset に
= $variable.state.pagination.rowPerPage * ($variable.state.pagination.current - 1) + 1 を代入する

【実行条件】全ての条件に一致
変数 $variable.state.pagination.current が $variable.state.prePagination.current でないとき

2

変数 $variable.endPoint.list.requestParameter.offset に 0 を代入する

3

変数 $variable.state.pagination.current に 1 を代入する

「リッチテーブルのinteractiveNavigationEventを実行したとき」アクション​
No.アクションアイテムと設定内容
1アクション 「ページング/ソート処理」 を実行する
2変数 $variable.state.prePagination.current に $variable.state.pagination.current を代入する
3変数 $variable.endPoint.list.requestParameter.sortCondition に $variable.state.condition.sortCondition を代入する
4変数 $variable.endPoint.list.requestParameter.limit に $variable.state.pagination.rowPerPage を代入する
5アクション 「一覧データを取得」 を実行する
コラム

interactiveNavigationEventとは、「リッチテーブル」エレメント固有プロパティにある設定で、リッチテーブル上の操作に応じて実行するアクションを指定するための設定です。このアクションが実行されるタイミングは、以下のとおりです。

  • ソートを実行/解除したとき
  • ページを切り替えたとき
  • 1ページあたりの表示件数を変更したとき
  • 簡易検索を実行したとき

リッチテーブルの操作に応じて自動的にアクションをトリガーすることで、一覧画面の表示やデータ取得の制御を効率的に行うことができます。

この画面コンテンツは、一覧表示や検索機能のバックエンド処理に適した一覧画面の基本形です。まず条件に該当するデータ件数を取得した上で、実際のデータをリスト形式で検索・取得します。具体的には、以下のようなユースケースが考えられます。

  • 出退勤管理：すでに打刻されていれば処理をスキップし、未打刻の場合のみ記録する
  • 日報登録：1日1件のみ日報の登録を許可する
  • 備品管理：既存在庫を確認し、必要に応じて新規備品を追加する

この基本構成をもとに、さまざまなシナリオを想定しながら活用してみましょう。