【フォームブリッジ】テーブルのドロップダウンの値に応じて動的にフィールド編集を制御する

この記事では､kintoneのプラグインフォームブリッジのドロップダウンフィールドの値に応じて､特定のフィールドの編集を禁止するカスタマイズを紹介します｡

サンプルコード:

(function () {
    "use strict";

    // テーブルとフィールドのコードを宣言
    const tableCode = "テーブルフィールドコード";
    const triggerFieldCode = "ドロップダウンフィールドコード";
    const fieldsToControl = ['フィールドコード1', 'フィールドコード2']; // 編集を制御したいフィールドのコード

    // テーブル内のドロップダウンフィールドの変更を検知し、条件に応じて編集禁止を設定
    fb.events.fields[tableCode].fields[triggerFieldCode].changed = [function (state, params) {
        // ドロップダウンフィールドの変更があった行の参照を取得
        const rowSelector = `[data-vv-name="${tableCode}-${params.index}-${triggerFieldCode}"]`;
        const rowElement = document.querySelector(rowSelector).closest('tr');

        if (params.value === 'その他') {
            // 条件に一致する場合、特定のフィールドを編集禁止にする
            disableFields(rowElement, fieldsToControl, params.index);
        } else {
            // 条件に一致しない場合、フィールドの編集禁止を解除
            enableFields(rowElement, fieldsToControl, params.index);
        }
    }];

    // 指定したフィールドを編集禁止にする関数
    function disableFields(rowElement, fieldCodes, rowIndex) {
        fieldCodes.forEach(code => {
            const input = rowElement.querySelector(`[data-vv-name="${tableCode}-${rowIndex}-${code}"] input`);
            if (input) input.disabled = true;
        });
    }

    // 指定したフィールドの編集禁止を解除する関数
    function enableFields(rowElement, fieldCodes, rowIndex) {
        fieldCodes.forEach(code => {
            const input = rowElement.querySelector(`[data-vv-name="${tableCode}-${rowIndex}-${code}"] input`);
            if (input) input.disabled = false;
        });
    }

})();

使い方

下記の部分をフォームブリッジに合わせて変更してください｡

    const tableCode = "テーブルフィールドコード";
    const triggerFieldCode = "ドロップダウンフィールドコード";
    const fieldsToControl = ['フィールドコード1', 'フィールドコード2']; 

課題点

その場で編集をできないようにするだけなので､先に値をいれてからドロップダウンを変更されてしまうと､値を入力できてしまいます｡

下記を参考に､編集を禁止した箇所に値をセットして､不正な値が入力されないようにしたいところです｡

フォームブリッジのJavascriptカスタマイズでハマったこと、工夫したこと

ちょっと記事としては中途半端な感じになってしまいましたが､今回は以上です｡