作成した画面にアクション設定を追加したい
kodamad
この記事では、IM-BloomMakerで行うアクション設定について紹介します。
アクションは、画面操作に合わせて特定の操作を実行したい場合に設定します。画面を構成するレイアウト・フォーム部品である「エレメント」を配置した後、アクションエディタから実行条件を設定します。最適なユーザインタフェースを実現するために、IM-BloomMakerのアクション設定について理解を深めていきましょう。
アクション設定の基本操作
アクションは、デザイナ画面のアクションタブをクリックし、アクションエディタから設定します。
配置したエレメントに合わせて画面操作を設定したい場合に、その操作に合ったアクションを設定します。たとえば、以下のような場合に使用します。
- メールアドレスを入力した後、確認メッセージを表示させる
- ボタンをクリックした後、IM-共通マスタのユーザ検索ダイアログを表示させる
- チェックボックスをオンにした後、その下にコメント用のテキストボックスを表示させる
アプリケーション内でのユーザの行動を想定して、画面に適切なアクションを設定することがポイントです。
アクションの機能と設定方法
アクションの設定に関する基本的な機能を確認できます。アクションを設定した後は、必ずそのアクションが正しく動作しているかを試してみましょう。
アクションエディタの操作方法
アクションエディタを使用して、アクションアイテムを設定する手順を確認できます。アクションアイテムの選択・実行・削除・保存といった一連の流れを把握しておきましょう。
設定可能なアクション
IM-BloomMakerで設定できるアクションについて、よく使われるものについて紹介します。アクションはエレメントごとに設定可能な内容が異なります。
幅広い用途に対応できるアクション
標準部品に設定できるアクションアイテムは、幅広い用途に対応できるものを用意しています。アクションアイテムの種類は、大まかに分けると以下のとおりになります。
- 変数に関する設定（変数への代入、変数の値のコピーなど）
- メッセージに関する設定（アラート・確認・エラーのダイアログ表示など）
- 音声または動画に関する設定（再生・一時停止など）
- URLに関する設定（リクエスト送信・遷移など）
- カスタムスクリプトの実行に関する設定
URLやカスタムスクリプトに関する設定は、REST APIやJavaScriptの知識が必要となります。
標準部品のアクション設定を確認する
標準部品に設定できるアクションとパラメータについて、ユーザ操作ガイドで確認しておきましょう。
マスタ情報を呼び出すアクション
共通マスタ部品に設定できるアクションアイテムは、マスタ情報を指定し、その検索ダイアログを表示するものを用意しています。マスタ情報は、単一選択か複数選択のいずれかを選択できます。共通マスタ部品に設定できるアクションアイテムは、以下のとおりです。
- ユーザ検索ダイアログを表示（単一または複数）
- 組織検索ダイアログを表示（単一または複数）
- 役職検索ダイアログを表示（単一または複数）
- パブリックグループ検索ダイアログを表示（単一または複数）
- ロール検索ダイアログを表示（単一または複数）
共通マスタのアクション設定を確認する
共通マスタ部品に設定できるアクションとパラメータについて、ユーザ操作ガイドで確認しておきましょう。
REST APIを実行するアクション
IM-LogicDesigner部品やViewCreator部品に設定できるアクションアイテムは、フロールーティングにリクエストを送信し、 REST API を実行するものを用意しています。さまざまなビジネスロジックに活用したり、業務データの取得や書き込みなどの処理を行ったりする場合に利用します。
IM-LogicDesignerのアクション設定を確認する
IM-LogicDesigner部品に設定できるアクションとパラメータについて、ユーザ操作ガイドで確認しておきましょう。
ViewCreatorのアクション設定を確認する
ViewCreator部品に設定できるアクションとパラメータについて、ユーザ操作ガイドで確認しておきましょう。
ワークフローと連携するアクション
ワークフロー部品に設定できるアクションアイテムは、IM-Workflowの申請や処理を関するものや処理モーダルを呼び出すものを用意しています。intra-martのワークフローで利用する申請・承認画面を作成する場合などに利用します。ワークフロー部品に設定できるアクションアイテムは、以下のとおりです。
- 遷移元画面に戻る
- モーダル画面の表示（起票案件の申請、承認、否認、保留、差し戻しなど）
- 申請に関する処理内容（申請、承認、否認、保留、差し戻しなど）
IM-Workflowのアクション設定を確認する
IM-Workflow部品に設定できるアクションと入出力値について、仕様書で確認しておきましょう。
その他のアクション
上記で紹介したアクション設定以外にも、以下に示す部品にそれぞれアクションを設定することが可能です。
- imui部品：メッセージの表示に関するアクション
- Bulma部品：メッセージやページ表示（モーダル）に関するアクション
- IM-Spreadsheet部品：スプレッドシートに関するアクション
その他のアクションを確認する
imui部品・Bulma部品・IM-Spreadsheet部品に設定できるアクションとパラメータについて、ユーザ操作ガイドで確認しておきましょう。
アクション設定の使用例
アクション設定の使用例をいくつか紹介します。理解を深めるためにも、実際にアクション設定を試してみましょう。
【難易度：低】入力項目の値によってエレメントの表示を切り替える方法
IM-BloomMakerで作成した入力画面で、チェックボックスをオンにするとチェックボックスの下にテキストボックスが表示されるアクションを設定します。標準部品のアクションアイテムの利用方法について確認してみましょう。
【難易度：中】画面操作後に入力規則のチェックが行われるフォームの作成
IM-BloomMakerで作成した入力画面で、ボタンをクリックしたタイミングで、入力規則に反している項目のエラーを表示するアクションを設定します。複数のアクションアイテムを組み合わせて設定する方法について確認してみましょう。
【難易度：中】「URL ○ にリクエストを送信する」の使い方
IM-BloomMakerで作成したユーザ検索画面で、IM-LogicDesignerのフロールーティングにリクエストを送信し、 REST APIを実行するアクションを設定します。 変数の定義とリクエストパラメータを作成するアクションアイテムについて確認してみましょう。
【難易度：高】Workflowコンテンツを作成する
IM-BloomMakerとIM-LogicDesignerを利用して、ワークフロー申請画面を作成します。IM-Workflowのアクションアイテムの利用方法について確認してみましょう。
まとめ
IM-BloomMakerでは、Webブラウザ上で画面を作成し、その画面操作に合わせて簡単にアクションを設定できます。また、カスタムスクリプトを使うと、計算や条件分岐のような複雑な変数操作を画面に設定できるようになります。まずは、IM-BloomMakerで行うアクション設定の種類と概要について、押さえておきましょう。
intra-martでは、IM-BloomMakerをもっと知っていただくために、マニュアルやコンテンツなどを豊富にご用意しています。IM-BloomMakerの機能を最大限に発揮させるためにも、ぜひご活用ください。
