項目の値によって、特定のパーツの表示を切り替えるサンプルをご紹介します。
ここでは、チェックボックスパーツの値によって、項目の表示/非表示を切り替えます。
利用するイベント
サンプルフォーム
サンプルで利用するフォームには、以下のパーツを配置しています。
パーツID | パーツタイプ | 補足 |
---|---|---|
fidDisplay | チェックボックスパーツ | 表示/非表示の切り替え ※デフォルトでチェックする:ON チェック有り:表示する チェック無し:表示しない |
fidText | テキスト(一行)パーツ | 入力 |
カスタマイズコード
(function () {
'use strict';
/**
* チェックボックスの変更イベント
*/
collaboflow.events.on('request.input.fidDisplay.change', function (e) {
const parts = e.parts;
// 表示するの場合、テキストパーツ表示
if (parts['fidDisplay'].value === '表示する') {
parts['fidText'].display = true;
return;
}
// 表示しない場合は、テキストパーツ非表示
parts['fidText'].display = false;
});
})();
動作の確認手順
- サンプルのカスタマイズコードをjsファイルに保存します。
- アプリ設定>フォーム設定から新規にフォームを作成します。
- サンプルフォームに、先で記載されている必要な項目を配置します。
- サンプルフォームを再度表示し、カスタマイズのタブを表示します。
- 保存したファイルをアップロードします。
- アプリ設定>経路設定から新規に経路を作成します。
- 任意に経路アイテムを配置して、経路を作成します。
- 新規文書から作成した経路名をクリックします。
- チェックボックスの値を変更すると、テキストパーツの表示が切り替わります。
コメント
0件のコメント
記事コメントは受け付けていません。