項目の値によって、特定のパーツの表示/非表示を切り替える

項目の値によって、特定のパーツの表示を切り替えるサンプルをご紹介します。
ここでは、チェックボックスパーツの値によって、項目の表示/非表示を切り替えます。

利用するイベント

パーツ値変更イベント
詳しくは、利用可能な画面、イベントの一覧をご確認ください。

サンプルフォーム

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

パーツID

パーツタイプ

補足

fidDisplay

チェックボックスパーツ

表示/非表示の切り替え

※デフォルトでチェックする：ON

チェック有り：表示する

チェック無し：表示しない

fidText

テキスト（一行）パーツ

入力


カスタマイズコード

カスタマイズコード
Copied!
(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;
});
})();

動作の確認手順

1. サンプルのカスタマイズコードをjsファイルに保存します。

2. アプリ設定＞フォーム設定から新規にフォームを作成します。

3. サンプルフォームに、先で記載されている必要な項目を配置します。

4. サンプルフォームを再度表示し、カスタマイズのタブを表示します。

5. 保存したファイルをアップロードします。

6. アプリ設定＞経路設定から新規に経路を作成します。

7. 任意に経路アイテムを配置して、経路を作成します。

8. 新規文書から作成した経路名をクリックします。

9. チェックボックスの値を変更すると、テキストパーツの表示が切り替わります。