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

7.3. 画面遷移を利用する

画面遷移設定から複数の画面を作成すると、1つのタスク(ノード)に対して、遷移を伴う画面を設定することができます。

7.3.1. 画面遷移設定とは

1つのタスク(ノード)で複数の画面を遷移して表示するための機能です。
../../_images/form_transition_about.png

注意

多くのアイテムを配置したことが原因で画面表示に時間がかかっているような場合には、画面遷移設定を利用して複数の画面にアイテムを分散させると、表示のパフォーマンスが向上する可能性があります。

注意

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

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

7.3.2. 画面遷移設定を利用する

IM-BIS のフローで、特定のタスク(ノード)に画面遷移を設定する手順は、以下の通りです。
../../_images/form_transition_flow.png

7.3.2.1. タスクに割り当てる1つめの画面を作成する

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

7.3.2.2. 画面遷移設定を表示する

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

    ../../_images/display_1.png
  2. 「画面遷移設定」が表示されますので、画面の追加や遷移情報の登録を行います。

    ../../_images/display_2.png

7.3.2.3. タスクに画面を追加する

画面遷移設定で遷移先や遷移元に指定するための画面を追加します。
  1. 遷移方法が「画面遷移」となっていることを確認し、「追加」をクリックします。

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

    ../../_images/add_2.png
  3. 「フォーム・デザイナ」画面が表示されたら、先に登録した画面と同様にアイテムを配置し、画面を保存します。
    この際、「 アイテムコピー 」を利用すると、遷移元や遷移先での値の受け渡しが簡単に行えます。
    ../../_images/add_3.png

    コラム

    アイテムコピー

    IM-BIS のフローでは、同一フロー内で異なる画面間で値の受け渡しを行うためには、「フィールド識別ID」が同一のアイテムとなっている必要があります。
    「アイテムコピー」では、作成済みの他の画面に配置済みのアイテムの一覧から同一のフィールド識別IDのアイテムを配置することができるため、簡単に画面間の値の受け渡しを設定することができます。
  4. 同様の手順で、1つのタスク(ノード)に対して、遷移に利用する複数の画面を登録します。

    ../../_images/add_4.png

7.3.2.4. 画面の遷移順を設定する

作成した画面を遷移したい順番に並び替えます。
  1. 「画面遷移設定」で遷移方法が「画面遷移」となっている場合、フォーム一覧の上から順に「次へ」や「戻る」ボタンで遷移することができます。

    ../../_images/order_1.png
  2. 遷移順を変えたい場合には、フォーム名をドラッグ&ドロップで入れ替えます。

    ../../_images/order_2.png
  3. 遷移順が設定できたら「更新」をクリックして、画面遷移設定を保存します。

    ../../_images/order_3.png
  4. 以上で、1つのタスク(ノード)に対する画面遷移が設定できました。
    この後は、フローの実行に必要な設定を行ってください。

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

画面遷移、タブ切替で設定したフォーム遷移名を変更する手順は以下の通りです。
  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

7.3.3. スマートフォン表示を利用する

IM-BIS のフローで、特定のタスク(ノード)にスマートフォン表示を設定する手順は、以下の通りです。
../../_images/sp_setting_flow.png

7.3.3.1. タスクに割り当てる1つめの画面を作成する

IM-BIS の基本的な設定 」を参考に、BIS定義の登録から1つめの画面を作成する作業までを行います。

7.3.3.2. スマートフォン設定でレイアウトを設定する

1つのタスク(ノード)に対する複数画面の設定画面を表示します。
  1. 対象のタスク(ノード)で右クリックし、「画面」→「開く」をクリックします。

  2. フォーム・デザイナで「スマートフォン設定」をクリックします。

    ../../_images/sp_layout_1.png
  3. スマートフォンでのレイアウトを適切な内容とするために、アイテムの設定を変更します。

    ../../_images/sp_layout_2.png
    • 水平線を挿入する

      項目間を区切る目的で「水平線」を挿入することができます。
      (アイテムの「横線」「縦線」はスマートフォンでは表示対象外です。)
      1. 「スマートフォン設定」の「水平線」をドラッグし、アイテム一覧部分の任意の場所にドロップします。

        ../../_images/horizontal_line_1.png
      2. 以下のように「水平線」が挿入されました。
        削除する場合は、アイコンをクリックしてください。
        ../../_images/horizontal_line_2.png
    • アイテム・ボタンの表示場所を変更する

      ボタン系のアイテムは、ヘッダ・コンテンツ・フッターに配置することができます。
      初期では、「フッター」に配置されます。
      1. 「スマートフォン設定」の「ボタン」をドラッグし、ヘッダーに移動します。

        ../../_images/move_button_1.png
      2. 以下のようにボタンをヘッダーに移動できました。

        ../../_images/move_button_2.png

        コラム

        フッターに5つ以上ボタンを配置した場合、4番目以降のボタンは「more」から別途表示される画面から操作します。
    • アイテムの表示・非表示を変更する

      スマートフォン向けに、アイテムの表示・非表示を設定できます。
      1. 「スマートフォン設定」で非表示にするアイテムの「設定」をクリックします。

        ../../_images/set_display_1.png
      2. 設定に表示されるアイコンが変わったら、スマートフォンでは該当のアイテムは表示されません。

        ../../_images/set_display_2.png
    • ヘッダー、アイテムのラベルを変更する

      ヘッダーやアイテムに、スマートフォン向けのラベルを設定できます。
      複数のラベル設定項目を持つ画面アイテムの場合、「ラベル編集切替」で対象のラベルを切り替えてから設定します。
      1. 「スマートフォン設定」でラベルを変更するアイテムの「ラベル」をクリックします。

        ../../_images/edit_label_1.png
      2. ラベルが入力可能になったら、設定したい内容を入力します。

        ../../_images/edit_label_2.png
    • プレビューを表示する

      スマートフォン向けに設定したレイアウトを確認できます。
      1. 「スマートフォン設定」で「プレビュー」をクリックします。

        ../../_images/show_preview_1.png
      2. 別画面でスマートフォン表示のプレビューが表示されます。

        ../../_images/show_preview_2.png
  4. 設定内容を保存するために、「確定」をクリックします。

    ../../_images/sp_layout_3.png
  5. フォーム・デザイナで「更新」をクリックし、フォームを保存します。

    ../../_images/sp_layout_4.png

7.3.3.3. 画面遷移でスマートフォン表示を設定する

スマートフォンでアクセスした際、PC版・スマートフォン版のどちらで表示するかは、「画面遷移設定」で設定できます。
  1. 対象のタスク(ノード)で右クリックし、「画面」→「画面遷移設定」をクリックします。

    ../../_images/sp_config_1.png
  2. 「画面遷移設定」が表示されますので、「スマートフォン表示」を「スマートフォン版」にし、「更新」をクリックします。

    ../../_images/sp_config_2.png
  3. 以上で、スマートフォンでのアクセス時に、スマートフォン向けレイアウトで表示するための設定ができました。

7.3.4. IM-BIS 2015 Spring(8.0.7)以前のバージョンのフロー(BIS定義)でスマートフォン表示を利用するには

IM-BIS 2015 Spring(8.0.7)以前のバージョンで作成したフロー(BIS定義)でスマートフォン表示を利用するためには、スマートフォン設定後に、以下の設定作業を行います。
  1. 「BIS管理者」ロールを付与されているユーザでログインします。

  2. 「サイトマップ」→「ワークフロー」→「ワークフロー管理者」→「マスタ定義」→「コンテンツ定義」をクリックします。

  3. 対象のフロー(BIS定義)が参照しているコンテンツ定義の「編集」をクリックします。

    ../../_images/add_sp_1.png
  4. 「バージョン」タブをクリックします。

    ../../_images/add_sp_2.png
  5. 設定対象のバージョンの「編集」をクリックします。

    ../../_images/add_sp_3.png
  6. 「画面」タブをクリックします。

    ../../_images/add_sp_4.png
  7. 「新規作成」をクリックします。

    ../../_images/add_sp_5.png
  8. 以下の通りにスマートフォン表示向けの画面を設定し、「登録」をクリックします。
    以下に示している設定項目以外については、任意に設定してください。
    ../../_images/add_sp_6.png
    • 一時保存画面(スマートフォン用)

      設定項目 設定値
      画面名 一時保存画面(スマートフォン用)
      画面種別 一時保存画面(スマートフォン用)
      パス種別 スクリプト開発モデル
      スクリプトパス bis/imw/view/smartphone/apply_view
    • 未申請画面(スマートフォン用)

      設定項目 設定値
      画面名 未申請画面(スマートフォン用)
      画面種別 申請(起票案件)画面(スマートフォン用)
      パス種別 スクリプト開発モデル
      スクリプトパス bis/imw/view/smartphone/apply_view
    • 申請画面(スマートフォン用)

      設定項目 設定値
      画面名 申請画面(スマートフォン用)
      画面種別 申請画面(スマートフォン用)
      パス種別 スクリプト開発モデル
      スクリプトパス bis/imw/view/smartphone/apply_view
    • 再申請画面(スマートフォン用)

      設定項目 設定値
      画面名 再申請画面(スマートフォン用)
      画面種別 再申請画面(スマートフォン用)
      パス種別 スクリプト開発モデル
      スクリプトパス bis/imw/view/smartphone/retry_view
    • 処理画面(スマートフォン用)

      設定項目 設定値
      画面名 処理画面(スマートフォン用)
      画面種別 処理画面(スマートフォン用)
      パス種別 スクリプト開発モデル
      スクリプトパス bis/imw/view/smartphone/approve_view
    • 確認画面(スマートフォン用)

      設定項目 設定値
      画面名 確認画面(スマートフォン用)
      画面種別 確認画面(スマートフォン用)
      パス種別 スクリプト開発モデル
      スクリプトパス bis/imw/view/smartphone/approve_view
  9. 以上で、以前のバージョンで作成したフローへのスマートフォン表示の設定が完了しました。

    ../../_images/add_sp_7.png

注意

サブフローでスマートフォン表示を利用するためには

IM-BIS 2015 Spring(8.0.7)以前のバージョンで作成したフローのサブフローで「スマートフォン表示」を利用する場合には、以下の手順で設定してください。

  1. 上の「 IM-BIS 2015 Spring(8.0.7)以前のバージョンのフロー(BIS定義)でスマートフォン表示を利用するには 」に基づいて、サブフローへの「スマートフォン設定」を設定します。

  2. サブフローの呼び出し元のメインフローでは、サブフローを再度設定してください。
    (「フロー編集」のコンテキストメニューから「サブフロー」→「設定」をクリックし、同じフローを選択してください。)