ラジオボタンパーツの値によって、特定のパーツの表示/非表示を切り替える

ラジオボタンパーツの値によって、特定のパーツの表示/非表示を切り替えるサンプルを紹介します。
ここでは、その他を選択した場合に、テキスト一行パーツを表示します。

サンプルについて

本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。

利用するイベント

• 申請入力画面イベント - 表示イベント
• 申請入力画面イベント - パーツ値変更イベント

サンプルフォーム

サンプルで利用するフォームには、以下のパーツを配置しています。

パーツID	パーツタイプ	補足
fidRadio	ラジオボタン	項目名と値に「その他」を設定
fidText	テキスト（一行）

カスタマイズコード

(function () {
    'use strict';

      // 新規入力画面表示時とラジオボタンパーツ変更時のイベント
      const inputEvents = ['request.input.show','request.input.fidRadio.change'];


      collaboflow.events.on(inputEvents, function (eventData) {
        const parts = eventData.parts;

        // ラジオボタンの値が「その他」以外の場合、テキストパーツの値を消して非表示にする
        if (parts['fidRadio'].value === '' || !(parts['fidRadio'].value === 'その他')) {
            parts['fidText'].value = '';
            parts['fidText'].display = false;
            return;
        }

        // ラジオボタンパーツでその他を選択した場合にテキストパーツを表示する
        parts['fidText'].display = true;
      });
})();

動作の確認手順

1. サンプルのカスタマイズコードをjsファイルに保存します。
2. アプリ設定 > フォーム設定から新規に通常フォームを作成します。
3. サンプルフォームに、先で記載されている必要な項目を配置します。
4. サンプルフォームを再度表示し、カスタマイズのタブを表示します。
5. 保存したファイルをアップロードします。
6. アプリ設定 > 経路設定から新規に経路を作成します。
7. 新規文書から作成した経路名をクリックします。
8. 申請画面が表示されます。

動作イメージ