フォームブリッジのチェックボックスの選択数の制御について

kintone カスタマイズ
1

お世話になります。押川と申します。

フォームブリッジでアンケート調査用のフォームを作成しています。

回答の選択肢をチェックボックスを使っていますが、設問によっては、「３つまで選んでください」や「３つ以内で選んでください」、「３つ以上選んでください」等が想定されます。

設問ごとにチェックボックスの数をチェックし、条件にあてはまらない場合、メッセージを表示する等で正確な回答数を取り込めるようにしたいと考えています。実現できる方法を教えてください。

kintoneもフォームブリッジもjavascriptも初心者ですが、どうぞよろしくお願いします。

2

押川さん
cstapの瀧ヶ平です

カスタムバリデーションを実装することで可能かと思います。
state.record.<チェックボックスのフィールドコード>.value.lengthが指定個数より大きいかを判定するようなバリデーションを実装すると良いです

(function () {
  'use strict';

  fb.events.form.created.push(function (state) {
    state.fields.find(({code}) => code === "フィールドコード1").validations.push({
      params: [3, "<"], // 選択数を3個未満にする場合
      rule: 'checkbox_validation'
    }); state.fields.find(({code}) => code === "フィールドコード2").validations.push({ params: [3, ">"], // 選択数を3個より多くする場合 rule: 'checkbox_validation' });
    return state;
  });

  fb.addValidators = function (state) {
    return {
      checkbox_validation: {
        getMessage: function (fieldCode, [count, operator]) {
          switch(operator) { case "<": return `選択している数を${count}個未満にしてください` case ">": return `選択している数を${count}個より多くしてください` }          
        },
        validate: function (value, [count, operator]) {
          switch(operator) { case "<": return value.length < count; case ">": return value.length > count; }
        }
      }
    };
  };
})();

3個未満、3個より多いの場合は以上のようなコードで実装できるかと思います

参考になれば幸いです

3

瀧ヶ平 様

ご連絡ありがとうございます。

実装できるよう挑戦します。kintoneのカスタマイズは少しだけ勉強しましたが、フォームブリッジは触るのもはじめで時間がかかると思いますが、がんばってみます。

"フィールドコード1"、"フィールドコード2"のところにフォームブリッジのチェックボックスのフィールドコードを書き換えるという理解でよろしいでしょうか。

 

4

瀧ヶ平 様

お世話になっております。押川です。

cstapのフォームブリッジカスタマイズのページに記載されているコードと見比べると

よりよく理解できました。ありがとうございます。無事に実装できました。

追加で教えて頂きたいのですが、３個未満にするフィールドが、複数ある場合の記述方法を教えてください。

よろしくお願いします。

5

お世話になっております。押川です。

複数ある場合、下記のように記述しています。動作に問題はありませんが、数が多くなると少々面倒なことになりそうです。

よい記述方法があればご教示ください。

(function () {
'use strict';

fb.events.form.created.push(function (state) {
state.fields.find(({code}) => code === "問６").validations.push({
params: [3, "<="], // 選択数を3個以下にする場合
rule: 'checkbox_validation'
});

state.fields.find(({code}) => code === "問８").validations.push({
params: [3, "<="], // 選択数を3個より多くする場合
rule: 'checkbox_validation'
});

state.fields.find(({code}) => code === "問１０").validations.push({
params: [2, "<="], // 選択数を2個以下にする場合
rule: 'checkbox_validation'
});

state.fields.find(({code}) => code === "問１８").validations.push({
params: [3, "<="], // 選択数を3個より多くする場合
rule: 'checkbox_validation'
});
return state;
});

fb.addValidators = function (state) {
return {
checkbox_validation: {
getMessage: function (fieldCode, [count, operator]) {
switch(operator) {
case "<=":
return `選択している数を${count}個以内にしてください`
case ">":
return `選択している数を${count}個より多くしてください`
}
},
validate: function (value, [count, operator]) {
switch(operator) {
case "<=":
return value.length <= count;
case ">":
return value.length > count;
}
}
}
};
};
})();
6

押川さん

複数のパターンの場合には設定を各オブジェクトで表現し、それを元にイテレーションしてバリデーションを設定すると良いです。

例えば

letconfig={"fieldCode1":{
    count:4,
    operator:"\<"},"fieldCode2":{
    count:1,
    operator:"\<="},"fieldCode3":{
    count:2,
    operator:"\<="}
};fb.events.form.created.push(function(state) {Object.keys(config).forEach(fieldCode=\>{let{count, operator}=config[fieldCode];state.fields[fieldCode].valudations.push({
      params:[count, operator],
      validator:"checkbox\_validation"});
  })
});
/**
* 略
*/

のようにする方法があります。

7

瀧ヶ平 様

ご連絡ありがとうございます。

複数のパターン、すっきりしていいですね。早速試してみます。

チェックボックスの選択数はアンケート調査では、よくあることなのでフォームブリッジの標準機能になると、いいですね。

今後ともよろしくお願いします。

 

8

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。