今回のブログ記事では、スクリプトを利用してFormaの画面遷移を制御する方法を紹介します。
目次
1. 条件に応じて遷移先を変更する
IM-FormaDesignerでは複数のフォームを遷移するアプリケーションを作成することが可能ですが、製品標準の画面遷移では直線の画面遷移パターンしか設定することはできません。
「次へ」「戻る」ボタンを押下することで、フォーム遷移設定の順番に遷移します。
製品標準の設定に加えて、アドオンのスクリプトを作成することで分岐の画面遷移パターンを実現することが可能です。
条件に応じて動的に遷移先のフォームを決定します。
■ フォーム遷移設定
画面遷移ルートは「フォーム遷移設定」にて管理されています。遷移番号(遷移ルート上の何番目に該当するか)に対してどのフォームを表示するかという形式の設定データです。
アプリケーション実行画面側では、画面遷移のリクエスト時に遷移番号をパラメータとして送信します。リクエストを受けたサーバ側ではフォーム遷移設定が参照され、遷移番号に合致したフォームがレスポンスとして返却されるという仕組みになっています。
このため、画面遷移のリクエスト時に任意の遷移番号を指定することで、遷移番号に合致した任意のフォームへ遷移させることが可能です。
■ サンプルコード
具体的には、以下のサンプルコードのようにグローバル変数 orderNoの値を指定することで、任意のフォームへ遷移させることが可能です。
遷移番号は、アプリケーション実行画面上でグローバル変数 orderNoによって管理されています。
サンプルコードは、画面アイテム「ボタン(イベント)」への記述を想定しています。
1ページ目のフォームから3ページ目のフォームへ遷移させます。
画面アイテム「ボタン(次へ)」を押下した際には、現在表示中のフォームの遷移番号に1が加算された遷移番号のフォームが表示されます。
1 2 3 4 5 |
// 遷移番号が3のフォームへ移動します orderNo = 2; // 遷移処理 sendNextForm(); |
3ページ目のフォームから1ページ目のフォームへ遷移させます。
画面アイテム「ボタン(戻る)」を押下した際には、現在表示中のフォームの遷移番号に1が減算された遷移番号のフォームが表示されます。
1 2 3 4 5 |
// 遷移番号が1のフォームへ遷移させます orderNo = 2; // 遷移処理 sendBackForm(); |
■ サンプルアプリケーション
セレクトボックスの選択値に応じて遷移先を変更するアプリケーションをサンプルアプリケーションとして添付しています。
IM-FormaDesigner 2015 Summer以降の環境にてご利用ください。
2. 処理後の遷移先を変更する
IM-FormaDesigner のアプリケーション実行画面上のパラメータを変更することで、申請・登録などの処理後に任意の画面へ遷移させることが可能です。
ただし、遷移先のURLは、セーフURL機能によってチェックされます。
セーフURL機能の詳細については、「intra-mart Accel Platform / テナント管理者操作ガイド セーフURLを設定する」を参照してください。
サンプルコードは、画面アイテム「スクリプト」への記述を想定しています。また、$関数は、jQueryライブラリ(jQueryオブジェクト)を表します。
■ アプリケーションタイプ「標準」
パラメータ imfr_callback_pathにURLを指定することで、登録・更新などの処理後に任意の画面へ遷移させることが可能です。
パラメータ imfr_callback_pathにURLを設定する方法としては、以下の2つの方法があります。
1. アプリケーション実行画面を表示する際のリクエストパラメータとして指定する
1 |
(例)http://localhost:8080/imart/forma/normal/view/regist_application_view/%アプリケーションID%?imfr_callback_path=forma/application/application_list/manager |
2. スクリプトを利用してアプリケーション実行画面上でパラメータを指定する
1 2 |
$("#imfr_callback_path").val( "forma/application/application_list/manager"); |
■ アプリケーションタイプ「IM-Workflow」
アプリケーションタイプ「IM-Workflow」の場合は、IM-Workflowが処理後の画面遷移を制御しているため、IM-Workflowのパラメータを指定します。
パラメータは開発モデルごとに3種類提供されていますが、本記事ではURLベースで指定できるパラメータ imwNextPagePathを紹介します。パラメータの詳細については、「workflowOpenPage」を参照してください。
スクリプトを利用してアプリケーション実行画面上でパラメータを指定する
1 2 3 4 5 6 7 8 9 |
// 利用しない遷移先パラメータを削除します。 $("#imwNextScriptPath").remove(); // 遷移先パラメータ imwNextPagePathを追加します。 $("#form_area").append("<input name='imwNextPagePath' type='hidden' id='imwNextPagePath'>"); // (例)遷移先にアプリケーション一覧画面を指定します。 $("#imwNextPagePath").val( "forma/application/application_list/manager?"); |
画面アイテム「ボタン(処理モーダル)」、「ボタン(一時保存モーダル)」を利用する場合
画面アイテム「ボタン(処理モーダル)」、「ボタン(一時保存モーダル)」を利用する場合は指定方法が異なります。指定方法の詳細については、「処理後の遷移先制御」を参照してください。