IM-BIS for Accel Platform 業務管理者 操作ガイド 第17版 2019-08-01

7.4. タブ切替を利用する

画面遷移設定から複数の画面を作成し、「タブ切替」を設定すると、1つのタスク(ノード)の画面に複数の画面をタブで表示することができます。

7.4.1. タブ切替とは

タブ切替は、1つのタスク(ノード)に対する複数の画面をタブで表示するための機能です。
タブ切替では、タブのみの構成と、タブの上に別の画面を「ヘッダーフォーム」として組み合わせる構成の2パターンから選んで設定することができます。
../../_images/tab_screen_about.png

注意

  • 1つのタスク(ノード)に対して「 画面遷移 」と同時に利用することはできません。
  • 「タブ切替」は、「スマートフォン表示」で利用できません。

コラム

タブ切替では、ヘッダーフォーム、タブフォームともに、フッターの設定に関わらずフッターは表示されません。

コラム

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

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

注意

1つのフロー内で複数のフォームを持つ場合の「参照」画面の表示

本項で扱っている「コピー」や「画面遷移」を利用して、1つのフロー内で複数のフォームを登録している場合、以下のリンク先に基づいて「参照」画面に対する画面遷移を設定してください。
なお、本件については、以下のリリースノートでも「制限事項」に記載がありますので、併せて参照してください。
設定を行っていない場合、 IM-BIS がシステム用として定義している「メインフォーム」が表示されます。
IM-BIS におけるメインフォームは、あくまでシステムでの管理上の目的で利用するため、変更せずに参照画面を表示すると、以下の問題が発生します。
  • 参照画面上に複数の同じボタンが重なって配置される。
  • 「メインフォーム」を直接更新した場合であっても、「定義の反映」を実行すると更新内容が取り消される。

7.4.2. タブ切替のヘッダーフォームの有無による違い

タブ切替を利用する場合には、ヘッダーフォームの有無を選択することができます。
ヘッダーフォームの有無により、表示される画面には、次のような違いがあります。
  • タブ切替のヘッダーフォームなしの構成では、ヘッダーの黒いタイトルバー部分は表示されません。

    タブ切替では、タブ内に表示する画面のヘッダーの内容を「タブ名」として表示します。
    そのため、ヘッダーフォームなしで構成する場合には、ヘッダーを設定していてもヘッダーの黒いタイトルバー部分は表示されません。
    ヘッダー設定の「戻るリンク」については、表示する設定が有効な場合、タブの表示時にもタブの下に表示されます。
    ../../_images/difference.png

7.4.3. タブ切替の遷移の設定

タブ切替では、タブ自体のクリックによる遷移と、「次へ」「戻る」ボタンによる遷移が利用できます。
「次へ」「戻る」を利用した遷移の場合には、以下の図のように各ボタンで遷移方向が決まっているため、タブの配置順に合わせて必要なボタンを配置してください。
../../_images/button.png

7.4.4. タブ切替を設定する(ヘッダーフォームなし)

IM-BIS のフローで、タブ切替(ヘッダーフォームなし)を設定する手順は、以下の通りです。
../../_images/only_tab_flow.png

7.4.4.1. 1つめのタブに表示する画面を作成する

IM-BIS の基本的な設定 」を参考に、BIS定義の登録から1つめの画面を作成する作業までを行います。
(タブ切替の設定を行う前には、必ず対象のタスク(ノード)に1つ以上画面を設定しておく必要があります。)

7.4.4.2. 画面遷移設定を表示し、タブ切替を設定する

1つのタスク(ノード)に対して、タブで表示するための画面遷移設定を表示します。
  1. 対象のタスク(ノード)で右クリックし、「画面」→「画面遷移設定」をクリックします。

    ../../_images/display_1_1.png
  2. 「画面遷移設定」が表示されますので、追加するタブの画面の登録や遷移情報を登録していきます。

    ../../_images/display_1_2.png

7.4.4.3. タブの画面を追加する

画面遷移設定で他のタブに表示する画面を追加します。
  1. 遷移方法を「タブ切替」に変更します。

    ../../_images/add_1_1.png
  2. 最初に作成した画面は「タブフォーム」の一覧に表示されていますので、他のタブに表示する画面を追加するために「追加」をクリックします。

    ../../_images/add_1_2.png
  3. 「フォーム-登録」画面が表示されますので、必要な情報を入力し、「登録」をクリックします。

    ../../_images/add_1_3.png
  4. 「フォーム・デザイナ」画面が表示されたら、最初に設定した画面と同様にアイテムを配置し、画面を作成します。
    ../../_images/add_1_4.png
  5. タブの表示名を設定するために「ヘッダーとフッター」をクリックします。

    ../../_images/add_1_5.png
  6. ヘッダー設定のチェックをオンにし、タイトル名にタブの表示名を入力してから「設定」をクリックします。

    ../../_images/add_1_6.png

    コラム

    「戻るリンク」

    「タブ切替」では、タブ間は「次へ」ボタンや「戻る」ボタン、またはタブを直接クリックすると遷移することができます。
    「ヘッダーとフッター」の「戻るリンク」は、すべてのタブフォーム、ヘッダーフォーム共通で遷移元の一覧画面(例:申請一覧など)に遷移します。

    コラム

    タブ切替時のプレビュー

    「タブ切替」では、プレビュー画面は画面単位に表示しますので、ヘッダーに設定した内容は、タブ切替を利用しない場合と同様の表示です。
    タブ切替で組み合わせた画面は、実行時のみ表示することができます。
    ヘッダーに設定した表示名は、実行時にはタブのラベルとして表示されます。
  7. 画面が作成できたら「更新」をクリックし、画面を保存します。

    ../../_images/add_1_7.png
  8. 同様の手順で、タブに表示する画面の作成を繰り返し行い、タブに表示するすべての画面が設定できたら「更新」をクリックして保存します。

    ../../_images/add_1_8.png
  9. 以上で、1つのタスク(ノード)に対するタブで表示する画面(ヘッダーフォームなし)が設定できました。
    この後は、フローの実行に必要な設定を行ってください。

7.4.5. タブ切替を設定する(ヘッダーフォームあり)

IM-BIS のフローで、ヘッダーフォームとタブフォームを組み合わせて設定する手順は、以下の通りです。
../../_images/header_form_flow.png

7.4.5.1. 1つめのタブに表示する画面を作成する

IM-BIS の基本的な設定 」を参考に、BIS定義の登録から1つめの画面を作成する作業までを行います。
(タブ切替の設定を行う前には、必ず対象のタスク(ノード)に1つ以上画面を設定しておく必要があります。)

7.4.5.2. 画面遷移設定を表示し、タブ切替を設定する

1つのタスク(ノード)に対して、タブで表示するための画面遷移設定を表示します。
  1. 対象のタスク(ノード)で右クリックし、「画面」→「画面遷移設定」をクリックします。

    ../../_images/display_2_1.png
  2. 「画面遷移設定」が表示されますので、追加するタブの画面の登録や遷移情報を登録していきます。

    ../../_images/display_2_2.png

7.4.5.3. タブの画面を追加する

画面遷移設定で他のタブに表示する画面を追加します。
  1. 遷移方法を「タブ切替」に変更します。

    ../../_images/add_2_1.png
  2. 最初に作成した画面は「タブフォーム」の一覧に表示されていますので、他のタブに表示する画面を追加するために「追加」をクリックします。

    ../../_images/add_2_2.png
  3. 「フォーム-登録」画面が表示されますので、必要な情報を入力し、「登録」をクリックします。

    ../../_images/add_2_3.png
  4. 「フォーム・デザイナ」画面が表示されたら、最初に設定した画面と同様にアイテムを配置し、画面を作成します。
    ../../_images/add_2_4.png
  5. タブの表示名を設定するために「ヘッダーとフッター」をクリックします。

    ../../_images/add_2_5.png
  6. ヘッダー設定のチェックをオンにし、タイトル名にタブの表示名を入力してから「設定」をクリックします。

    ../../_images/add_2_6.png

    コラム

    「戻るリンク」

    「タブ切替」では、タブ間は「次へ」ボタンや「戻る」ボタン、またはタブを直接クリックすると遷移することができます。
    「ヘッダーとフッター」の「戻るリンク」は、すべてのタブフォーム、ヘッダーフォーム共通で遷移元の一覧画面(例:申請一覧など)に遷移します。

    コラム

    タブ切替時のプレビュー

    「タブ切替」では、プレビュー画面は画面単位に表示しますので、ヘッダーに設定した内容は、タブ切替を利用しない場合と同様の表示です。
    タブ切替で組み合わせた画面は、実行時のみ表示することができます。
    ヘッダーに設定した表示名は、実行時にはタブのラベルとして表示されます。
  7. 画面が作成できたら「更新」をクリックし、画面を保存します。

    ../../_images/add_2_7.png
  8. 同様の手順で、タブに表示する画面の作成を繰り返し行い、タブに表示するすべての画面を追加します。

    ../../_images/add_2_8.png

7.4.5.4. ヘッダーフォームを作成する

最後にヘッダーフォームを追加して、タブ切替の画面を完成させます。
  1. すべてのタブフォームの設定後に、「画面遷移設定」で「ヘッダーフォーム」の「追加」をクリックします。

    ../../_images/header_2_1.png
  2. 「フォーム-登録」画面が表示されますので、ヘッダーフォームに必要な情報を入力し、「登録」をクリックします。

    ../../_images/header_2_2.png
  3. ヘッダーとして表示するフォームを作成したら、「更新」をクリックして画面(フォーム)を保存します。

    ../../_images/header_2_3.png

    注意

    タブ切替でヘッダーフォームを表示する場合には、タブで表示する画面に配置したアイテムのフィールド識別IDと重複しないように設定してください。
    ヘッダーフォームとタブフォームでフィールド識別IDが重複するアイテムが存在した場合、実行時に正しく表示されないなどの事象が発生する可能性があります。
  4. 最後に「画面遷移設定」の「更新」をクリックして、タブ切替の設定内容を保存します。

    ../../_images/header_2_4.png
  5. 以上で、1つのタスク(ノード)に対するヘッダーとタブを組み合わせて表示する画面が設定できました。
    この後は、フローの実行に必要な設定を行ってください。

7.4.6. タブ切替で入力チェックを設定する

タブ切替を利用する場合、タブで表示する画面に設定した入力チェックは、対象のタブに配置した「ボタン(次へ)」や「ボタン(登録)」、タブのクリックによる遷移時に行われます。
ただし、タブやヘッダーフォームに配置されている「ボタン(登録)」をクリックしたタイミングで入力チェックが行われた場合には、表示されなかったタブに配置されているアイテムに設定された入力チェックが行われません。
そのため、タブに配置したアイテムの入力チェックをもれなく行うためには、タブ自体を表示必須とするチェックを合わせて設定する必要があります。
ここでは、アイテムの入力チェックと、タブの表示必須チェックの設定の手順を説明します。
../../_images/input_check_flow.png

7.4.6.1. タブで表示する画面を作成する

上の「タブ切替を設定する」を参考に、タブで表示する画面を作成します。

7.4.6.2. フォーム・デザイナで対象のアイテムのプロパティの入力チェックを設定する

最初に、入力チェックの対象のアイテムを配置しているタブの編集画面(フォーム・デザイナ)で入力チェックを設定します。
  1. 対象の画面の「フォーム編集」アイコンをクリックし、「フォーム・デザイナ」画面を表示します。

    ../../_images/item_check_1.png
  2. 入力チェックの対象とするアイテムのプロパティを表示し、入力チェックを設定します。

    ../../_images/item_check_2.png
  3. 画面内の対象のアイテムすべてに入力チェックの設定ができたら、画面を保存します。

    ../../_images/item_check_3.png
  4. タブで表示する画面に対して、1~3の手順を繰り返し、アイテムへの入力チェックを設定します。

7.4.6.3. タブ単位に入力チェックを設定する

次に、タブ切替のタブ(フォーム)単位で表示必須のチェックを設定します。
画面遷移設定のフォーム名の横の入力チェックを設定した場合には、該当の画面の表示有無に対してチェックが行われます。
  1. 対象のタスク(ノード)で右クリックし、「画面」→「画面遷移設定」をクリックします。

    ../../_images/tab_check_1.png
  2. 入力チェックを設定した画面の「入力チェック」をオンにして、「更新」をクリックします。

    ../../_images/tab_check_2.png
  3. 以上で、タブ切替での入力チェックを設定することができました。

7.4.7. タブ切替でフォーム遷移名を変更する

7.4.7.1. フォーム遷移名を変更する

画面遷移、タブ切替で設定したフォーム遷移名を変更する手順は以下の通りです。
  1. 「画面遷移設定」を表示します。
    「フォーム遷移名」右のアイコンをクリックしてください。
    ../../_images/transition_name_1.png
  2. 下に表示されたフォーム遷移名の欄に任意の名前を入力してください。

    ../../_images/transition_name_2.png
  3. 最後に「更新」をクリックすると、フォーム遷移名が変更されました。

    ../../_images/transition_name_3.png
    更新後は以下のようにフォーム遷移名が変わっていることが確認できます。
    • 変更前

      ../../_images/transition_name_before.png
    • 変更後

      ../../_images/transition_name_after.png