4.2 画面で利用する値の設定

ここでは、データベースの設定で作成したエンティティや辞書項目を参照し、管理画面の各エレメントから画面変数として利用できるようにします。

画面で利用する値を確認する

「2. データベースの設定」で設定した内容をもとに、管理画面で利用する値を確認します。管理画面では、データの一覧表示や検索・ソートに利用する「変数」、画面遷移先や検索・ソート条件を指定する「定数」、画面のラベル表示に利用する「多言語変数」を使用します。

コラム

アプリケーション画面で使用する画面変数には、以下の5種類があります。

変数：内部で使用する値。画面上に情報を表示したり、処理で利用したりする場合に使用
定数：再代入ができない値。常に同じ値を利用する場合に使用
入力変数：前画面から渡された値やクエリパラメータ、サーバロジックの戻り値を受け取る値（ルーティング定義が必要）
多言語変数：複数の言語に対応した値を持つ変数。多言語対応が必要な場合に使用
環境情報変数：実行環境に依存する情報を保持する変数。環境によって異なる値を参照する場合に使用

各変数の概要について、詳細は「ローコード操作マニュアル - 画面変数と環境情報の設定」を参照してください。

変数とAPI連携の仕組み

画面の変数$variableでは、一覧データや検索条件、ソート条件など、画面で利用するデータをstateとして保持します。登録画面では1件分の入力データをstate.entityDataで管理していましたが、管理画面では用途ごとに変数を分けて管理します。また、endPoint（APIの呼び出し先）を介してサーバとデータのやり取りを行います。endPointには、サーバへ送信するデータを格納するrequestParameterと、サーバから返却されたデータを格納するresponseDataが含まれます。

たとえば、ユーザが検索条件を入力したり、列見出しをクリックしてソート順を変更したりすると、その内容はstate.conditionに保持されます。一覧取得処理を実行する際は、state.conditionの値がendPoint.requestParameterに設定され、サーバへ送信されます。サーバでは検索条件やソート条件に応じてデータを取得し、その結果をendPoint.responseDataとして返却します。その後、取得した一覧データはstate.tableData、件数はstate.pagination.totalCountに反映され、管理画面に一覧が表示されます。

ここでは、エンティティや辞書項目をもとに、一覧データや検索条件などを管理するための変数を設定します。

定数と画面遷移の仕組み

画面遷移先のURLなど、実行中に変更されない値は定数$constant.URLとして管理します。登録画面では管理画面のURLを定数で管理しましたが、管理画面では新規作成ボタン押下時の画面遷移先として、登録画面のURLを管理します。

本チュートリアルでは、REGISTERに資産登録画面のURLを設定します。後の手順では、新規作成ボタンの画面遷移アクションから$constant.URL.REGISTERを参照して登録画面を表示します。なお、この時点では登録画面のルーティングはまだ作成していないため、設定したURLは利用できません。ルーティングを設定することで、URLから画面を表示できるようになります。

定数と検索・ソート条件の仕組み

検索条件やソート条件の初期値など、実行中に変更されない値は定数$constant.INIT_CONDITIONとして管理します。管理画面では、画面を初めて表示したときや検索条件をクリアしたときに、この定数を利用して検索条件やソート条件を初期状態に戻します。本チュートリアルでは、SEARCH_CONDITIONに検索条件の初期値、SORT_CONDITIONにソート条件の初期値を設定します。

画面の初期表示時

画面の初期表示は、検索条件SEARCH_CONDITIONをクリアしてから画面の初期状態を表示します。

ソートアイコン押下時

ソート対象の項目keyと並び順orderを設定します。現在の検索条件を保持したまま、ソート条件をendPoint.requestParameter.sortConditionへ設定し、一覧取得処理を実行します。これにより、検索条件を解除した状態で一覧をソートして表示します。

リロードボタン押下時

リロードボタンをクリックした際、検索条件とソート条件を初期値に戻し、その内容をrequestParameterへ設定してから一覧取得処理を実行します。

多言語変数とラベル管理の仕組み

画面に表示するラベルは、多言語変数$i18nを利用して管理します。共通の文言は、登録画面からインポートして利用します。

本チュートリアルでは、画面のタイトルや項目名、ボタン名などの表示文字列を多言語変数として設定します。画面上では、$i18nに定義した値を参照することでラベルを表示します。

画面変数を設定する

管理画面で利用する変数$variable、定数$constant、多言語変数$i18nをそれぞれ設定します。

変数を設定する

変数には、画面で利用するデータを保持するstateや、サーバとのデータ連携に利用するendPointを定義します。変数は、［変数］タブをクリックすると、変数の一覧が表示されます。

Step 1. 変数構造を理解する

詳細説明

変数を設定する前に、「配列型」と呼ばれるデータ型について理解しておきましょう。配列型では、複数のプリミティブ型データ（文字列、数値、真偽値、日付・日時など）を1つのまとまりとして保持でき、一覧データや検索結果、複数レコードの管理などに活用できます。

本チュートリアルでは、最上位のキーであるstateおよびendPoint配下に、画面で利用するデータを保持するオブジェクトと配列を組み合わせた階層構造を作成します。これにより、管理画面で利用する各項目や一覧データを用途ごとに整理して管理できるようになります。

【画面で利用するデータ】

$variable：変数
├ state：画面表示に関わる変数を格納
│　├ tableData：一覧データ
│　│　└ 0：配列の1件目の要素（配列は0から始まる）
│　│　　　├ tmpAssetId：資産ID
│　│　　　├ tmpAssetNumber：資産管理番号
│　│　　　├ tmpOwnerOrganization：所有組織
│　│　　　├ tmpOwner：所有者
│　│　　　└ tmpAssetName：資産名
│　├ condition：検索・ソート条件
│　│　├ searchCondition：検索フォームの入力値
│　│　│　└ tmpAssetName：資産名
│　│　└ sortCondition：ソート条件
│　│　　　└ 0：配列の1件目の要素（配列は0から始まる）
│　│　　　　　├ key：ソート対象の項目
│　│　　　　　└ order：並び順
│　└ pagination：ページング情報
│　　　└ totalCount：総件数

【APIの呼び出し先】

$variable：変数
└ endPoint：データ送受信に関わる変数を格納
　　├ requestParameter：リクエストパラメータ
　　│　├ searchCondition：検索フォームの入力値
　　│　│　└ tmpAssetName：資産名
　　│　└ sortCondition：ソート条件
　　│　　　└ 0：配列の1件目の要素（配列は0から始まる）
　　│　　　　　├ key：ソート対象の項目
　　│　　　　　└ order：並び順
　　└ responseData：レスポンスデータ
　　　　├ records：サーバから取得した一覧データ
　　　　│　└ 0：配列の1件目の要素（配列は0から始まる）
　　　　│　　　├ tmpAssetId：資産ID
　　　　│　　　├ tmpAssetNumber：資産管理番号
　　　　│　　　├ tmpOwnerOrganization：所有組織
　　　　│　　　├ tmpOwner：所有者
　　　　│　　　└ tmpAssetName：資産名
　　　　└ totalCount：総件数

メモ

太字の項目は、IM-BloomMakerで定型的に使用する変数です。
tmpで始まる項目は、IM-Repositoryの辞書項目をインポートすると自動生成される項目です。
本チュートリアルでは、一覧に表示する項目や検索対象を絞って説明するため、必要な辞書項目のみをインポートしています。一方、入力項目をすべて一覧に表示する場合は、エンティティ定義をまとめてインポートすることで、すべての項目を一度に取り込めます。

参考

管理画面で利用する変数の種類や命名例について、詳細は「Low-Code HANDBOOK - 変数構造の定義例-IM-BloomMaker」を参照してください。

Step 2. state変数を作成する

操作手順

stateを設定する

$variable配下に、stateを作成します。

［$variable」を選択→［］をクリック
必要な項目を設定し、［決定］をクリック
- キー名：state
- 値の型：マップ
- 代入値：マップ

tableDataを設定する

state配下に、tableDataを作成します。

［state」を選択→［］をクリック
必要な項目を設定し、［決定］をクリック
- キー名：tableData
- 値の型：マップ
- 配列の次元数：1次元配列
- 配列の要素数：1

tableData配下に、辞書項目をインポートします。

［0］を選択→［］をクリック
［辞書項目をインポート］を選択

一覧に表示する辞書項目を選択します。

［資産管理番号］［所有者］［所有組織］［資産ID］［資産名］を選択
［決定］をクリック
└ 「確認」ダイアログで［決定］をクリック

辞書項目データがインポートされたことを確認します。

メモ

tableDataは、一覧データを保持するため、マップの1次元配列として定義します。1次元配列とは、同じ種類のデータを順番に保持するための構造です。ここでは、1件分の資産情報を表すマップを要素として保持し、一覧の件数に応じて要素が追加されます。

プログラムでは、配列の要素番号は0から始まります。そのため、1件目のデータはtableData[0]、2件目はtableData[1]として扱われます。

なお、「配列の要素数」は一覧の表示件数を指定するものではなく、変数の初期構造を定義するための設定です。そのため、ここでは「1」を設定します。実行時には、取得したデータ件数に応じて要素が自動的に追加されます。

tableData（1次元配列）
├─ [0]（1件目：初期要素）
│   ├─ tmpAssetNumber
│   ├─ tmpAssetName
│   └─ …
├─ [1]（2件目：実行時に追加）
│   ├─ tmpAssetNumber
│   ├─ tmpAssetName
│   └─ …
└─ [2]（3件目：実行時に追加）
    ├─ tmpAssetNumber
    ├─ tmpAssetName
    └─ …

conditionを設定する

state配下に、conditionを作成します。

［state」を選択→［］をクリック
必要な項目を設定し、［決定］をクリック
- キー名：condition
- 値の型：マップ
- 代入値：マップ

searchConditionを設定する

condition配下に、searchConditionを作成します。

［condition」を選択→［］をクリック
必要な項目を設定し、［決定］をクリック
- キー名：searchCondition
- 値の型：マップ
- 代入値：マップ

searchCondition配下に、辞書項目をインポートします。

［searchCondition」を選択→［］をクリック
［辞書項目をインポート］を選択

検索対象となる辞書項目を選択し、［決定］をクリックします。

［資産名］を選択
［決定］をクリック
└ 「確認」ダイアログで［決定］をクリック

辞書項目データがインポートされたことを確認します。

メモ

検索対象となる辞書項目は、「2. データベースの設定 > エンティティと辞書項目を設定する」のStep 4.で設定した検索条件と一致しておく必要があります。

sortConditionを設定する

condition配下に、sortConditionを作成します。

［condition」を選択→［］をクリック
必要な項目を設定し、［決定］をクリック
- キー名：sortCondition
- 値の型：マップ
- 配列の次元数：1次元配列
- 配列の要素数：1

sortCondition配下に、keyを作成します。

［0」を選択→［］をクリック
必要な項目を設定し、［決定］をクリック
- キー名：key
- 値の型：文字列

sortCondition配下に、orderを作成します。

［0」を選択→［］をクリック
必要な項目を設定し、［決定］をクリック
- キー名：order
- 値の型：文字列

メモ

sortConditionは、一覧のソート条件を保持するため、マップの1次元配列として定義します。1件のソート条件は、ソート対象の項目を表すkeyと、昇順（asc）または降順（desc）を表すorderで構成されます。

プログラムでは、配列の要素番号は0から始まります。そのため、1件目のデータはsortCondition[0]、2件目はsortCondition[1]として扱われます。

本チュートリアルでは「資産管理番号」の1項目のみをソートしますが、複数項目によるソートにも対応できるよう、sortConditionは1次元配列として定義しています。

sortCondition（1次元配列）
├─ [0]（1件目：「資産管理番号」でソート）
│   ├─ key：tmpAssetNumber
│   └─ order：asc
├─ [1]（2件目：ソートを追加した場合）
│   ├─ key：
│   └─ order：
└─ [2]（3件目：ソートを追加した場合）
    ├─ key：
    └─ order：

paginationを設定する

state配下に、paginationを作成します。

［state」を選択→［］をクリック
必要な項目を設定し、［決定］をクリック
- キー名：pagination
- 値の型：マップ
- 代入値：マップ

pagination配下に、totalCountを作成します。

［pagination」を選択→［］をクリック
必要な項目を設定し、［決定］をクリック
- キー名：totalCount
- 値の型：整数

メモ

本チュートリアルでは、ページネーションに関する情報をまとめて管理するため、画面変数はpagination.totalCountという構造にしています。将来的に現在のページや1ページ当たりの表示件数、総ページ数などの情報を追加する場合でも、ページネーションに関する情報をまとめて管理できます。

Step 3. endPoint変数を作成する

操作手順

変数配下にendPoint変数を作成し、APIへ渡すリクエストパラメータと、APIから受け取るレスポンスデータを格納する変数をそれぞれ作成します。多くの項目はstateと共通しているため、state配下の変数をコピーし、用途に応じてキー名を変更します。

endPointを設定する

$variable配下に、endPointを作成します。

［$variable」を選択→［］をクリック
必要な項目を設定し、［決定］をクリック
- キー名：endPoint
- 値の型：マップ
- 代入値：マップ

requestParameterを設定する

endPoint配下に、requestParameterを作成します。

［endPoint」を選択→［］をクリック
必要な項目を設定し、［決定］をクリック
- キー名：requestParameter
- 値の型：マップ
- 代入値：マップ

state配下のsearchConditionをコピーし、requestParameter配下に貼り付けます。

［searchCondition」を選択→［］をクリック
［変数］タブ→requestParameterを選択
［決定］をクリック

state配下のsortConditionをコピーし、requestParameter配下に貼り付けます。

［sortCondition」を選択→［］をクリック
［変数］タブ→requestParameterを選択
［決定］をクリック

メモ

stateでは、検索条件とソート条件をcondition配下にまとめて管理しています。一方、endPoint.requestParameterは処理へ渡す入力値を保持するため、conditionを持たず、searchConditionとsortConditionを直接配置する構造にします。

responseDataを設定する

endPoint配下に、responseDataを作成します。

［endPoint」を選択→［］をクリック
必要な項目を設定し、［決定］をクリック
- キー名：responseData
- 値の型：マップ
- 代入値：マップ

state配下のtableDataをコピーし、responseData配下に貼り付けます。

［tableData」を選択→［］をクリック
［変数］タブ→responseDataを選択
［決定］をクリック

responseData配下のtableDataのキー名を変更します。

［tableData」の［］をクリック
キー名を「records」に変更
［決定］をクリック

メモ

recordsは、一覧取得処理から返却される一覧データを保持するキー名です。画面では一覧データをstate.tableDataとして管理しますが、処理から返却された一覧データはresponseData.recordsとして受け取ります。また、「4.3 処理で利用する値の設定」で設定する際、一覧取得処理の出力値にrecordsを定義します。

state配下のtotalCountをコピーし、responseData配下に貼り付けます。

［totalCount」を選択→［］をクリック
［変数］タブ→responseDataを選択
［決定］をクリック

メモ

totalCountは、一覧取得処理から返却される総件数を保持する項目です。responseDataは返却データを受け取るため、totalCountを直接保持するシンプルな構造を定義します。一方、stateでは、ページネーションに関する情報をまとめて管理するため、pagination.totalCountという構造にしています。

totalCountは、画面でも同じキー名を使用するため、変更する必要はありません。また、「4.3 処理で利用する値の設定」で設定する際、一覧取得処理の出力値にtotalCountを定義します。

定数を設定する

定数には、画面遷移用のURLと検索・ソート条件の初期値を定義します。定数は、「変数」の右側にある［］をクリックして、メニューから［定数］を選択すると、定数の一覧が表示されます。

Step 1. 定数構造を理解する

詳細説明

定数は、実行中に変更されない値を管理するために「マップ型」を利用します。本チュートリアルでは、画面遷移先を管理するURLと、検索条件やソート条件の初期値を管理するINIT_CONDITIONを定数として設定します。

【画面遷移で利用するURL】

$constant：定数
　└ URL：URLを格納
　　└ REGISTER：登録画面のURL（例：accel-studio-app/tmp_asset/register）

【検索条件・ソート条件】

$constant：定数
└ INIT_CONDITION：初期値
　├ SEARCH_CONDITION：検索条件
　│ └ tmpAssetName：資産名
　└ SORT_CONDITION：ソート条件
　　└ 0：配列の1件目の要素
　　　├ key：ソート対象の項目
　　　└ order：並び順

メモ

太字の項目は、IM-BloomMakerで定型的に使用する定数です。
定数名は、変数と区別しやすいように大文字で命名します。これにより、値が変更されない定数であることを識別しやすくなります。
本チュートリアルでは、遷移先が登録画面のみであるため、登録画面のURLを$constant.URL.REGISTERに設定します。将来的に登録画面や参照画面などの遷移先が増えた場合は、$constant.URL.REGISTERや$constant.URL.DETAILのように用途ごとに管理できます。

参考

管理画面で利用する定数の種類や命名例について、詳細は「Low-Code HANDBOOK - 定数の定義例-IM-BloomMaker」を参照してください。

Step 2. 定数を作成する

操作手順

URLを設定する

$constant配下に、URLを作成します。

［$constant」を選択→［］をクリック
必要な項目を設定し、［決定］をクリック
- キー名：URL
- 値の型：マップ
- 代入値：マップ

URL配下に、REGISTERを作成します。

［URL」を選択→［］をクリック
必要な項目を設定し、［決定］をクリック
- キー名：REGISTER
- 値の型：文字列
- 代入値：固定文字列「accel-studio-app/tmp_asset/register」

参考

画面URLの設定は、「5.1 画面URLの設定」で行います。設定するURLについては、事前に「アプリ仕様の検討 > 画面・APIのルーティング」で検討した内容を使用します。

INIT_CONDITIONを設定する

変数のstate配下のconditionをコピーし、定数$constant配下に貼り付けます。

［］→「変数」に切り替え
［condition］を選択→［］をクリック
［定数］タブ→［$constant］を選択
［決定］をクリック

conditionのキー名を変更します。

［］→「定数」に切り替え
［condition」の［］をクリック
キー名を「INIT_CONDITION」に変更
代入値で「マップ」を選択
［決定］をクリック

searchConditionのキー名を変更します。

［searchCondition」の［］をクリック
キー名を「SEARCH_CONDITION」に変更
代入値で「マップ」を選択
［決定］をクリック

sortConditionのキー名を変更します。

［sortCondition」の［］をクリック
キー名を「SORT_CONDITION」に変更
［決定］をクリック

SORT_CONDITION配下の0の代入値を変更します。

［0」の［］をクリック
代入値で「マップ」を選択
［決定］をクリック

参考

検索条件やソート条件の代入値では、「マップ」を選択します。「データなし」を選択すると、検索条件やソート条件を保持する変数に値が設定されないため、検索フォームに入力した資産名や、ソートの昇順・降順といった条件が反映されません。「4.6 アクションの設定」でアクションを設定しても、検索やソートが動作しない場合は、定数の設定内容を確認してください。

メモ

定数名は、変数と区別しやすいように大文字で命名します。これにより、値が変更されない定数であることを識別しやすくなります。

多言語変数を設定する

多言語変数には、画面のタイトルや項目名、ボタン名などの表示文字列を設定します。多言語変数は、「変数」の右側にある［］をクリックして、メニューから［多言語変数］を選択すると、多言語変数の一覧が表示されます。

Step 0. 事前準備

操作手順

多言語変数を追加する前に、以下の内容を確認してください。

ラベル・メッセージ管理表を参照できること
- └ 「アプリケーション管理」画面の［ドキュメント］タブをクリックすると、「資産管理アプリ（試作品）」というWikiファイルが表示されます。
- └ 管理表の内容については、「1. アプリの生成 > アプリで使用するリソース名を決める」を参照してください。

Step 1. 多言語変数を作成する

操作手順

多言語変数をエクスポートする

ブラウザのタブをクリックして、登録画面のデザイナを表示します。
［変数］タブをクリックします。
多言語一覧を表示します。

［］→「多言語」に切り替え

登録画面の多言語変数をエクスポートします。

［］→［OK］をクリック
└「im_bloommaker-i18n.csv」ファイルが、「ダウンロード」フォルダに保存されます。

多言語変数をインポートする

ブラウザのタブをクリックして、管理画面を表示します。
登録画面の多言語変数をインポートします。

［］をクリック

［ファイルを選択］をクリックします。

「ダウンロード」フォルダにある「im_bloommaker-i18n.csv」ファイルを選択
［開く］をクリック

［決定］をクリックします。

多言語変数を追加する

リスト表示からテーブル表示に切り替えます。

［］をクリック（に表示が変更）

不要な多言語変数を削除します。

［］を一つずつクリック

参考

管理画面で必要な多言語変数については、「1. アプリの生成 > アプリで使用するリソース名を決める」のStep 3.で用意したラベル・メッセージ管理表を参照してください。

メモ

ラベル・メッセージ管理表の「共通」項目は残し、その他の項目は削除します。管理表の並び順に合わせて登録しておくことで、管理画面で多言語変数を設定する際、インポート後に不要な変数を特定しやすくなります。

［］をクリックし、必要な情報を設定します。
└ ラベル・メッセージ管理表で決めた値を入力します。
└ クリックした回数分、多言語変数の入力欄が追加されます。

メモ

入力しやすい形式に切り替える場合は、［］をクリックして、リスト表示に変更してください。

参考

多言語変数の設定手順やインポートについて、詳細は「ローコード操作マニュアル - 画面変数の設定-応用操作 > 多言語変数を設定する」を参照してください。

コラム

画面変数の設定が完了したら、設定内容を保存します。［］をクリックすると、現在の設定内容でコンテンツが上書き保存されます。詳細は「ローコード操作マニュアル - 新規コンテンツ定義の保存 > 画面コンテンツを保存する」を参照してください。

画面変数をエレメントに適用する

画面上に配置したエレメントのタイトルやラベル、検索フォームの値に画面変数を適用します。

Step 1. 変数を適用する

操作手順

検索フォームの入力値、件数表示、テーブルセルの表示値にそれぞれ変数を適用します。

検索フォームを選択し、state.condition.searchCondition配下の変数を設定します。

編集エリア：［テキスト入力要素」を選択
エレメント固有：「value」の値を設定
- 「変数値」を選択→［］をクリック
- ［変数］タブ→［tmpAssetName］を選択
- ［決定］をクリック

メモ

検索フォームに入力した値は、state.condition.searchConditionに保持されます。検索ボタンをクリックすると、その値がendPoint.requestParameter.searchConditionへ設定され、検索条件として処理へ渡されます。

件数を選択し、state.pagination配下の変数を設定します。

編集エリア：件数の［ラベル」を選択
エレメント固有：「textContent」の値を設定
- 「変数値」を選択→［］をクリック
- ［totalCount］を選択
- ［決定］をクリック

メモ

一覧取得処理を実行すると、取得した総件数はendPoint.responseData.totalCountに格納され、その後state.pagination.totalCountへ設定されます。件数表示では、この値を参照して一覧の総件数を表示します。

テーブルに紐づける配列に、state配下の変数を設定します。

編集エリア：［テーブル（繰り返し）」を選択
エレメント固有：「list」の値を設定
- ［］をクリック
- ［tableData］を選択
- ［決定］をクリック

メモ

一覧取得処理で取得した一覧データは、state.tableDataに保持されます。テーブルでは、この配列を参照して一覧データを表示します。

テーブルセルに、state.tableData配下の変数を設定します。

編集エリア：テーブルセルの［ラベル」を選択
エレメント固有：：「textContent」の値を設定
- 「変数値」を選択→［］をクリック
- 以下の変数を選択
  - 資産管理番号：［tmpAssetNumber］
  - 資産名：［tmpAssetName］
  - 所有組織：［tmpOwnerOrganization］
  - 所有者：［tmpOwner］
- ［決定］をクリック

メモ

テーブルにはstate.tableDataを設定することで、一覧データの件数分だけ行が繰り返し表示されます。ただし、各列に表示する項目は自動では決まらないため、各テーブルセルに表示する変数を個別に設定します。

Step 2. 多言語変数を適用する

操作手順

画面に表示するタイトル、ラベル、ボタン名などの文字列に多言語変数を適用します。タイトルやラベルのエレメントを選択し、「エレメント固有」の設定項目にあるタイトルやラベルを「変数値」に変更します。

ヘッダのページタイトルに多言語変数を設定します。

編集エリア：［ヘッダタイトル］を選択
エレメント固有：「title」と「subTitle」の値を設定
- 「変数値」を選択→［］をクリック
- ［多言語］タブ→以下の変数を選択
  - title：［ASSET_LIST_TOP］
  - subTitle：［ASSET_APP］
- ［決定］をクリック

タイトルに多言語変数を設定します。

編集エリア：［見出しレベル4］を選択
エレメント固有：「textContent」の値を設定
- 「変数値」を選択→［］をクリック
- ［多言語］タブ→［ASSET_LIST］を選択
- ［決定］をクリック

新規作成ボタンの名称に多言語変数を設定します。

編集エリア：［ボタン要素］を選択
エレメント固有：「textContent」の値を設定
- 「変数値」を選択→［］をクリック
- ［多言語］タブ→［CREATE］を選択
- ［決定］をクリック

検索フォームの入力例に多言語変数を設定します。

編集エリア：［テキスト入力要素］を選択
エレメント固有：「placeholder」の値を設定
- 「変数値」を選択→［］をクリック
- ［多言語］タブ→［ASSET_NAME］を選択
- ［決定］をクリック

検索ボタンの名称に多言語変数を設定します。

編集エリア：［ボタン要素］を選択
エレメント固有：「textContent」の値を設定
- 「変数値」を選択→［］をクリック
- ［多言語］タブ→［SEARCH］を選択
- ［決定］をクリック

件表示の文言に多言語変数を設定します。

編集エリア：［ラベル］を選択
エレメント固有：「textContent」の値を設定
- 「変数値」を選択→［］をクリック
- ［多言語］タブ→［DISPLAY_COUNT］を選択
- ［決定］をクリック

テーブルヘッダセルの各ラベルに多言語変数を設定します。

編集エリア：［ラベル］を選択
エレメント固有：「textContent」の値を設定
- 「変数値」を選択→［］をクリック
- ［多言語］タブ→以下の変数を選択
  - 資産管理番号：［ASSET_NUMBER］
  - 資産名：［ASSET_NAME］
  - 所有組織：［OWNER_ORGANIZATION］
  - 所有者：［OWNER］
- ［決定］をクリック

コラム

画面変数をエレメントに適用した後は、設定内容を保存します。［］をクリックすると、現在の設定内容でコンテンツが上書き保存されます。詳細は「ローコード操作マニュアル - 新規コンテンツ定義の保存 > 画面コンテンツを保存する」を参照してください。
画面変数を適用すると、「使用箇所」エリアに表示されます。［］をクリックすると、画面変数の設定エリアの左側に表示されます。詳細は「ローコード操作マニュアル - 画面変数の編集 > 画面変数を編集する」を参照してください。

プレビューで確認する

ここまで設定した内容を確認するため、プレビューを表示します。タイトルやラベル、検索フォームの入力例が意図した通りに表示され、一覧を表示する領域が配置されていることを確認します。

操作手順

［］をクリックします。
└ プレビュー画面が別タブまたは別ウィンドウに表示されます。

参考

プレビュー画面を表示したまま画面デザインを変更した場合、変更内容がプレビューに反映されないことや、意図しない動作が発生することがあります。プレビュー利用時の注意事項については、「ローコード操作マニュアル - 画面のプレビューとデバッグ」を参照してください。

こんなときは

操作中に不明な点や問題が発生した場合は、以下の項目から該当する内容を選択してください。

IM-BloomMakerでの画面側の設定は一旦終了し、次はIM-LogicDesignerで一覧取得処理を作成します。処理の作成後は、再度IM-BloomMakerに戻り、作成した処理を呼び出すためのアクションを設定します。

画面で利用する値を確認する​

変数とAPI連携の仕組み​

定数と画面遷移の仕組み​

定数と検索・ソート条件の仕組み​

画面の初期表示時​

ソートアイコン押下時​

リロードボタン押下時​

多言語変数とラベル管理の仕組み​

画面変数を設定する​

変数を設定する​

Step 1. 変数構造を理解する​

Step 2. state変数を作成する​

stateを設定する

tableDataを設定する

conditionを設定する

searchConditionを設定する

sortConditionを設定する

paginationを設定する

Step 3. endPoint変数を作成する​

endPointを設定する

requestParameterを設定する

responseDataを設定する

定数を設定する​

Step 1. 定数構造を理解する​

Step 2. 定数を作成する​

URLを設定する

INIT_CONDITIONを設定する

多言語変数を設定する​

Step 0. 事前準備​

Step 1. 多言語変数を作成する​

多言語変数をエクスポートする

多言語変数をインポートする

多言語変数を追加する

画面変数をエレメントに適用する​

Step 1. 変数を適用する​

Step 2. 多言語変数を適用する​

プレビューで確認する​

こんなときは​

画面で利用する値を確認する

変数とAPI連携の仕組み

定数と画面遷移の仕組み

定数と検索・ソート条件の仕組み

画面の初期表示時

ソートアイコン押下時

リロードボタン押下時

多言語変数とラベル管理の仕組み

画面変数を設定する

変数を設定する

Step 1. 変数構造を理解する

Step 2. state変数を作成する

Step 3. endPoint変数を作成する

定数を設定する

Step 1. 定数構造を理解する

Step 2. 定数を作成する

多言語変数を設定する

Step 0. 事前準備

Step 1. 多言語変数を作成する

画面変数をエレメントに適用する

Step 1. 変数を適用する

Step 2. 多言語変数を適用する

プレビューで確認する

こんなときは