パーツの値によって入力を制御する

リストメニューパーツの値によってテキストの入力を許可/不許可とするサンプルをご紹介します。

ここでは、リストメニューパーツの値が「その他」の場合にのみ、テキストの入力を許可します。

動作イメージ

利用するイベント

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

サンプルフォーム

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

パーツID	パーツタイプ	補足
fidListmenu	リストメニューパーツ	商品名の選択
fidText	テキスト（一行）パーツ	選択肢にない商品名の入力

カスタマイズコード

(function () {
    'use strict';

    // 新規入力画面表示時とリストメニュー変更時のイベント
    const inputEvents = ['request.input.show','request.input.fidListmenu.change'];

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

        // リストメニューの値により、テキストパーツの表示を切り替える
        if (parts['fidListmenu'].value === 'その他') {
            parts['fidText'].display = true;
            return;
        }

        parts['fidText'].display = false;
        parts['fidText'].value = '';
    });
})();

動作の確認手順

1. サンプルのカスタマイズコードをjsファイルに保存します。
2. アプリ設定＞フォーム設定から新規に通常フォームを作成します。
3. サンプルフォームに、先で記載されている必要な項目を配置します。
4. サンプルフォームを再度表示し、カスタマイズタブを表示します。
5. 保存したファイルをアップロードします。
6. アプリ設定＞経路設定から新規に経路を作成します。
7. 新規文書から作成した経路名をクリックします。
8. 申請画面が表示されます。
9. リストメニューで「その他」を選んだ場合、テキストパーツに入力できます。