開発Blog

Formaの画面遷移を制御するには

投稿日:2015-10-30 更新日:

今回のブログ記事では、スクリプトを利用してFormaの画面遷移を制御する方法を紹介します。

目次

  1. 条件に応じて遷移先を変更する
  2. 処理後の遷移先を変更する

1. 条件に応じて遷移先を変更する

IM-FormaDesignerでは複数のフォームを遷移するアプリケーションを作成することが可能ですが、製品標準の画面遷移では直線の画面遷移パターンしか設定することはできません。

straiht_line_form_route.png
「次へ」「戻る」ボタンを押下することで、フォーム遷移設定の順番に遷移します。

製品標準の設定に加えて、アドオンのスクリプトを作成することで分岐の画面遷移パターンを実現することが可能です。

branch_line_form_route.png
条件に応じて動的に遷移先のフォームを決定します。

フォーム遷移設定

画面遷移ルートは「フォーム遷移設定」にて管理されています。遷移番号(遷移ルート上の何番目に該当するか)に対してどのフォームを表示するかという形式の設定データです。

アプリケーション実行画面側では、画面遷移のリクエスト時に遷移番号をパラメータとして送信します。リクエストを受けたサーバ側ではフォーム遷移設定が参照され、遷移番号に合致したフォームがレスポンスとして返却されるという仕組みになっています。

このため、画面遷移のリクエスト時に任意の遷移番号を指定することで、遷移番号に合致した任意のフォームへ遷移させることが可能です。

サンプルコード

具体的には、以下のサンプルコードのようにグローバル変数 orderNoの値を指定することで、任意のフォームへ遷移させることが可能です。
遷移番号は、アプリケーション実行画面上でグローバル変数 orderNoによって管理されています。

サンプルコードは、画面アイテム「ボタン(イベント)」への記述を想定しています。

1ページ目のフォームから3ページ目のフォームへ遷移させます。

画面アイテム「ボタン(次へ)」を押下した際には、現在表示中のフォームの遷移番号に1が加算された遷移番号のフォームが表示されます。

3ページ目のフォームから1ページ目のフォームへ遷移させます。

画面アイテム「ボタン(戻る)」を押下した際には、現在表示中のフォームの遷移番号に1が減算された遷移番号のフォームが表示されます。

サンプルアプリケーション

セレクトボックスの選択値に応じて遷移先を変更するアプリケーションをサンプルアプリケーションとして添付しています。
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. アプリケーション実行画面を表示する際のリクエストパラメータとして指定する

2. スクリプトを利用してアプリケーション実行画面上でパラメータを指定する

アプリケーションタイプ「IM-Workflow」

アプリケーションタイプ「IM-Workflow」の場合は、IM-Workflowが処理後の画面遷移を制御しているため、IM-Workflowのパラメータを指定します。

パラメータは開発モデルごとに3種類提供されていますが、本記事ではURLベースで指定できるパラメータ imwNextPagePathを紹介します。パラメータの詳細については、「workflowOpenPage」を参照してください。

スクリプトを利用してアプリケーション実行画面上でパラメータを指定する

-開発Blog
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

カラーパターンの追加

イントラマートには標準で青赤緑灰橙のページカラーパターンが用意されていますが、実はこれを追加することができます。 と、そこまでは皆さんご存知かもしれませんが、実際にカラーパターンを自作して追加されてい …

no image

iPhone/iPad用アプリケーション im-scheduler リリース!!

先日、10月22日に弊社イベント Enterprise Web Solution 2010に多数の方がご参加頂き、 ありがとうございました。 実は、そのイベントの裏で、ひっそりと、 iPhone/iP …

no image

intra-mart Advent Calendar 2013 第21日:ルーティングテーブルに認可リソースを設定しないで済ませる方法

この記事は、intra-mart Advent Calendar 2013 第21日の記事です。 今回は、AutoRegisteringResourceMapper を紹介させていただきます。 このマ …

no image

intra-mart Advent Calendar 2013 第17日:Warファイル作成時の実行環境の違いについて

この記事は、intra-mart Advent Calendar 2013 第17日の記事です。 IM-JugglingでWarファイルを作成する際、以下の画面で、実行環境という項目があり、選択するよ …

no image

intra-mart Advent Calendar 2013 第14日:IMBoxを抜いてAccel Platformをインストールする方法

この記事は、intra-mart Advent Calendar 2013 第14日の記事です。 別の記事を考えていたのですが、昨日だけで、この内容を3回も聞かれたので、意外と皆さんお困りだと思います …

RSSRSSRSSRSS