作成した画面にアクション設定を追加したい

この記事では、IM-BloomMakerで作成した画面にアクションを設定する方法や、設定できるアクションの種類について紹介します。

IM-BloomMakerでは、ボタンのクリックや入力値の変更など、画面上でユーザが操作したことをきっかけに、さまざまな処理を実行できます。これらの処理は、アクションとしてエレメントに設定します。画面の操作に応じた処理を設定することで、ユーザが操作しやすく、業務に必要な処理を行う画面を作成できます。

まずは、IM-BloomMakerのアクション設定の基本と、どのような処理を設定できるのかを確認してみましょう。

アクション設定の基本操作

アクションは、デザイナ画面の［アクション］タブから設定します。

アクションを設定する際は、まずアクションを実行するきっかけとなるイベントを想定し、そのイベントが発生したときに実行するアクションアイテムをアクションエディタで設定します。

たとえば、以下のような画面操作に対してアクションを設定できます。

• ボタンをクリックしたとき
• 入力項目の値を変更したとき
• チェックボックスをオンにしたとき

設定したアクションは、上から順番に実行されます。複数のアクションアイテムを組み合わせることで、画面操作に応じた一連の処理を設定できます。

アクション設定でできること

IM-BloomMakerでは、画面上の値を操作したり、メッセージを表示したり、別の画面へ遷移したりするなど、さまざまな処理をアクションとして設定できます。また、条件に応じて実行するアクションを切り替えたり、IM-LogicDesignerやIM-Workflowなどの機能と連携したりすることもできます。

ここでは、代表的なアクションを用途ごとに紹介します。

画面上の値を操作する

画面で入力された値や、画面で保持している変数の値を操作できます。入力した値を別の変数へコピーしたり、計算結果を変数に設定したりする場合などに利用します。

主なアクションには、以下のようなものがあります。

• 変数に値を代入する
• 変数の値をコピーする
• タイムゾーンを変更する

画面を操作する

別のページへ遷移したり、モーダル画面を表示したりするなど、画面の表示を操作できます。

主なアクションには、以下のようなものがあります。

• ページを表示する
• URLに遷移する
• フォームを送信する
• アクションを実行する

メッセージを表示する

ユーザに確認や通知を行うためのメッセージを表示できます。入力内容の確認や、処理結果の通知などに利用します。

主なアクションには、以下のようなものがあります。

• エラー・警告メッセージを表示する
• アラート・確認・エラーダイアログで表示する
• 入力規則エラーを表示する

外部処理を呼び出す

画面上の操作をきっかけに、外部の処理を呼び出すことができます。たとえば、外部のURLにリクエストを送信したり、IM-LogicDesignerで作成したロジックフローを実行したりする場合に利用します。

主なアクションには、以下のようなものがあります。

• URLにリクエストを送信する
• IM-LogicDesignerフロールーティングにリクエストを送信する

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

カスタムスクリプトを使用すると、アクションだけでは実現しにくい処理をJavaScriptで記述できます。変数の値を加工したり、条件に応じて処理を分岐したりするなど、画面上でより柔軟な処理を実現できます。

アクション設定の使用例

アクションは、複数のアクションアイテムを組み合わせることで、さまざまな画面操作を実現できます。ここでは、IM-BloomMakerのアクション設定を実際に使用する例を紹介します。

まとめ

IM-BloomMakerでは、画面上のユーザ操作をきっかけとして、値の設定やメッセージの表示、画面遷移、REST APIの実行など、さまざまな処理をアクションとして設定できます。また、複数のアクションアイテムを組み合わせたり、IM-LogicDesignerなどの機能と連携したりすることで、より複雑な業務処理にも対応できます。

まずは、ボタンのクリックや入力値の変更など、身近な画面操作に対してアクションを設定してみましょう。慣れてきたら、アクションを組み合わせたり、ほかのintra-mart製品と連携したりすることで、より実用的な画面を作成できます。

intra-martでは、IM-BloomMakerをもっと知っていただくために、マニュアルやコンテンツなどを豊富にご用意しています。IM-BloomMakerの機能を最大限に発揮させるためにも、ぜひご活用ください。