こんにちは！ソリューションコンサルタントの田上です。
Webアプリ開発において、ボタンのクリックやデータの選択といったインタラクションに対して、複数のアクションを実行したい場面は多々あります。これまでは、1つのイベントにつき1つのアクションしか設定できず、複雑なワークフローを実現するには、App Builder でコード自動生成された後に、追加のコーディングが必要でした。
最新のアップデートにより、App Builderは「マルチアクション」がサポートされました。この新機能により、1回の操作で複数のアクションをトリガーできるようになり、開発の柔軟性が格段に向上しました。
マルチアクションとは？
マルチアクション機能を活用すると、ユーザーがボタンをクリックしたり、グリッドの行を選択したりするだけで、複数のイベント処理と順番の指定を同時に実行できます。
例えば、「ダイアログ上の保存ボタン（1つのアクション）」を押下したときに、
- ①特定のコンポーネントを開閉する（例：ダイアログを閉じる）
- ②変数の値をセットする（例：入力フォームの値の保持）
- ③別のページへ遷移する
といった複数のマルチアクションをまとめて実行可能になりました。これにより、UIの応答性を高め、スムーズなユーザー体験を提供できます。
マルチアクションを組み込んだ操作フロー（一例）
本例での操作フローについて
本例で想定している操作フローは以下のとおりです。
- １．[注文カード] を選択する
- ２．[ダイアログ表示ボタン] を押下する
- ３．[入力フォーム（ダイアログ）] が開く
- ４．[入力フォーム（ダイアログ）] で [輸送量（freight）] の値を「500」から「888」へ更新する
- ５．[入力フォーム（ダイアログ）] で [更新ボタン] を押下する
- ６．自動的に [完了ページ] にページ遷移される
- ７．更新を適用するためにブラウザをリロードする
- ８．[注文カード] が更新されたことを確認する
マルチアクションはどこに設定されている？
マルチアクションが施されてる箇所は、「５．[入力フォーム（ダイアログ）] で [更新ボタン] を押下する」です。下記のアクションが施されています。
[更新ボタン] のマルチアクション設定
このサンプルでは「更新ボタンを押す」という1つのアクションの中に、3つのマルチアクション（①ダイアログ開閉、②変数セット、③ページ遷移）を設定しています。
設定しているマルチアクションはコチラです。
- ①ダイアログの開閉（閉じる処理）
- ②変数セット（入力フォームの値を保持する処理）
- ③ページ遷移（完了ページへ自動的に遷移する処理）
マルチアクションの設定
従来はマルチアクション機能がなかったため、イベント処理の追加のコーディングが必要になり、多くの開発工数・テスト工数が掛かっていました。
一方で、新機能のマルチアクションでは簡単なクリック操作だけで実装することができます。
「①ダイアログ開閉」を設定する
下図は [更新ボタン] のクリックイベントに「①ダイアログウィンドウの開閉処理」を追加しています。
「②変数」を設定する
下図は [更新ボタン] のクリックイベントに「②変数セット処理」を追加しています。
「③ページ遷移」を設定する
下図は [更新ボタン] のクリックイベントに「③ページ遷移処理」を追加しています。
マルチアクションのメリット
下表はリリース前とリリース後を「〇・✕・△」を用いて比較しています。このように、マルチアクションを活用すると、開発の効率化・柔軟性の向上・メンテナンス性の向上が期待できます。
| 項目 | シングルアクション（従来） | マルチアクション（現在） |
|---|---|---|
| イベント設定 | 1アクションごとに個別に設定 | 1つの操作で複数のアクションを一括設定 |
| コード記述 | 追加コーディングが必要 | 〇（コードレスで完結） |
| メンテナンス性 | 修正が複雑 | 〇（プロパティ設定で簡単に変更可能） |
| 開発工数 | ✕（コストが高い） | 〇（大幅なコスト削減） |
| 柔軟性 | △（制限あり） | 〇（複雑なワークフローも対応） |
| ユーザー体験 | △（処理が分かれて遷移が増える） | 〇（スムーズな操作が可能） |
関連記事・ヘルプドキュメント
関連するヘルプドキュメントはこちらです。
App Builder でマルチアクションを始めよう！
このブログ記事では App Builder を活用して、Webアプリの「マルチアクション」を構築する手順を詳しく解説しました。
App Builder はWeb アプリ開発を効率化する強力なツールです。マルチアクションを簡単に設定できるため、複雑なワークフローの構築が容易になり、開発スピードの向上と直感的なユーザー体験の実現に貢献します。
ぜひ、App Builder を活用してデザインからコード自動生成する世界を体験してみてください。すべてを体験するには、App Builder 無料トライアル にアクセスして最新バージョンを入手してください。
- 「こんなことは実現できるの？」
- 「どうやって実装すれば良いの？」
といった開発上の疑問にソリューションコンサルタントが直接お答えします。
ぜひ japansalesgroup@infragistics.com まで、お気軽にお問合せください。ご意見ご要望を心よりお待ちしています。
無料トライアルのご案内
こちらからトライアルへご参加できます。
無料相談会のご案内
専門コンサルタントが直接ご質問にお答えし、貴社に最適な移行戦略をご提案します。
