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

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

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

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

「2. データベースの設定」で設定した内容をもとに、登録画面で利用する値を確認します。登録画面では、データのやり取りに利用する「変数」、画面遷移先を指定する「定数」、画面のラベル・メッセージ表示に利用する「多言語変数」を使用します。まずは、それぞれの役割を確認しましょう。

コラム

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

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

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

変数とAPI連携の仕組み​

画面の変数$variableでは、入力値や取得したデータをstate(画面で利用するデータ)として保持し、必要に応じてendPoint(APIの呼び出し先)を介してサーバとデータのやり取りを行います。stateには、ユーザが入力した値だけでなく、endPointを介して取得したデータも格納され、画面表示に利用されます。endPointには、サーバへ送信するデータを格納するrequestParameterと、サーバから返却されたデータを格納するresponseDataが含まれます。

たとえば、ユーザが入力したデータは、stateに変数として保持されます。登録処理を実行する際は、endPointのrequestParameterに設定されてサーバへ送信されます。登録処理によってデータベースに保存された後、一覧取得処理でendPointを介してデータを取得し、その結果はresponseDataに格納されます。その後、responseDataの内容をstateに反映することで、管理画面(一覧)に表示されます。

エンティティに定義した項目は、画面上ではstateとして保持され、データの登録や取得を行う際にはendPointを通じて利用されます。ここでは、エンティティや辞書項目をもとに変数を設定します。

参考

一覧取得処理で取得したデータが管理画面に表示されるまでの流れについては、「4.2 画面で利用する値の設定 > 変数とAPI連携の仕組み」を参照してください。

変数と環境情報変数の仕組み​

画面で利用する値は通常、変数$variableに保持します。一方で、ログインユーザ情報やテナント情報など、システムが管理している情報は環境情報変数$envから参照できます。

たとえば、所有組織や所有者の初期値を設定するために、環境情報変数$envを利用します。環境情報変数$env.userContextに格納された値を変数$variable.stateへそれぞれ設定することで、システム情報からログインユーザに応じた値を初期表示できます。

また、変数に真偽値(Boolean型)を設定することで、確認ダイアログの結果など、処理の実行条件として利用する値を保持できます。

たとえば、確認ダイアログの結果を保持するために、state配下にBoolean型の変数を作成します。確認ダイアログで[OK]をクリックした場合はtrue、[キャンセル]をクリックした場合はfalseが格納されます。登録アクションでは、この変数の値と環境情報変数$env.const.trueを比較する実行条件を設定することで、[OK]をクリックした場合のみ登録処理を実行できます。

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

画面遷移先のURLなど、実行中に変更されない値は定数$constantとして管理します。登録処理が完了した後、管理画面へ遷移するためにURLを定数として設定します。画面URLを直接アクションに設定することもできますが、定数を指定することで、遷移先を変更する際に修正箇所を一箇所に集約できます。また、複数の画面で同じURLを利用する場合でも再利用しやすくなります。

本チュートリアルでは遷移先が管理画面のみであるため、LISTの値として管理画面のURLを設定します。なお、この時点では管理画面やルーティングはまだ作成していないため、設定したURLは利用できません。画面の作成後にルーティングを設定することで、URLから画面を表示できるようになります。登録処理が完了した後、管理画面に遷移するアクションで$constant.URL.LISTを指定することで、管理画面のURLを呼び出します。

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

画面に表示するラベルは、多言語変数$i18nを利用して管理します。画面の項目名やボタン名を直接入力することもできますが、多言語変数として管理することで、表示内容を一元管理できます。一方で、メッセージはユーティリティの多言語メッセージ機能を利用して管理します。定型的なメッセージは、他のアプリケーションと共通で利用することも可能です。多言語変数や多言語メッセージ機能を利用することにより、将来的に英語や中国語といった多言語に対応する場合でも、利用者の言語設定に応じて表示内容を切り替えられるようになります。

本チュートリアルでは、画面のタイトルや項目名、ボタン名などの表示文字列を多言語変数として設定します。画面上では、$i18nに定義した値を参照することでラベルを表示します。また、登録完了メッセージやエラーメッセージなどは、多言語メッセージ機能に登録した後、多言語変数から参照して利用します。ラベルとメッセージを分けて管理することで、表示文字列を用途ごとに管理しやすくなります。

画面変数を設定する​

登録画面で利用する変数$variable、定数$constant、多言語変数$i18nをそれぞれ設定します。なお、変数$variableで利用する値の一部には、ログインユーザ情報などを保持する環境情報変数$envを利用します。

変数を設定する​

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

Step 1. 変数構造を理解する​
詳細説明

変数を設定する前に、「マップ型」と呼ばれるデータ型について理解しておきましょう。画面で扱う複数の値を1つのまとまりとして管理したい場合や、複数のフィールドの値をまとめて設定・取得したい場合は、マップ型を利用します。マップ型では、キー(項目名)と値の組み合わせでデータを管理します。そのため、フォームの入力データやエンティティデータ、APIのリクエスト・レスポンスなど、複数の項目を持つデータを扱う場合に適しています。

本チュートリアルでは、最上位のキーであるstateおよびendPoint配下に、資産エンティティのデータを保持するマップ型の構造を作成します。これにより、登録画面で利用する各項目をまとめて管理できるようになります。

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

$variable:変数
├ state:画面表示に関わる変数を格納
│ ├ entityData:登録画面の場合に利用
│ │ └ tmp_asset_entity:エンティティIDが自動表示
│ │   ├ tmpAssetId:資産ID
│ │   ├ tmpAssetNumber:資産管理番号
│ │   ├ tmpOwnerOrganization:所有組織
│ │   ├ tmpOwner:所有者
│ │   ├ tmpAssetName:資産名
│ │   ├ tmpPurchaseDate:購入日
│ │   └ tmpAmount:金額
│ └ confirmResult:確認ダイアログで利用

【APIの呼び出し先】

$variable:変数
└ endPoint:データ送信に関わる変数を格納
 └ register:登録画面の場合に利用
   ├ requestParameter:リクエストパラメータ
   │ └ entityData:登録画面の場合に利用
   │   └ tmp_asset_entity:エンティティIDが自動表示
   │     ├ tmpAssetId:資産ID
   │     ├ tmpAssetNumber:資産管理番号
   │     ├ tmpOwnerOrganization:所有組織
   │     ├ tmpOwner:所有者
   │     ├ tmpAssetName:資産名
   │     ├ tmpPurchaseDate:購入日
   │     └ tmpAmount:金額
   └ responseData:レスポンスデータ
     └ error:エラー処理で利用

メモ
  • 太字の項目は、IM-BloomMakerで定型的に使用する変数です。
  • tmpで始まる項目は、IM-Repositoryのエンティティ定義をインポートすると自動生成される項目です。
  • 本チュートリアルでは登録画面を1つのコンテンツで作成するため、$variable.endPoint.registerのような階層は必須ではありません。ただし、実際のアプリケーションでは、登録・編集・参照画面など複数の画面を1つのコンテンツとして作成することがあります。そのような場合、処理ごとにrefer、edit、register、deleteなどの階層を分けておくと、変数の役割が明確になり、管理しやすくなります。
参考

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

Step 2. state変数を作成する​
操作手順
  1. $variable配下に、stateを作成します。
  • [$variable]を選択→[ ]をクリック
  • 必要な項目を設定し、[決定]をクリック
    • キー名:state
    • 値の型:マップ
    • 代入値:マップ
  1. state配下に、entityDataを作成します。
  • [state]を選択→[ ]をクリック
  • 必要な項目を設定し、[決定]をクリック
    • キー名:entityData
    • 値の型:マップ
    • 代入値:マップ
  1. entityData配下に、エンティティをインポートします。
  • [entityData]を選択→[ ]をクリック
  • [エンティティをインポート]を選択
  1. インポートするエンティティを選択します。
  • [資産(試作品)]を選択
  • [決定]をクリック
    └ 「確認」ダイアログで[決定]をクリック
  1. エンティティデータがインポートされたことを確認します。
  1. tmpAssetIdの必須設定を解除します。
  • [tmpAssetId]を選択→[ ]をクリック
  • 「必須」のチェックボックスを外す
  • [決定]をクリック
参考
メモ

IM-RepositoryではtmpAssetIdを主キーとして設定したため、IM-BloomMakerへエンティティをインポートした際に、自動的に必須項目として設定されます。ただし、新規登録時点ではtmpAssetIdの値はまだ生成されていないため、必須項目にしておくとアクションで実行する入力規則チェックでエラーとなります。

そのため、本チュートリアルでは、tmpAssetIdの必須設定を解除します。なお、tmpAssetIdの値は、ユーザが入力する項目ではなく、登録処理の実行時にシステムによって自動設定されます。

  1. state配下に、confirmResultを作成します。
  • [state]を選択→[ ]をクリック
  • 必要な項目を設定し、[決定]をクリック
    • キー名:confirmResult
    • 値の型:真偽値
    • 代入値:いいえ(false)
メモ

confirmResultの代入値(初期値)には「いいえ(false)」を設定します。初期値をfalseに設定することにより、何らかの理由で確認処理が実行されなかった場合でも、誤って登録処理が実行されないようにします。

  • 画面表示直後(confirmResult = false):まだ確認していない、または登録を許可していない状態
  • 確認ダイアログで[OK]をクリック(confirmResult = true):登録処理を実行してよい状態
  • 確認ダイアログで[キャンセル]をクリック(confirmResult = false):登録処理を実行しない状態
Step 3. 環境情報変数を利用する​
操作手順

「所有組織」と「所有者」は、ユーザコンテキスト(userContext)という環境情報変数を利用することで、IM-共通マスタで管理されているユーザプロファイル情報を利用できます。それにより、ログインしているユーザの所属組織やユーザ名を自動で取得し、初期値として表示できます。

「所有組織」変数の代入値を変更する
  1. tmpOwnerOrganizationの代入値を編集します。
  • [tmpOwnerOrganization]を選択→[ ]をクリック
  • 「定数・入力・多言語・環境から」にチェック→[ ]をクリック
  • [環境]タブ→「department」で検索
  • $env.userContext.mainDepartment配下にある[departmentName]を選択
  • [決定]をクリック
  • 変数エディタで[決定]をクリック
「所有者」変数の代入値を変更する
  1. tmpOwnerの代入値を編集します。
  • [tmpOwner]を選択→[ ]をクリック
  • 「定数・入力・多言語・環境から」にチェック→[ ]をクリック
  • [環境]タブ→「user」で検索
  • $env.userContext.userProfile配下にある[userName]を選択
  • [決定]をクリック
  • 変数エディタで[決定]をクリック
参考
Step 4. endPoint変数を作成する (1)​
操作手順

変数配下にendPoint変数を作成し、APIへ渡すリクエストパラメータと、APIから受け取るレスポンスデータを格納する変数をそれぞれ作成します。

  1. $variable配下に、endPointを作成します。
  • [$variable]を選択→[ ]をクリック
  • 必要な項目を設定し、[決定]をクリック
    • キー名:endPoint
    • 値の型:マップ
    • 代入値:マップ
  1. endPoint配下に、registerを作成します。
  • [endPoint]を選択→[ ]をクリック
  • 必要な項目を設定し、[決定]をクリック
    • キー名:register
    • 値の型:マップ
    • 代入値:マップ
  1. register配下に、requestParameterを作成します。
  • [register]を選択→[ ]をクリック
  • 必要な項目を設定し、[決定]をクリック
    • キー名:requestParameter
    • 値の型:マップ
    • 代入値:マップ
  1. register配下に、responseDataを作成します。
  • [register]を選択→[ ]をクリック
  • 必要な項目を設定し、[決定]をクリック
    • キー名:responseData
    • 値の型:マップ
    • 代入値:マップ
Step 5. endPoint変数を作成する (2)​
操作手順

リクエストパラメータとレスポンスデータの配下に必要な変数を作成します。

  1. requestParameter配下に、entityDataを作成します。
  • [requestParameter]を選択→[ ]をクリック
  • 必要な項目を設定し、[決定]をクリック
    • キー名:entityData
    • 値の型:マップ
    • 代入値:マップ
  1. entityData配下に、エンティティをインポートします。
  • [entityData]を選択→[ ]
  • [エンティティをインポート]を選択
  1. インポートするエンティティを選択します。
  • [資産(試作品)]を選択
  • [決定]をクリック
    └ 「確認」ダイアログで[決定]をクリック
  1. エンティティデータがインポートされたことを確認します。
  1. responseData配下に、errorを作成します。
  • [responseData]を選択→[ ]をクリック
  • 必要な項目を設定し、[決定]をクリック
    • キー名:error
    • 値の型:真偽値
    • 代入値:データなし(null)
メモ

responseDataには、APIやフローの実行結果を格納します。本チュートリアルでは、errorという真偽値(Boolean)を用意し、処理が正常に終了したかどうかを判定するために利用します。たとえば、登録処理で重複データが見つかった場合や必須項目のチェックでエラーになった場合はtrueを設定し、正常に登録できた場合はfalseを設定します。IM-BloomMakerでは、この値を参照してエラーメッセージを表示したり、正常終了時に管理画面へ遷移したりといった画面制御を行います。

定数を設定する​

定数には、画面遷移用のURLを定義します。定数は、「変数」の右側にある[ ]をクリックして、メニューから[定数]を選択すると、定数の一覧が表示されます。

Step 1. 定数構造を理解する​
詳細説明

変数と同様に、定数も「マップ型」を利用して管理します。本チュートリアルでは、登録処理完了後に管理画面へ遷移するためのURLを定数として設定します。URLを定数として管理することで、遷移先を変更する際に一箇所の修正で対応できます。

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

$constant:定数
 └ URL:URLを格納
  └ LIST:管理画面のURL(例:/accel-studio-app/tmp_asset/list)

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

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

Step 2. 定数を作成する​
操作手順
  1. $constant配下に、URLを作成します。
  • [$constant]を選択→[ ]をクリック
  • 必要な項目を設定し、[決定]をクリック
    • キー名:URL
    • 値の型:マップ
    • 代入値:マップ
  1. URL配下に、LISTを作成します。
  • [URL]を選択→[ ]をクリック
  • 必要な項目を設定し、[決定]をクリック
    • キー名:LIST
    • 値の型:文字列
    • 代入値:固定文字列 「accel-studio-app/tmp_asset/list」
参考

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

多言語変数を設定する​

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

Step 0. 事前準備​
操作手順

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

Step 1. 多言語変数を作成する​
操作手順
  1. [ ]をクリックし、必要な情報を設定します。
    └ ラベル・メッセージ管理表で決めた値を入力します。
    └ クリックした回数分、多言語変数の入力欄が追加されます。
参考

多言語変数の設定手順について、詳細は「ローコード操作マニュアル - 画面変数の設定-応用操作 > 多言語変数を設定する」を参照してください。なお、登録する変数が多い場合は、[ ]をクリックしてテーブル表示に切り替えると編集しやすくなります。

メモ

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

Step 2. 多言語メッセージを作成する​
操作手順
多言語メッセージ定義を追加する
  1. 「アプリケーション管理」画面を表示し、[ユーティリティ]タブをクリックします。
  2. [リソースを追加]→[ユーティリティを新規作成]の順にクリックします。
  3. [多言語メッセージ]をクリックします。
多言語メッセージの基本情報を設定する
  1. 「メッセージグループID」に「MSG」と入力します。
  2. 「メッセージグループ名」に「資産管理メッセージ」と入力します。
  3. 多言語メッセージカテゴリを選択します。
  • [ ]→[資産管理アプリ(試作品)]を選択
  1. [メッセージを追加]をクリックし、必要な情報を設定します。
    • └ 下記の表(ラベル・メッセージ管理表)で決めた値を入力します。
    • └ クリックした回数分、メッセージの入力欄が追加されます。
  2. [新規作成]をクリックします。
メッセージキーメッセージ(標準)
REGISTER_CONFIRM登録します。よろしいですか?
SYSTEM_ERRORシステムエラーが発生しました。
VALIDATION_ERROR入力内容に誤りがあります。
参考

多言語メッセージのカテゴリを作成していない場合は、カテゴリを作成してください。詳細は「intra-mart環境の確認 > 多言語メッセージカテゴリ」を参照してください。

Step 3. 多言語メッセージを変数に設定する​
操作手順
  1. デザイナ画面の[変数]タブを表示し、[ ]をクリックします。
  2. 一番上のチェックボックスにチェックを入れます。
  3. [決定]をクリックします。
    └ 多言語メッセージが変数として設定されます。
参考

多言語メッセージの設定手順について、詳細は「ローコード操作マニュアル - 画面変数の設定-応用操作 > Accel Studioの多言語メッセージを利用する」を参照してください。

コラム

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

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

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

Step 1. 変数を適用する​
操作手順

入力フォームの値に変数を適用します。入力フォームに入力されたデータを変数へ格納することで、登録処理へ受け渡せるようになります。入力フォームのエレメントを選択し、「エレメント固有」の設定項目にある「value」を「変数値」に変更します。

  1. 所有組織・所有者・資産名の入力フォームに、state.entityData.tmp_asset_entity配下の変数を設定します。
  • 編集エリア:[テキスト入力要素]を選択
  • エレメント固有:「value」の値を設定
    • 「変数値」を選択→[ ]をクリック
    • [変数]タブ→以下の変数を選択
      • 所有組織:[tmpOwnerOrganization]
      • 所有者:[tmpOwner]
      • 資産名:[tmpAssetName]
    • [決定]をクリック
  1. 購入日の入力フォームに、state.entityData.tmp_asset_entity配下の変数を設定します。
  • 編集エリア:[日付入力要素]を選択
  • エレメント固有:「value」の値を設定
    • 「変数値」を選択→[ ]をクリック
    • [変数]タブ→[tmpPurchaseDate]を選択
    • [決定]をクリック
  1. 金額の入力フォームに、state.entityData.tmp_asset_entity配下の変数を設定します。
  • 編集エリア:[数値入力要素]を選択
  • エレメント固有:「value」の値を設定
    • 「変数値」を選択→[ ]をクリック
    • [変数]タブ→[tmpAmount]を選択
    • [決定]をクリック
Step 2. 多言語変数を適用する​
操作手順

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

  1. ヘッダのページタイトルに多言語変数を設定します。
  • 編集エリア:[ヘッダタイトル]を選択
  • エレメント固有:「title」と「subTitle」の値を設定
    • 「変数値」を選択→[ ]をクリック
    • [多言語]タブ→以下の変数を選択
      • title:[ASSET_REGISTER]
      • subTitle:[ASSET_APP]
    • [決定]をクリック
  1. 一覧ボタンの名称に多言語変数を設定します。
  • 編集エリア:[ボタン要素]を選択
  • エレメント固有:「textContent」の値を設定
    • 「変数値」を選択→[ ]をクリック
    • [多言語]タブ→[LIST]を選択
    • [決定]をクリック
  1. 入力フォームの各ラベルに多言語変数を設定します。
  • 編集エリア:[フィールドラベル]を選択
  • エレメント固有:「label」の値を設定
    • 「変数値」を選択→[ ]をクリック
    • [多言語]タブ→以下の変数を選択
      • 所有組織:[OWNER_ORGANIZATION]
      • 所有者:[OWNER]
      • 資産名:[ASSET_NAME]
      • 購入日:[PURCHASE_DATE]
      • 金額:[AMOUNT]
    • [決定]をクリック
  1. 登録ボタンの名称に多言語変数を設定します。
  • 編集エリア:[ボタン要素]を選択
  • エレメント固有:「textContent」の値を設定
    • 「変数値」を選択→[ ]をクリック
    • [多言語]タブ→[REGISTER]を選択
    • [決定]をクリック
Step 3. 入力規則エラーを設定する​
操作手順

入力フォームに入力規則エラーが表示されるよう設定します。「エレメント固有」の設定項目でエラーメッセージを表示に設定し、入力チェックの対象となる変数やキャプションを設定します。

  1. 入力フォームの各ラベルに入力必須を示すアイコンを設定します。
  • 編集エリア:[フィールドラベル]を選択
  • エレメント固有:「requiredLabel」で[required]を選択
    └ ラベルの右側に「必須」アイコンが表示
  1. 入力規則エラーメッセージの表示の有無を設定します。
  • 編集エリア:[フィールド]を選択
  • エレメント固有:「showValidationErrorMessage」にチェック
    └ 入力フォームの下側に、入力規則エラーメッセージが表示
  1. 入力規則エラーメッセージの変数およびキャプションを設定します。
  • 編集エリア:[入力規則エラーメッセージ]を選択
  • エレメント固有:下記の内容を設定
    • variable:[ ]をクリック→state配下の変数を設定(入力規則チェックの対象となる変数)
    • caption:「変数値」を選択→[ ]をクリック→[多言語]タブ→多言語変数を設定(エラーメッセージに表示する入力項目名)
ラベル名variablecaption
所有組織  $variable.state.entityData.tmp_asset_entity.tmpOwnerOrganization $i18n.OWNER_ORGANIZATION 
所有者$variable.state.entityData.tmp_asset_entity.tmpOwner$i18n.OWNER
資産名$variable.state.entityData.tmp_asset_entity.tmpAssetName$i18n.ASSET_NAME
購入日$variable.state.entityData.tmp_asset_entity.tmpPurchaseDate$i18n.PURCHASE_DATE
金額$variable.state.entityData.tmp_asset_entity.tmpAmount$i18n.AMOUNT
メモ

「所有組織」や「所有者」は、環境情報変数を利用しているため、ログインユーザの情報が初期値として自動的に設定されます。そのため、これらの項目では入力規則エラーメッセージは表示されることがほとんどありませんが、何らかの理由で値が設定されなかった場合でも入力漏れを防ぐため、エラーメッセージを設定しています。

コラム

プレビューで確認する​

ここまで設定した内容を確認するため、プレビューを表示します。入力フォームのラベルやエラーメッセージが意図した通りに表示されていることを確認します。

操作手順
  1. [ ]をクリックします。
    └ プレビュー画面が別タブまたは別ウィンドウに表示されます。
参考

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

こんなときは​

操作中に不明な点や問題が発生した場合は、以下の項目から該当する内容を選択してください。
IM-BloomMakerでの画面側の設定は一旦終了し、次はIM-LogicDesignerで登録処理を作成します。処理の作成後は、再度IM-BloomMakerに戻り、作成した処理を呼び出すためのアクションを設定します。