この記事では、IM-BloomMakerで作成した画面にアクションを設定する方法や、設定できるアクションの種類について紹介します。
IM-BloomMakerでは、ボタンのクリックや入力値の変更など、画面上でユーザが操作したことをきっかけに、さまざまな処理を実行できます。これらの処理は、アクションとしてエレメントに設定します。画面の操作に応じた処理を設定することで、ユーザが操作しやすく、業務に必要な処理を行う画面を作成できます。
まずは、IM-BloomMakerのアクション設定の基本と、どのような処理を設定できるのかを確認してみましょう。
アクション設定の基本操作
アクションは、デザイナ画面の［アクション］タブから設定します。
アクションを設定する際は、まずアクションを実行するきっかけとなるイベントを想定し、そのイベントが発生したときに実行するアクションアイテムをアクションエディタで設定します。
たとえば、以下のような画面操作に対してアクションを設定できます。
- ボタンをクリックしたとき
- 入力項目の値を変更したとき
- チェックボックスをオンにしたとき
設定したアクションは、上から順番に実行されます。複数のアクションアイテムを組み合わせることで、画面操作に応じた一連の処理を設定できます。
アクションの設定方法
アクションの設定に関する基本的な機能については、ローコード操作マニュアルで確認できます。
アクション設定でできること
IM-BloomMakerでは、画面上の値を操作したり、メッセージを表示したり、別の画面へ遷移したりするなど、さまざまな処理をアクションとして設定できます。また、条件に応じて実行するアクションを切り替えたり、IM-LogicDesignerやIM-Workflowなどの機能と連携したりすることもできます。
ここでは、代表的なアクションを用途ごとに紹介します。
画面上の値を操作する
画面で入力された値や、画面で保持している変数の値を操作できます。入力した値を別の変数へコピーしたり、計算結果を変数に設定したりする場合などに利用します。
主なアクションには、以下のようなものがあります。
- 変数に値を代入する
- 変数の値をコピーする
- タイムゾーンを変更する
データ処理・変数操作
変数への値の代入や、一覧データから必要な値を取得して変数に設定する処理を行います。
ローコード操作マニュアル - IM-BloomMakerのアクション > データ処理・変数操作
画面を操作する
別のページへ遷移したり、モーダル画面を表示したりするなど、画面の表示を操作できます。
主なアクションには、以下のようなものがあります。
- ページを表示する
- URLに遷移する
- フォームを送信する
- アクションを実行する
画面操作・フロー制御
ページ遷移やフォーム送信など、画面上で発生する操作やアクションによるフロー制御を設定します。
ローコード操作マニュアル - IM-BloomMakerのアクション > 画面操作・フロー制御
メッセージを表示する
ユーザに確認や通知を行うためのメッセージを表示できます。入力内容の確認や、処理結果の通知などに利用します。
主なアクションには、以下のようなものがあります。
- エラー・警告メッセージを表示する
- アラート・確認・エラーダイアログで表示する
- 入力規則エラーを表示する
メッセージ・バリデーション表示
ユーザに通知する内容を、ダイアログメッセージや入力エラーとして画面に表示する処理を設定します。
ローコード操作マニュアル - IM-BloomMakerのアクション > メッセージ・バリデーション表示
外部処理を呼び出す
画面上の操作をきっかけに、外部の処理を呼び出すことができます。たとえば、外部のURLにリクエストを送信したり、IM-LogicDesignerで作成したロジックフローを実行したりする場合に利用します。
主なアクションには、以下のようなものがあります。
- URLにリクエストを送信する
- IM-LogicDesignerフロールーティングにリクエストを送信する
外部処理呼び出し
任意のURLやIM-LogicDesignerのフロールーティングにリクエストを送信する処理を設定します。
ローコード操作マニュアル - IM-BloomMakerのアクション > 外部処理呼び出し
カスタムスクリプトを実行する
カスタムスクリプトを使用すると、アクションだけでは実現しにくい処理をJavaScriptで記述できます。変数の値を加工したり、条件に応じて処理を分岐したりするなど、画面上でより柔軟な処理を実現できます。
カスタムロジック実行
IM-BloomMakerの標準で用意しているアクションアイテムでは対応できない処理を、JavaScriptで自由に設定して実行できます。
ローコード操作マニュアル - IM-BloomMakerのアクション > カスタムロジック実行
アクション設定の使用例
アクションは、複数のアクションアイテムを組み合わせることで、さまざまな画面操作を実現できます。ここでは、IM-BloomMakerのアクション設定を実際に使用する例を紹介します。
入力項目の値によってエレメントの表示を切り替える方法
チェックボックスの状態に応じて、エレメントの表示・非表示を切り替える方法を確認できます。標準部品のアクションアイテムを使って、画面の表示を動的に変更します。
CookBook - IM-BloomMaker で作成した画面で、入力項目の値によってエレメントの表示・非表示を切り替える方法
画面操作後に入力規則のチェックが行われるフォームの作成
ボタンをクリックしたタイミングで、入力規則に反している項目のエラーを表示する方法を確認できます。複数のアクションアイテムを組み合わせた設定例です。
CookBook - IM-BloomMaker 画面操作後に入力規則のチェックが行われるフォームの作成
「URL ○ にリクエストを送信する」の使い方
IM-BloomMakerで作成したユーザ検索画面から、IM-LogicDesignerのフロールーティングへリクエストを送信し、REST APIを実行する方法を確認できます。
CookBook - IM-BloomMaker のアクション「URL ○ にリクエストを送信する」の使い方
まとめ
IM-BloomMakerでは、画面上のユーザ操作をきっかけとして、値の設定やメッセージの表示、画面遷移、REST APIの実行など、さまざまな処理をアクションとして設定できます。また、複数のアクションアイテムを組み合わせたり、IM-LogicDesignerなどの機能と連携したりすることで、より複雑な業務処理にも対応できます。
まずは、ボタンのクリックや入力値の変更など、身近な画面操作に対してアクションを設定してみましょう。慣れてきたら、アクションを組み合わせたり、ほかのintra-mart製品と連携したりすることで、より実用的な画面を作成できます。
intra-martでは、IM-BloomMakerをもっと知っていただくために、マニュアルやコンテンツなどを豊富にご用意しています。IM-BloomMakerの機能を最大限に発揮させるためにも、ぜひご活用ください。