ラジオボタンパーツの値によって、特定のパーツの表示/非表示を切り替える
ラジオボタンパーツの値によって、特定のパーツの表示/非表示を切り替えるサンプルを紹介します。
ここでは、その他を選択した場合に、テキスト一行パーツを表示します。
サンプルについて
本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。
利用するイベント
申請入力画面イベント（表示イベント）
申請入力画面イベント（パーツ値変更イベント）
サンプルフォーム
サンプルで利用するフォームには、以下のパーツを配置しています。
パーツID | パーツタイプ | 補足 |
fidRadio | ラジオボタン | 項目名と値に「その他」を設定 |
fidText | テキスト（一行） |
カスタマイズコード
カスタマイズコードCopied!
(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. 申請画面が表示されます。
動作イメージ
