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

3.6 アクションの設定

ここでは、作成した登録処理フローを呼び出せるように、登録画面を表示してアクションを設定します。

アクションを設定する​

IM-BloomMakerで作成した登録画面から、IM-LogicDesignerで作成した登録処理（ロジックフロー）を呼び出すために、アクションを設定します。アクションとは、画面上でユーザの操作やイベントが発生した際に、あらかじめ定義した処理を自動的に実行するための仕組みです。

本チュートリアルでは、3つのアクションを設定します。

  • 初期表示アクション：登録画面の初期表示時に、入力フォームの入力規則エラーメッセージを非表示にします。
  • 画面遷移アクション：一覧ボタンをクリックした際に、管理画面へ遷移します。
  • 資産登録アクション：登録ボタンをクリックした際に、登録処理を呼び出して処理結果を受け取ります。処理が正常に完了した場合は画面遷移アクションを実行し、エラーが発生した場合はエラーメッセージを表示します。

アクションエディタを表示する​

「アプリケーション管理」画面を表示し、登録画面のデザイナからアクションエディタを表示します。

操作手順
  1. ［画面］タブをクリックします。
  2. 「資産登録画面（試作品）」をクリックします。
  3. ［アクション］タブをクリックします。
  4. ［ ］をクリックします。
    └ 「アクションエディタ」ダイアログが表示されます。
参考

アクションの基本操作について、詳細は「ローコード操作マニュアル - アクション設定」を参照してください。

初期表示アクションを設定する​

登録画面の初期表示時に、「3.2 画面で利用する値の設定 > 画面変数をエレメントに適用する」のStep 3.で設定した入力フォームの入力規則エラーメッセージを非表示にします。入力前からエラーメッセージが表示されていると、入力内容に問題があるような印象を与えてしまうため、初期表示時は非表示にし、入力チェックが行われたタイミングで表示するようにします。

Step 1. アクションを設定する​
操作手順
  1. アクション名を入力します。
  • 「[initialize] 初期表示時」と入力
  1. アクションアイテムを設定します。
  • ［標準］→［入力規則エラーを非表示にする］を選択 → 編集エリアにドラッグ
  1. ［決定］をクリックします。
メモ

アクション名は、「接頭辞＋具体的な処理内容」の形式で命名することで、アクションの役割を把握しやすくなります。ここでは、初期化処理を表す接頭辞として[initialize]を付けています。詳細は「Low-Code HANDBOOK - アクションの命名例」を参照してください。

参考

入力規則に関するアクションアイテムについて、詳細は「ローコード操作マニュアル - IM-BloomMakerのアクション > ▼ アクションアイテム - 入力規則」を参照してください。

Step 2. イベントを設定する​
操作手順

初期表示アクションを設定した後は、そのアクションを実行するためのイベントを設定します。イベントとは、アクションを実行するきっかけ（トリガー）のことです。初期表示アクションはページ全体を対象として実行するため、コンテナにイベントを設定します。

  1. コンテナのイベント設定を表示します。
  • ツールバー：［ ］をクリック
  1. イベントにアクションを設定します。
  • ページ読み込み時：［[initialize] 初期表示時］を選択
参考

イベントの設定について、詳細は「ローコード操作マニュアル - アクション設定 > イベントを設定する」を参照してください。

Step 3. プレビューで確認する​
操作手順
  1. ［ ］をクリックして、プレビューを表示します。
  2. 入力フォームの下に、入力規則エラーメッセージが表示されていないことを確認します。
メモ

「所有組織」や「所有者」は、環境情報変数を利用しているため、ログインユーザの情報が初期値として自動的に設定されます。そのため、これらの項目では、値が正しく取得できていれば入力規則エラーメッセージは表示されません。環境情報変数は、「3.2 画面で利用する値の設定 > 変数を設定する」のStep 3.で設定した値を利用しています。

画面遷移アクションを設定する​

一覧ボタンをクリックした際に、管理画面へ遷移します。

Step 1. アクションを設定する​
操作手順
  1. 「アクションエディタ」ダイアログを表示します。
  • ［アクション］タブ→［ ］をクリック
  1. アクション名を入力します。
  • 「[event] 管理画面へ遷移」と入力
  1. アクションアイテムを設定します。
  • ［標準］→［URL〇に遷移する］を選択 → 編集エリアにドラッグ
  1. アクションアイテムの入力欄を拡げるため、［ ］をクリックします。
    └ アイコンの表示が［ ］に切り替わります。
  2. 管理画面のURLを設定します。
  • URLの［ ］をクリック
  • ［定数］→［LIST］を選択→［決定］をクリック
  1. アクションエディタで［決定］をクリックします。
メモ
  • アクション名は、「接頭辞＋具体的な処理内容」の形式で命名することで、アクションの役割を把握しやすくなります。ここでは、イベント処理を表す接頭辞として[event]を付けています。詳細は「Low-Code HANDBOOK - アクションの命名例」を参照してください。
  • 今回の画面遷移ではリクエストパラメータは不要ですが、URLを定数で管理することで、変更時の修正箇所を減らし、保守性を高めることができます。また、将来的にパラメータを付与する場合にも対応しやすくなります。定数は、「3.2 画面で利用する値の設定 > 定数を設定する」のStep 2.で設定した値を利用しています。
参考

画面遷移に関するアクションアイテムについて、詳細は「ローコード操作マニュアル - IM-BloomMakerのアクション > ▼ アクションアイテム - ページ遷移」を参照してください。管理画面に戻るだけであれば「ページ〇を開く」アクションも利用できますが、本チュートリアルでは「URLに遷移する」アクションを使用し、遷移先のURLは定数として管理します。

Step 2. イベントを設定する​
操作手順

画面遷移アクションを設定した後は、そのアクションを実行するためのイベントを設定します。画面遷移アクションは、登録画面で一覧ボタンの押下時に実行するため、ボタンにイベントを設定します。

  1. 一覧ボタンのイベント設定を表示します。
  • 編集エリア：［ボタン要素］をクリック
  1. イベントにアクションを設定します。
  • クリック時［[event] 管理画面へ遷移］を選択
参考

イベントの設定について、詳細は「ローコード操作マニュアル - アクション設定 > イベントを設定する」を参照してください。

メモ

この時点では、遷移先となる管理画面がまだ作成されていないため、プレビューで一覧ボタンをクリックしても管理画面へは遷移しません。管理画面の作成後に動作を確認してください。

資産登録アクションを設定する​

登録ボタンをクリックした際に、登録処理を呼び出すアクションを設定します。ここでは、登録処理の実行から処理結果に応じた画面制御までの一連のアクションを設定します。

Step 1. アクションを設定する​
操作手順
▽ アクション名の入力​
  1. 「アクションエディタ」ダイアログを表示します。
  • ［アクション］タブ→［ ］をクリック
  1. アクション名を入力します。
    └ 「[event]「登録」ボタンが押されたとき」と入力
  1. アクションアイテムの入力欄を拡げるため、［ ］をクリックします。
    └ アイコンの表示が［ ］に切り替わります。
メモ

アクション名は、「接頭辞＋具体的な処理内容」の形式で命名することで、アクションの役割を把握しやすくなります。ここでは、イベント処理を表す接頭辞として[event]を付けています。詳細は「Low-Code HANDBOOK - アクションの命名例」を参照してください。

▽ 入力規則エラーに関するアイテム​
  1. 入力規則エラーに関するアクションアイテムを上から順に設定します。
  • (1) ［標準］→［入力規則エラーを表示する］を選択 → 編集エリアにドラッグ
    └ コメント欄に「入力チェックの結果に応じて、入力規則エラーメッセージを表示する」を入力
  • (2) ［標準］→［ラベル〇へジャンプする］を選択 → 編集エリアにある「入力規則エラーを表示する」の下にドラッグ
    └ コメント欄に「エラー発生時にエラー処理へ移動する」を入力
  • (3) ［標準］→［ラベル〇］を選択 → 編集エリアにある「ラベル〇へジャンプする」の下にドラッグ
    └ コメント欄に「エラー処理の開始位置を示す」を入力
  • (4) 「ラベル〇」に「バリデーションエラー」と入力
  • (5) 「ラベル〇へジャンプする」で「ラベル〇」で設定した［バリデーションエラー］を選択
メモ

アクションは上から順番に実行されます。そのため、登録処理の結果に応じて処理を分岐するためには、処理の流れを制御する必要があります。ラベルはエラー処理の開始位置を示す目印であり、登録処理でエラーが発生した場合は、「ラベル〇へジャンプする」アクションによってこの位置へ処理を移動し、エラーメッセージを表示します。

参考

入力規則またはラベルに関するアクションアイテムについて、詳細は「ローコード操作マニュアル」を参照してください。

  1. 「ラベル〇へジャンプする」の実行条件を設定します。
  • (1) ［実行条件］タブに切り替え
  • (2) ［標準］→［変数〇が入力規則に即していないとき］を選択 → 編集エリアにある「ラベル〇へジャンプする」内に配置
  • (3) 「入力チェック対象」にstate.entityData配下の変数を設定
    └［ ］をクリック→［tmp_asset_entity］を選択→［決定］
メモ

変数の入力チェックで入力規則エラーが発生した場合に、「ラベル〇へジャンプする」アクションを実行する条件を設定します。この実行条件により、入力規則エラーの有無に応じて登録処理を分岐します。入力チェックの対象となるのは、画面で利用するデータを保持するstate配下の変数です。state変数の詳細については、「3.2 画面で利用する値の設定 > 変数とAPI連携の仕組み」を参照してください。

参考

入力規則に関する実行条件アイテムについて、詳細は「ローコード操作マニュアル - IM-BloomMakerのアクション > ▽ 実行条件アイテム - 入力規則」を参照してください。

▽ 確認ダイアログに関するアイテム​
  1. 登録ボタンの押下時に表示する確認ダイアログのアクションアイテムを設定します。
  • (1) ［アクション］タブに切り替え
  • (2) ［標準］→［メッセージ〇を確認ダイアログで表示する］を選択 → 編集エリアにある「ラベル〇へジャンプする」の下にドラッグ
    └ コメント欄に『確認ダイアログ「登録します。よろしいですか？」を表示する』を追加
  • (3) 「メッセージ」に多言語変数を設定
    └［ ］をクリック→［多言語］→［MSG-REGISTER_CONFIRM］を選択→［決定］
  • (4) 「代入先」にstate配下の変数を設定
    └［ ］をクリック→［confirmResult］を選択→［決定］
メモ
  • 確認メッセージは、「3.2 画面で利用する値の設定 > 多言語変数を設定する」のStep 3.で設定した多言語メッセージを選択します。メッセージを変更する場合は、多言語メッセージを修正し、多言語変数に反映する必要があります。
  • 代入先の変数には、確認ダイアログの結果が格納されます。確認ダイアログで［OK］をクリックした場合はtrue、［キャンセル］をクリックした場合はfalseが格納されます。格納された値は、後続のアクションの実行条件として利用できます。
参考
  1. 確認ダイアログでキャンセルした場合のアクションアイテムを設定します。
  • (1) ［標準］→［空処理］を選択 → 編集エリアにある「メッセージ〇を確認ダイアログで表示する」の下にドラッグ
    └ コメント欄に「確認ダイアログでキャンセルした場合は、後続処理を実行せず終了する」を入力
  • (2) 後続のアクションアイテムを実行せず中断するため、［ ］をクリック（ に表示が変更）
参考

アクションアイテムの操作について、詳細は「ローコード操作マニュアル - アクション設定 > 後続のアクションアイテムを実行せず中断する」を参照してください。

  1. 「空処理」の実行条件を設定します。
  • (1) ［実行条件］タブに切り替え
  • (2) ［標準］→［変数〇が〇でないとき］を選択 → 編集エリアにある「空処理」内に配置
  • (3) 「比較元」に確認ダイアログの結果を格納するstate配下の変数を設定
    └［ ］をクリック→［confirmResult］を選択→［決定］
  • (4) 「比較先」に真偽値のtrueを判定するconst配下の環境情報変数を設定
    └［変数値］を選択→［ ］をクリック→［環境］→［true］を選択→［決定］
メモ

確認ダイアログで［キャンセル］をクリックした場合、変数confirmResultにはfalseが格納されます。実行条件で環境情報変数$env.const.trueと比較することで、confirmResultがtrueでない場合に「空処理」アクションが実行され、「 （後続のアクションアイテムを実行せずに中断する）」の設定が有効になります。

参考

constは環境情報変数の定数を指します。const配下の変数を利用することで、処理中に変更されない値を簡単に参照できます。詳細は「ローコード操作マニュアル - 環境情報変数の確認 > 定数・その他」を参照してください。

▽ 登録処理に関するアイテム​
  1. サーバ側とデータをやり取りするため、変数を格納するアクションアイテムを設定します。
  • (1) ［アクション］タブに切り替え
  • (2) ［標準］→［変数〇に〇を代入する］を選択 → 編集エリアにある「空処理」の下にドラッグ
    └ コメント欄に「サーバ側に送信する値を設定する」を入力
  • (3) 「代入先」にAPIの呼び出し先となるendPoint.register.requestParameter配下の変数を設定
    └［ ］をクリック→［entityData］を選択→［決定］
  • (4) 「代入元」に画面で利用するデータを保持するstate配下の変数を設定
    └［変数値］を選択→［ ］をクリック→［entityData］を選択→［決定］
参考
  1. 登録処理フローを呼び出すため、フロールーティングにリクエストを送信するアクションアイテムを設定します。
  • (1) ［IM-LogicDesigner］→［IM-LogicDesigner フロールーティング〇にリクエストを送信する］
    → 編集エリアにある「変数〇に〇を代入する」の下にドラッグ
    └ コメント欄に「登録処理フローを実行する」を入力
  • (2) 「フロールーティング」に登録処理のフロールーティングのURLを設定
    └ 「フロールーティング」の空白をクリック→「tmp_asset/register」にチェック→［決定］
  • (3) 「リクエストパラメータ」にAPIの呼び出し先となるendPoint.register.requestParameter配下の変数を設定
    └［ ］をクリック→［entityData］を選択→［決定］
  • (4) 「レスポンスデータ」に処理結果を格納するendPoint.register配下の変数を設定
    └［ ］をクリック→［responseData］を選択→［決定］
参考
メモ

本チュートリアルでは、出力値でerrorのみ返却しているため、endPoint.responseData.errorを指定しても問題はありません。しかし、将来的にメッセージ表示で利用するerrorMessageなどの出力値を追加することを考慮し、endPoint.responseDataを指定しています。これにより、レスポンス全体を受け取ることができ、出力値が追加されてもアクションの設定を変更する必要がありません。

▽ エラー判定に関するアイテム​
  1. エラー判定の結果に応じて、正常終了時（成功）とエラー発生時（失敗）に実行するアクションアイテムを設定します。
  • (1) ［標準］→［アクション〇を実行する］
    └ 編集エリアにある「IM-LogicDesigner フロールーティング〇にリクエストを送信する」の下にドラッグ
    └ コメント欄に「エラー判定（成功）：管理画面を表示する」を入力
  • (2) 「アクション」にエラー判定で成功した場合、管理画面を表示するアクションを設定
    └ 「アクション」にある［ ］→［[event] 管理画面へ遷移］を選択
  • (3) ［標準］→［メッセージ〇をエラーダイアログで表示する］
    └ 編集エリアにある「アクション〇を実行する」の下にドラッグ
    └ コメント欄に『エラー判定（失敗）：「システムエラーが発生しました。」を表示する』を追加
  • (4) 「メッセージ」にエラー判定で失敗した場合、エラーメッセージを表示するアクションを設定
    └［ ］をクリック→［多言語］→［MSG-SYSTEM_ERROR］を選択→［決定］
メモ

エラーメッセージは、「3.2 画面で利用する値の設定 > 多言語変数を設定する」のStep 3.で設定した多言語変数（多言語メッセージ）を選択します。メッセージを変更する場合は、多言語メッセージを修正し、多言語変数に反映する必要があります。

参考
  1. エラー判定の成功・失敗の実行条件をそれぞれ設定します。
  • (1) ［実行条件］タブに切り替え
  • (2) エラー判定で成功した場合の実行条件を設定
    └［アクション〇を実行する］を選択
    └［標準］→［変数〇が〇でないとき］を選択 → 編集エリアにある「アクション〇を実行する」内に配置
  • (3) 「比較元」にendPoint.register.responseData配下の変数を設定
    └［ ］をクリック→［error］を選択→［決定］
  • (4) 「比較先」にconst配下の環境情報変数を設定
    └［変数値］を選択→［ ］をクリック→［環境］→［true］を選択→［決定］
  • (5) エラー判定で失敗した場合の実行条件を設定
    └［メッセージ〇をエラーダイアログで表示する］を選択
    └［標準］→［変数〇が〇のとき］を選択 → 編集エリアにある「メッセージ〇をエラーダイアログで表示する」内に配置
  • (6) 「比較元」にendPoint.register.responseData配下の変数を設定
    └［ ］をクリック→［error］を選択→［決定］
  • (7) 「比較先」にconst配下の環境情報変数を設定
    └［変数値］を選択→［ ］をクリック→［環境］→［true］を選択→［決定］
メモ

「3.4 登録処理の作成 > エラー終了を設定する」では、エラー終了時に定数TRUEを出力値errorに設定して返却するようにロジックフローを設定しました。画面側では、この出力値を変数endPoint.responseData.errorとして受け取り、環境情報変数const.trueと比較することで、ロジックフローから返却された値がtrueかどうかを判定し、後続の処理を切り替えます。

そのため、以下のように処理を分岐します。

  • 変数endPoint.responseData.errorが環境情報変数const.trueでないとき：
    → 登録処理が正常に終了したと判断し、「アクション〇を実行する」を実行し、管理画面を表示します。
  • 変数endPoint.responseData.errorが環境情報変数const.trueのとき：
    → 登録処理でエラーが発生したと判断し、「メッセージ〇をエラーダイアログで表示する」を実行し、エラーメッセージを表示します。
参考

変数の一致・不一致に関する実行条件アイテムについて、詳細は「ローコード操作マニュアル - IM-BloomMakerのアクション > ▽ 実行条件アイテム - 変数」を参照してください。

▽ アクションの確認・登録​
  1. 上記の手順4～12で設定した内容を確認し、問題がなければ［決定］をクリックします。
メモ

アクションは上から順に実行されるため、設定順序が正しいことを確認してください。

Step 2. イベントを設定する​
操作手順

資産登録アクションを設定した後は、そのアクションを実行するためのイベントを設定します。資産登録アクションは、登録画面で登録ボタンの押下時に実行するため、ボタンにイベントを設定します。

  1. 登録ボタンのイベント設定を表示します。
  • 編集エリア：［ボタン要素］をクリック
  1. イベントにアクションを設定します。
  • クリック時：［[event]「登録」ボタンが押されたとき］を選択
参考

イベントの設定について、詳細は「ローコード操作マニュアル - アクション設定 > イベントを設定する」を参照してください。

Step 3. プレビューで確認する​
操作手順
▽ プレビューの表示​
  1. ［ ］をクリックして、プレビューを表示します。
▽ 入力規則エラーのチェック​
  1. 入力規則エラーが表示されることを確認します。
  • 入力フォームに何も入力せず、［登録］をクリック
  • 入力フォームの下にエラーメッセージが表示されることを確認

【アクションアイテム】…[1], [2], [9]が該当
└ 入力規則エラーメッセージを表示し、エラー処理としてアクションが移動
【入力規則エラーメッセージ】
└ variable：変数state配下に値がないことを認識
└ caption：多言語変数の値をエラーメッセージに表示

参考

入力規則エラーメッセージは、「3.2 画面で利用する値の設定 > 画面変数をエレメントに適用する」のStep 3.で設定しています。

▽ 登録ボタン押下時のチェック​
  1. 登録ボタンをクリックし、確認ダイアログが表示されることを確認します。
  • 入力フォームをすべて入力し、［登録］をクリック
    • 資産名：ノートパソコン
    • 購入日：任意の日付を選択
    • 金額：340000
  • 確認ダイアログと設定したメッセージが表示されることを確認
  1. ［OK］をクリックします。
    └ 画面に「HTTP 404 : ページが見つかりません。」が表示されます。
    └ ブラウザの「戻る」ボタンをクリックして、登録画面に戻ります。

【アクションアイテム】…[3]が該当
└ 入力規則エラーが発生しなかった場合、確認ダイアログを表示
【多言語変数】
└ 確認ダイアログに表示するメッセージを参照するための変数
【多言語メッセージ】
└ 多言語変数から参照メッセージを一元管理

参考

多言語変数や多言語メッセージは、「3.2 画面で利用する値の設定 > 多言語変数を設定する」で設定しています。

メモ

ここで入力したデータはデータベースに保存されます。後ほど作成する管理画面でデータを一覧表示するため、確認ダイアログで［OK］をクリックしてデータを登録してください。なお、この時点では、遷移先となる管理画面がまだ作成されていないため、［OK］をクリックしても管理画面へは遷移しません。管理画面の作成後に動作を確認してください。

  1. 入力フォームをすべて入力し、［登録］をクリックします。
    • 資産名：ノートパソコン
    • 購入日：任意の日付を選択
    • 金額：340000
  2. ［キャンセル］をクリックします。
    └ 登録画面に戻ります。

【アクションアイテム】…[4]が該当
└ 登録をキャンセルした場合、アクションを終了

メモ

登録画面に戻らず、画面に「HTTP 404 : ページが見つかりません。」が表示される場合は、「空処理」アクションの設定を再度見直してください。

コラム

アクションを設定した後は、作業内容の消失を防ぐため、必ず保存してください。［ ］をクリックすることで、コンテンツが現在のバージョンに上書き保存されます。詳細は「ローコード操作マニュアル - 新規コンテンツ定義の保存 > 画面コンテンツを保存する」を参照してください。

こんなときは​

操作中に不明な点や問題が発生した場合は、以下の項目から該当する内容を選択してください。
アクションを設定した後は、設定通りに動作するかをデバッグで確認します。まずはロジックフローのデバッグで処理の動作を確認し、その後、画面のデバッグで画面と処理が正しく連携していることを確認します。