メインコンテンツまでスキップ

フォームに対する操作で表示項目が変化するフォームを作成する

アクション設定のアイテムイベントを利用して、フォームに対する操作で表示項目が変化するフォームを作成する方法を解説します。
このチュートリアルでは、「問い合わせ種別」で「不具合」を選択した場合のみ、不具合に関する詳細な入力項目が表示される「管理者問い合わせ」フローを作成します。

作成するフォーム(「要望」選択時)
図:作成するフォーム(「要望」選択時)

作成するフォーム(「不具合」選択時)
図:作成するフォーム(「不具合」選択時)

注記

「Accel-Mart Quick ワークフロー管理者」ロールを持つユーザで実施してください。

想定されるユースケース

選択する項目に応じて、他のアイテムの表示を変更したい場合などにご使用いただけます。

ワークフローの名前を登録する

ワークフロー「【チュートリアル】管理者問い合わせフロー(アイテムイベント)」を新規作成します。
登録方法の詳細は「簡単なワークフローを作成する - ワークフローの名前を登録する」を参照してください。

登録するワークフロー

ルート定義を設定する

ルート定義を設定します。
設定方法の詳細は「簡単なワークフローを作成する - ルート定義を設定する」を参照してください。

設定するルート定義
図:設定するルート定義

「申請者」のフォームを設定する

「申請者」で申請するための画面を設定します。

  1. 「申請者」ノードをダブルクリックして、「フォーム-登録」画面を表示します。

    「IM-BIS-フロー編集」

  2. フォーム名に「管理者問い合わせフォーム」と入力し、「登録」ボタンをクリックします。

    「フォーム-登録」

アイテムを設定する

ヘッダーや画面の入力項目を設定します。
ヘッダーの設定、アイテムの配置、および、見た目の設定の詳細は、「テンプレートを利用せずに簡単なフォームを作成する - 「申請者」のフォームを設定する」を参照してください。

  1. 「ヘッダー設定」の「タイトル名」に「管理者問い合わせ」と入力します。

  2. 「表示アイテム」から「見出し」、「共通マスタアイテム」から「ユーザ選択」「組織選択」を配置します。

  3. 「入力アイテム」から「日付」「ラジオボタン」「複数行文字列」「ファイルアップロード」を配置します。

  4. 「ボタンアイテム」から「ボタン(処理モーダル)」「ボタン(一時保存)」を配置します。

  5. 配置したアイテムのラベルを図のように設定します。

    作成するフォーム

ラジオボタンで項目を選択できるようにするため、データを定義します。
また、後述するアクション設定で条件を設定するために詳細を設定します。

  1. 「問い合わせ種別」をダブルクリックして、「プロパティ」を表示します。

  2. 「データの定義」タブを選択します。

  3. 「項目の定義」の プラスアイコン をクリックして、ラジオボタンで選択できる項目を追加します。

  4. 「要望」の「送信値」を「1」、「不具合」の「送信値」を「2」にするため、図のように入力します。

    ラジオボタンで選択できる項目

  5. 「詳細設定」タブを選択します。

  6. 「フィールド識別ID」を「inquiry_type」、「フィールド初期選択値」を「不具合」にするため、図のように入力します。

    「問い合わせ種別」-「プロパティ」-「詳細設定」

  7. 「問い合わせ種別」の初期選択が「不具合」になるように設定できました。

  8. 同様の手順で、「当該不具合発生日」「不具合発生時の操作内容」のフィールド識別IDを、「defect_date」「operation_details」と入力します。

アクション設定のアイテムイベントを設定する

アクション設定の1つであるアイテムイベントを設定します。
このチュートリアルでは、一部の入力項目が、「問い合わせ種別」で「不具合」を選択すると表示され、「要望」を選択すると表示されなくなるように設定します。

アイテムイベント

画面上のアイテムに対する操作(クリック・入力など)が発生した際に実行するアクションを設定します。

  1. 「アクション設定」をクリックし、「イベント設定」ダイアログを表示します。

    アクション設定の選択

  2. 「アイテムイベント」タブを選択します。

  3. まず、「問い合わせ種別」で「要望」を選択した際に、「当該不具合発生日」「不具合発生時の操作内容」を非表示にする設定を追加します。

  4. 「追加」をクリックします。

  5. 「アイテム」のセレクトボックスから「問い合わせ種別 | inquiry_type」を選択します。

    イベントタイプ

    選択したアイテムに対して、どの操作イベント(クリック、入力など)が発生した際にアクションを実行するかを選択します。
    選択できるイベントは、選択したアイテムによって異なります。

  6. 編集アイコン をクリックします。

    「イベント設定」

  7. 「アクション設定」ダイアログが表示されます。

    アクション設定

    「イベント設定」で設定したイベントが発生した際に、実行されるアクションを設定します。

  8. 「追加」をクリックします。

  9. 初期設定では「入力モード変換」が選択されているため、セレクトボックスから「表示モード変換」を選択します。

  10. 非表示にしたいアイテムを設定するため、編集アイコン をクリックします。

    「アクション設定」

  11. 「表示モード変換設定」ダイアログが表示されます。

  12. 「[ 日付] 当該不具合発生日 | defect_date」、「[ 複数行文字列] 不具合発生時の操作内容 | operation_details」を追加します。

  13. 「位置調整」を有効にします。

  14. 「確定」ボタンをクリックします。

     「表示モード変換設定」

  15. 選択したアイテムを非表示にする条件を設定するため、編集アイコン(黄色) をクリックします。

  16. 「条件設定」ダイアログが表示されます。

  17. 「inquiry_type="1"」と入力して、「確定」ボタンをクリックします。

  18. 次に、「問い合わせ種別」で「不具合」を選択した際に、「当該不具合発生日」「不具合発生時の操作内容」を表示する設定を追加します。

  19. 「アクション設定」ダイアログで「追加」をクリックします。

  20. 同様の手順で、「表示モード変換設定」ダイアログを表示します。

  21. 「[ 日付] 当該不具合発生日 | defect_date」、「[ 複数行文字列] 不具合発生時の操作内容 | operation_details」を追加します。

  22. 「表示モード」で「表示」を選択し、「位置調整」を有効にします。

  23. 「確定」ボタンをクリックします。

     「表示モード変換設定」

  24. 選択したアイテムを表示する条件を設定するため、編集アイコン(黄色) をクリックします。

  25. 「条件設定」ダイアログが表示されます。

  26. 「inquiry_type="2"」と入力して、「確定」ボタンをクリックします。

  27. 「アクション設定」ダイアログに戻るので、「確定」ボタンをクリックします。

  28. 「イベント設定」ダイアログに戻るので、「確定」ボタンをクリックします。

  29. 最後に「更新」をクリックして、フォームの設定内容を保存します。

備考

「アイテムイベント」だけでは、申請画面の初期表示や申請時に選択したアイテムを反映した承認・確認画面での表示は制御できません。
申請画面の初期表示や、承認・確認時の画面表示も制御したい場合は、「初期表示イベント」を併用する必要があります。
「初期表示イベント」の詳細は、「条件によって初期表示される項目が変化するフォームを作成する」を参照してください。

申請画面の画面設定を他の画面と共有する

ここまでの手順で作成した画面を、「承認者」の承認時にも参照できるように設定します。
設定方法の詳細は「簡単なワークフローを作成する - 申請画面の画面設定を他の画面と共有する」を参照してください。

共有完了後のフロー
図:共有完了後のフロー

ワークフローを申請する

フォームに設定した「管理者問い合わせ」が申請時に画面として表示されることを確認します。
また、「当該不具合発生日」「不具合発生時の操作内容」が「問い合わせ種別」で「要望」を選択した際は非表示になり、「不具合」を選択した際には表示されることを確認します。

  1. メニューの「申請」から、「申請一覧」画面を表示します。

  2. 「【チュートリアル】管理者問い合わせフロー(アイテムイベント)」をクリックします。

  3. 「管理者問い合わせ」画面が表示されます。

  4. 「問い合わせ種別」には「不具合」が選択されているため、「当該不具合発生日」「不具合発生時の操作内容」が表示されることを確認します。

    「管理者問い合わせ」

  5. 「問い合わせ種別」で「要望」を選択し、上記の項目が非表示になることを確認します。

    「管理者問い合わせ」

  6. 再び「問い合わせ種別」で「不具合」を選択すると、上記の項目は再表示されることを確認します。

  7. 「問い合わせ」の項目を設定、入力します。

  8. 「申請」ボタンをクリックして、申請します。