IM-FormaDesigner for Accel Platform 作成者 操作ガイド 第26版 2023-10-01

5.2.5. アプリケーションで画面遷移・タブ切替を設定する

IM-FormaDesigner で作成したアプリケーションでは、最初に作成される「メインフォーム」以外に複数のフォームを作成して、画面遷移やタブ切替を利用した画面を設定することができます。
ここでは、フォームの追加や、フォームの画面遷移・タブ切替の設定方法について説明します。

5.2.5.1. 「フォーム遷移」とは

IM-FormaDesigner のアプリケーションの実行画面で、画面遷移やタブ切替を行うためには、「フォーム遷移」を設定します。
「フォーム遷移」では、処理のタイプにあわせて3種類の遷移情報を設定することができます。
  • 登録画面遷移

    データの登録画面、および、ワークフローの申請画面として表示される画面の設定です。
  • 更新画面遷移

    データの更新、および、ワークフローの再申請画面として表示される画面の設定です。
  • 参照画面遷移

    データの参照、および、ワークフローの承認、参照画面として表示される画面の設定です。
    ワークフローの確認ノードや詳細の表示では、参照画面遷移のうち、「デフォルト」に設定されている内容が表示されます。

コラム

IM-FormaDesigner のアプリケーションは、最初に作成されるフォーム(メインフォーム)のアイテムに基づいて、データベースにテーブルを作成します。
そのため、1つのアプリケーション中に複数のフォームを作成し、メインフォーム以外のフォームに入力可能なアイテムを配置して「フィールド値DB登録」を有効にしても、メインフォームに同じフィールド識別IDのアイテムが存在しない場合には、データベースに該当のアイテムのデータは登録されません。
メインフォーム以外のフォームに配置したアイテムの入力値をデータベースに登録したい場合には、同じフィールド識別IDのアイテムをメインフォームにも配置するようにしてください。

コラム

画面遷移・タブ切替・子画面遷移利用時のフォーム間での値の連携は以下の通りです。

  • 画面遷移・タブ切替の場合

    同一のフィールド識別IDの項目 遷移先フォームで表示される値
    遷移元・遷移先フォームの両方に存在する 遷移元フォームの入力値
    遷移元に存在せず、遷移先フォームのみに存在する
    (テーブルに該当のカラムが存在する)
    データベースに保存されている値
  • 子画面遷移の場合

    子画面遷移の場合、親画面に存在しない項目にはデータベースに値が登録されていても値を表示することはできません。
    親画面に表示させずに子画面の項目に値を表示したい場合には画面アイテム「隠しパラメータ」のご利用をご検討ください。
    同一のフィールド識別IDの項目 遷移先フォームで表示される値
    親画面・子画面フォームの両方に存在する 親画面フォームの入力値
    親画面に存在せず、子画面フォームのみに存在する 何も表示されません

コラム

タブ切替時のタブインデックスの指定

  • タブ切替を利用する場合、タブインデックスはヘッダフォームとタブフォーム間でタブインデックスが重複しないようにしてください。
    ヘッダフォームとタブフォームに重複した値が設定されている場合、タブインデックスに同じ値を設定されたヘッダフォームの項目、タブフォームの項目の順にフォーカスが移動します。

5.2.5.2. 複数のフォームから画面遷移(フォーム遷移)を設定する

複数のフォームの遷移方法に「画面遷移」を設定した場合、「ボタン(次へ)」や「ボタン(戻る)」を利用して、アプリケーションの登録画面で複数のフォームを遷移して表示することができます。
画面遷移を設定するための基本的な手順は、以下の通りです。
../_images/screen_transition_flow.png
今回は、以下の図のように2つのフォームを利用して画面遷移を設定する手順を例に説明します。
../_images/ex_1.png

メインフォームを作成する

最初に作成されるフォーム(メインフォーム)に、アプリケーションで入力項目に設定するすべてのアイテムを配置します。
以下の図のように、 IM-FormaDesigner で入力された情報は、メインフォームに基づいて作成されたアプリケーションテーブルで管理します。
そのため、複数のフォームを利用する場合には、各フォームで入力項目に設定するアイテムをあらかじめメインフォームに配置しておく必要があります。
../_images/main_form.png
  1. 最初に、「 IM-FormaDesigner のアプリケーションの基本情報を設定する」に基づいて、基本情報を登録します。

  2. 「フォーム編集」として、メインフォームの編集画面に遷移します。

    ../_images/proc_1_1.png
  3. メインフォームに、これから追加するフォームで利用する入力項目のアイテムを配置します。

    ../_images/proc_1_2.png
  4. アプリケーションのメインフォーム以外のフォームに配置するアイテムを、メインフォームにすべて配置したら「更新」をクリックして保存します。

    ../_images/proc_1_3.png

フォーム一覧からフォームを追加する

画面遷移に利用するフォームをフォーム一覧から追加します。
  1. メインフォームの編集画面(フォーム・デザイナ)から「戻る」で前の画面に戻ります。

    ../_images/proc_1_4.png
  2. 「フォーム一覧」で「登録」をクリックします。

    ../_images/proc_1_5.png
  3. 「フォーム登録」でフォーム名を入力し、「登録」をクリックします。

    ../_images/proc_1_6.png
  4. フォーム・デザイナで「アイテムコピー」をクリックします。

    ../_images/proc_1_7.png
  5. 対象のフォームを「メインフォーム(アプリケーション名+フォーム)」でフィルタリングし、入力項目に利用するアイテムをドラッグ&ドロップで配置します。
    ../_images/proc_1_8.png
  6. 画面遷移元には「ボタン(次へ)」を配置します。
    ../_images/proc_1_9.png
  7. 入力項目以外のレイアウトは、ツールキットなどを利用して配置し、最後に「更新」をクリックして保存します。

    ../_images/proc_1_10.png
  8. 1~6の手順を繰り返し、必要なフォームをすべて登録します。

    • フォーム2のレイアウト
    ../_images/proc_1_11.png

フォーム遷移から画面遷移を設定する(登録画面・更新画面・詳細画面)

フォーム遷移で、処理画面の種類に合わせて画面遷移を設定します。
  1. 「フォーム遷移一覧」タブをクリックします。

    ../_images/proc_1_12.png
  2. 登録・申請時の画面を設定するために「登録画面遷移」の「詳細編集」をクリックします。

    ../_images/proc_1_13.png
  3. 遷移方法が「画面遷移」であることを確認し、元々表示されているメインフォームを削除します。

    ../_images/proc_1_14.png
  4. 「追加」をクリックします。

    ../_images/proc_1_15.png
  5. 追加したフォームのうち、遷移元にする画面(フォーム)の「選択」をクリックします。

    ../_images/proc_1_16.png
  6. 同様の手順で、遷移先にする画面(フォーム)を追加したら、「更新」をクリックして、遷移の設定を保存します。

    ../_images/proc_1_17.png
  7. 登録・申請画面に対する画面遷移が設定できましたので、2~6の手順を参考に、更新画面遷移と参照画面遷移を設定します。

    • 更新画面遷移(詳細)
    ../_images/proc_1_18.png
    • 参照画面遷移(詳細)
    ../_images/proc_1_19.png
  8. 以上で、アプリケーションでの画面遷移を設定することができました。
    この後は、アプリケーション種別に応じて実行に必要な設定を行ってください。
    完成したアプリケーションをワークフローの申請画面で表示すると、以下のように遷移が実行できます。
    ../_images/proc_1_20.png

5.2.5.3. 複数のフォームからタブ切替(ヘッダーフォームなし)を設定する

複数のフォームの遷移方法に「タブ切替」を設定した場合、アプリケーションに追加した複数のフォームをタブで表示することができます。
タブ切替(ヘッダーフォームなし)を設定するための基本的な手順は、以下の通りです。
../_images/tab_switching_flow_1.png
今回は、以下の図のように2つのフォームをタブに設定するための手順を例に説明します。
../_images/ex_2.png

メインフォームを作成する

最初に作成されるフォーム(メインフォーム)に、アプリケーションで入力項目に設定するすべてのアイテムを配置します。
以下の図のように、 IM-FormaDesigner で入力された情報は、メインフォームに基づいて作成されたアプリケーションテーブルで管理します。
そのため、複数のフォームを利用する場合には、各フォームで入力項目に設定するアイテムをあらかじめメインフォームに配置しておく必要があります。
../_images/main_form.png
  1. 最初に、「 IM-FormaDesigner のアプリケーションの基本情報を設定する」に基づいて、基本情報を登録します。

  2. 「フォーム編集」として、メインフォームの編集画面に遷移します。

    ../_images/proc_2_1.png
  3. メインフォームに、これから追加するフォームで利用する入力項目のアイテムを配置します。

    ../_images/proc_2_2.png
  4. アプリケーションのメインフォーム以外のフォームに配置するアイテムを、メインフォームにすべて配置したら「更新」をクリックして保存します。

    ../_images/proc_2_3.png

フォーム一覧からタブに表示するフォームを追加する

タブ切替で表示するフォームをフォーム一覧から追加します。
  1. メインフォームの編集画面(フォーム・デザイナ)から「戻る」で前の画面に戻ります。

    ../_images/proc_2_4.png
  2. 「フォーム一覧」で「登録」をクリックします。

    ../_images/proc_2_5.png
  3. 「フォーム登録」でフォーム名を入力し、「登録」をクリックします。

    ../_images/proc_2_6.png
  4. フォーム・デザイナで「アイテムコピー」をクリックします。

    ../_images/proc_2_7.png

    コラム

    アイテムコピー

    IM-FormaDesigner のアプリケーションでは、同一アプリケーション内で異なるフォーム間で値の受け渡しを行うためには、「フィールド識別ID」が同一のアイテムとなっている必要があります。
    「アイテムコピー」では、他のフォームで配置済みのアイテムの一覧からドラッグ&ドロップで配置すると、他のフォーム(コピー元)と同一のフィールド識別IDの同じアイテムを配置することができるため、簡単にフォーム間の値の受け渡しを設定することができます。
  5. 対象のフォームを「メインフォーム(アプリケーション名+フォーム)」でフィルタリングし、入力項目に利用するアイテムをドラッグ&ドロップで配置します。
    ../_images/proc_2_8.png
  6. 入力項目以外のレイアウトは、ツールキットなどを利用して配置し、最後に「更新」をクリックして保存します。

    ../_images/proc_2_9.png
  7. 1~6の手順を繰り返し、必要なフォームをすべて登録します。

    • フォーム2のレイアウト
    ../_images/proc_2_10.png

フォーム遷移からタブ切替を設定する(登録画面・更新画面・詳細画面)

フォーム遷移で、処理画面の種類に合わせて画面遷移を設定します。
  1. 「フォーム遷移一覧」タブをクリックします。

    ../_images/proc_2_11.png
  2. 登録・申請時の画面を設定するために「登録画面遷移」の「詳細編集」をクリックします。

    ../_images/proc_2_12.png
  3. 遷移方法を「タブ切替」に変更します。

    ../_images/proc_2_13.png
  4. タブフォームの一覧に表示されているメインフォームの削除をクリックします。

    ../_images/proc_2_14.png
  5. タブフォームの一覧の「追加」をクリックします。

    ../_images/proc_2_15.png
  6. 追加したフォームのうち、左に表示するタブの対象の画面(フォーム)の「選択」をクリックします。

    ../_images/proc_2_16.png
  7. 同様の手順で、遷移先にする画面(フォーム)を追加したら、「更新」をクリックして、遷移の設定を保存します。

    ../_images/proc_2_17.png
  8. 登録・申請画面に対する画面遷移が設定できましたので、2~6の手順を参考に、更新画面遷移と参照画面遷移を設定します。

    • 更新画面遷移(詳細)
    ../_images/proc_2_18.png
    • 参照画面遷移(詳細)
    ../_images/proc_2_19.png
  9. 以上で、アプリケーションでのタブ切替(ヘッダーフォームなし)の画面を設定することができました。
    完成したアプリケーションをワークフローの申請画面で表示すると、以下のようにタブで表示されます。
    ../_images/proc_2_20.png

5.2.5.4. 複数のフォームからタブ切替(ヘッダーフォームあり)を設定する

複数のフォームの遷移方法に「タブ切替」を設定し、ヘッダーフォームを設定した場合、複数のフォームをヘッダーとタブに分けて表示することができます。
タブ切替(ヘッダーフォームあり)を設定するための基本的な手順は、以下の通りです。
../_images/tab_switching_flow_2.png
今回は、以下の図のように3つのフォームをヘッダーとタブに設定するための手順を例に説明します。
../_images/ex_2.png

メインフォームを作成する

最初に作成されるフォーム(メインフォーム)に、アプリケーションで入力項目に設定するすべてのアイテムを配置します。
以下の図のように、 IM-FormaDesigner で入力された情報は、メインフォームに基づいて作成されたアプリケーションテーブルで管理します。
そのため、複数のフォームを利用する場合には、各フォームで入力項目に設定するアイテムをあらかじめメインフォームに配置しておく必要があります。
../_images/main_form.png
  1. 最初に、「 IM-FormaDesigner のアプリケーションの基本情報を設定する」に基づいて、基本情報を登録します。

  2. 「フォーム編集」として、メインフォームの編集画面に遷移します。

    ../_images/proc_3_1.png
  3. メインフォームに、これから追加するフォームで利用する入力項目のアイテムを配置します。

    ../_images/proc_3_2.png
  4. アプリケーションのメインフォーム以外のフォームに配置するアイテムを、メインフォームにすべて配置したら「更新」をクリックして保存します。

    ../_images/proc_3_3.png

フォーム一覧からタブに表示するフォームを追加する

タブ切替でタブとして表示するフォームをフォーム一覧から追加します。
  1. メインフォームの編集画面(フォーム・デザイナ)から「戻る」で前の画面に戻ります。

    ../_images/proc_3_4.png
  2. 「フォーム一覧」で「登録」をクリックします。

    ../_images/proc_3_5.png
  3. 「フォーム登録」でフォーム名を入力し、「登録」をクリックします。

    ../_images/proc_3_6.png
  4. フォーム・デザイナで「アイテムコピー」をクリックします。

    ../_images/proc_3_7.png

    コラム

    アイテムコピー

    IM-FormaDesigner のアプリケーションでは、同一アプリケーション内で異なるフォーム間で値の受け渡しを行うためには、「フィールド識別ID」が同一のアイテムとなっている必要があります。
    「アイテムコピー」では、他のフォームで配置済みのアイテムの一覧からドラッグ&ドロップで配置すると、他のフォーム(コピー元)と同一のフィールド識別IDの同じアイテムを配置することができるため、簡単にフォーム間の値の受け渡しを設定することができます。
  5. 対象のフォームを「メインフォーム(アプリケーション名+フォーム)」でフィルタリングし、入力項目に利用するアイテムをドラッグ&ドロップで配置します。
    ../_images/proc_3_8.png
  6. 入力項目以外のレイアウトは、ツールキットなどを利用して配置し、最後に「更新」をクリックして保存します。

    ../_images/proc_3_9.png
  7. 1~6の手順を繰り返し、タブとして表示するフォームをすべて登録します。

    • タブ2のレイアウト
    ../_images/proc_3_10.png

フォーム一覧からヘッダーに表示するフォームを追加する

タブ切替でヘッダーに表示するフォームをフォーム一覧から追加します。
  1. メインフォームの編集画面(フォーム・デザイナ)から「戻る」で前の画面に戻ります。

    ../_images/proc_3_11.png
  2. 「フォーム一覧」で「登録」をクリックします。

    ../_images/proc_3_12.png
  3. 「フォーム登録」でフォーム名を入力し、「登録」をクリックします。

    ../_images/proc_3_13.png
  4. ヘッダーに表示するフォームで、入力項目を配置する場合には、タブと同様に「アイテムコピー」を利用して入力項目を設定します。
    今回の例では、申請ボタンのみを配置しますので、ツールキットから「ボタン(登録)」を配置します。
    ../_images/proc_3_14.png

    注意

    ヘッダーフォームを利用する場合の注意

    「タブ切替」でヘッダーフォームを設定する場合、タブに表示するフォームとヘッダーに表示するフォームで同一のフィールド識別ID、テーブル識別IDのアイテムが存在しないようにしてください。
    ヘッダーフォームとタブフォームで、フィールド識別ID、テーブル識別IDが重複した場合、値が正しく設定されない、画面が正しく表示されない等の問題が発生する可能性があります。
    異なるタブフォーム間でフィールド識別ID、テーブル識別IDが重複する場合については、対象外です。
  5. ヘッダーフォームのレイアウトを整えたら、最後に「更新」をクリックして保存します。

    ../_images/proc_3_15.png

フォーム遷移からタブ切替でヘッダーフォームとタブフォームを設定する(登録画面・更新画面・詳細画面)

フォーム遷移で、処理画面の種類に合わせて画面遷移を設定します。
  1. 「フォーム遷移一覧」タブをクリックします。

    ../_images/proc_3_16.png
  2. 登録・申請時の画面を設定するために「登録画面遷移」の「詳細編集」をクリックします。

    ../_images/proc_3_17.png
  3. 遷移方法を「タブ切替」に変更します。

    ../_images/proc_3_18.png
  4. タブフォームの一覧に表示されているメインフォームの削除をクリックします。

    ../_images/proc_3_19.png
  5. タブフォームの一覧の「追加」をクリックします。

    ../_images/proc_3_20.png
  6. 追加したフォームのうち、左に表示するタブの対象の画面(フォーム)の「選択」をクリックします。

    ../_images/proc_3_21.png
  7. 同様の手順で、右に表示する画面(フォーム)を追加します。

    ../_images/proc_3_22.png
  8. タブに表示するフォームを設定できたら、ヘッダーフォームの「追加」をクリックします。

    ../_images/proc_3_23.png
  9. ヘッダーに表示する画面(フォーム)の「選択」をクリックします。

    ../_images/proc_3_24.png
  10. ヘッダー、タブに表示する画面(フォーム)がそれぞれ追加できたら、「更新」をクリックして保存します。

    ../_images/proc_3_25.png
  11. 登録・申請画面に対する画面遷移が設定できましたので、2~6の手順を参考に、更新画面遷移と参照画面遷移を設定します。

    • 更新画面遷移(詳細)
    ../_images/proc_3_26.png
    • 参照画面遷移(詳細)
    ../_images/proc_3_27.png
  12. 以上で、アプリケーションでのタブ切替(ヘッダーフォームあり)の画面を設定することができました。
    完成したアプリケーションをワークフローの申請画面で表示すると、以下のように、設定したフォームがヘッダーとタブに表示されます。
    ../_images/proc_3_28.png

5.2.5.5. 「フォーム遷移一覧」画面の機能と各部の説明

「フォーム遷移一覧」画面の内容は以下の通りです。

../_images/form_transition_list.png
  1. 登録画面遷移

    アプリケーション種別:標準では、「登録画面」、アプリケーション種別: IM-Workflow では、「申請画面」として表示するときのフォーム遷移の設定です。
    登録画面遷移でのフォーム遷移の設定は、1件のみ設定できます。
    • 編集

      「フォーム遷移情報」画面に遷移します。
      フォーム遷移先名を更新することができます。
    • 詳細編集

      「フォーム遷移詳細編集(画面遷移)」画面に遷移します。
      登録画面として表示されるフォームの遷移方法や対象のフォームを設定することができます。
    • デフォルト

      対象の処理画面として表示するときのデフォルトとなっている設定にアイコンを表示します。
      登録画面遷移では、1件しか設定できないため、変更することはできません。
  2. 更新画面遷移

    アプリケーション種別:標準では、「更新画面」、アプリケーション種別: IM-Workflow では、「再申請画面」として表示するときのフォーム遷移の設定です。
    更新画面遷移でのフォーム遷移の設定は、1件のみ設定できます。
    • 編集

      「フォーム遷移情報」画面に遷移します。
      フォーム遷移先名を更新することができます。
    • 詳細編集

      「フォーム遷移詳細編集(画面遷移)」画面に遷移します。
      更新(再申請)画面として表示されるフォームの遷移方法や対象のフォームを設定することができます。
    • デフォルト

      対象の処理画面として表示するときのデフォルトとなっている設定にアイコンを表示します。
      更新画面遷移では、1件しか設定できないため、変更することはできません。
  3. 参照画面遷移

    アプリケーション種別:標準では、「詳細画面」、アプリケーション種別: IM-Workflow では、「承認画面」として表示するときのフォーム遷移の設定です。
    参照画面遷移でのフォーム遷移の設定は、複数設定できます。
    ただし、ワークフローで利用する場合には、「デフォルト」となっている設定が、案件の詳細画面や確認ノードの画面として表示されます。
    • 編集

      「フォーム遷移情報」画面に遷移します。
      フォーム遷移先名を更新することができます。
    • 詳細編集

      「フォーム遷移詳細編集(画面遷移)」画面に遷移します。
      登録画面として表示されるフォームの遷移方法や対象のフォームを設定することができます。
    • デフォルト

      対象の処理画面として表示するときのデフォルトとなっている設定にアイコンを表示します。
      ワークフローで利用するアプリケーションで、「 IM-Workflow 連携設定」の「承認画面設定」に設定されていない場合や、個別にフォーム遷移を設定できない画面(案件の詳細画面、確認ノードなど)場合に、この設定内容に基づいて表示されます。

5.2.5.6. 「フォーム遷移詳細編集(画面遷移)」画面の機能と各部の説明

「フォーム遷移詳細編集(画面遷移)」画面の内容は以下の通りです。

../_images/form_transition.png
  1. 遷移方法

    フォームの遷移方法を「画面遷移」、または「タブ切替」から設定します。
  2. スマートフォン表示

    スマートフォンでアクセスした際、対象フォームを「スマートフォン版」または「PC版」どちらで表示するか設定します。
    「スマートフォン版」を利用する場合には、対象フォームに対して「フォーム・デザイナ」で「スマートフォン設定」を行ってください。
  3. フォーム一覧

    画面遷移として表示するフォームを一覧に表示します。
    遷移方法が「画面遷移」となっている場合、一覧の並び順は遷移順です。
    並び順は、フォーム名をドラッグ&ドロップで入れ替えると変更できます。
    • プレビュー

      対象のフォームのフォームプレビューを表示します。
    • 削除

      対象のフォームを画面遷移の設定から削除します。
  4. 追加

    アイコンをクリックすると、画面遷移の設定にフォームを追加することができます。

5.2.5.7. 「フォーム遷移詳細編集(タブ切替)」画面の機能と各部の説明

「フォーム遷移詳細編集(タブ切替)」画面の内容は以下の通りです。

../_images/tab_switching.png
  1. 遷移方法

    フォームの遷移方法を「画面遷移」、または「タブ切替」から設定します。
  2. スマートフォン表示

    遷移方法として「タブ切替」を設定した場合、表示方法は「PC版」固定です。
    「スマートフォン版」は、タブ切替では利用できません。
  3. ヘッダーフォーム

    タブ切替でヘッダーに設定するフォームを表示します。
    タブ切替では、ヘッダーフォームは1つまで設定できます。
    • プレビュー

      対象のフォームのフォームプレビューを表示します。
    • 削除

      対象のフォームをタブ切替の設定から削除します。
  4. 追加

    アイコンをクリックすると、タブ切替のヘッダーフォームの設定にフォームを追加することができます。
  5. タブフォーム一覧

    タブ切替でタブとして表示するフォームを一覧に表示します。
    遷移方法が「タブ切替」となっている場合、一覧の並び順に基づいて、タブでは左から表示します。
    並び順は、フォーム名をドラッグ&ドロップで入れ替えると変更できます。
    • 入力必須

      チェックをオンにした場合、対象のフォームを表示したかどうかのチェックを行います。
      遷移方法で「タブ切替」を設定し、対象のフォームに配置したアイテムのプロパティで入力チェックを設定した場合、対象のフォーム(タブ)が一度も表示されずに「申請」を実行したときには入力チェックが行われません。
      そのため、「タブ切替」とアイテムの入力チェックを組み合わせて利用する場合には、タブフォームの入力必須チェックをオンにしてください。
      特に、分岐ノードを配置し、「ルール定義で分岐開始する」を選択した場合、条件キーに設定した画面アイテムは入力必須となるので、注意してください。
    • プレビュー

      対象のフォームのフォームプレビューを表示します。
      ただし、プレビュー画面では、対象のフォームはタブとして表示されませんので、注意してください。
    • 削除

      対象のフォームをタブ切替の設定から削除します。
  6. 追加

    アイコンをクリックすると、タブ切替のタブフォームの設定にフォームを追加することができます。