全体的にリセットができない・・

kintone カスタマイズ
1

いつも大変お世話になっております。

以下のように、チェック①②③④：ドロップダウンで、 未回収 、 回収 、 なし となってまして、

未回収 ⇒ 回収予定日 が必須；

回収 ⇒ 回収日 が必須＆もし 回収予定日に記入がある場合、同時に表示させる ；

なし ⇒ 回収予定日 ＆ 回収日 空欄＆非表示とさせる動きがしたいです。

今のところ、何故か最初に なし とした１組だけが、その動きができる。（例えば：チェック③に回収予定日＆回収日を記入後、 なし を選ぶと回収予定日＆回収日は空欄になる。でも続けて、チェック②で なし を選んであと、回収を選ぶと前に入力した回収予定日②が消えない・・）

コードのどこがおかしいでしょうか？ご教示していただけるととても助かります。どうぞよろしくお願い致します。

(function () {
"use strict";

var events = [
"app.record.edit.show","app.record.create.show",
"app.record.index.edit.show","app.record.detail.show",
"app.record.edit.change.チェック1","app.record.create.change.チェック1","app.record.index.edit.change.チェック1",
"app.record.edit.change.チェック2","app.record.create.change.チェック2","app.record.index.edit.change.チェック2",
"app.record.edit.change.チェック3","app.record.create.change.チェック3","app.record.index.edit.change.チェック3",
"app.record.edit.change.チェック4","app.record.create.change.チェック4","app.record.index.edit.change.チェック4",

];

kintone.events.on(events, function(event) {
 
   var record = event.record;
   var check1 = record["チェック1"].value;
   var check2 = record["チェック2"].value;
   var check3 = record["チェック3"].value;
   var check4 = record["チェック4"].value;
  
   if(check1 === '未回収') {
   kintone.app.record.setFieldShown('回収日1', false);
   kintone.app.record.setFieldShown('回収予定日1', true);
   } if(check1 === '回収') {
   kintone.app.record.setFieldShown('回収日1', true);
   kintone.app.record.setFieldShown('回収予定日1', true);
   } if(!check1 || check1 === 'なし') {
kintone.app.record.setFieldShown('回収予定日1', false);
kintone.app.record.setFieldShown('回収日1', false);
record.回収予定日1.value = "";
record.回収日1.value = "";
   }
  
   if(check2 === '未回収') {
   kintone.app.record.setFieldShown('回収日2', false);
   kintone.app.record.setFieldShown('回収予定日2', true);
   } if(check2 === '回収') {
   kintone.app.record.setFieldShown('回収日2', true);
   kintone.app.record.setFieldShown('回収予定日2', true);
   } if(!check2 || check2 === 'なし') {
kintone.app.record.setFieldShown('回収予定日2', false);
kintone.app.record.setFieldShown('回収日2', false);
record.回収予定日2.value = "";
record.回収日2.value = "";
   }
  
   if(check3 === '未回収') {
   kintone.app.record.setFieldShown('回収日3', false);
   kintone.app.record.setFieldShown('回収予定日3', true);
   } if(check3 === '回収') {
   kintone.app.record.setFieldShown('回収日3', true);
   kintone.app.record.setFieldShown('回収予定日3', true);
   } if (!check3 || check3 === 'なし') {
kintone.app.record.setFieldShown('回収予定日3', false);
kintone.app.record.setFieldShown('回収日3', false);
record.回収予定日3.value = "";
record.回収日3.value = "";
   }
  
   if(check4 === '未回収') {
   kintone.app.record.setFieldShown('回収日4', false);
   kintone.app.record.setFieldShown('回収予定日4', true);
   } if(check4 === '回収') {
   kintone.app.record.setFieldShown('回収日4', true);
   kintone.app.record.setFieldShown('回収予定日4', true);
   } if (!check4 || check4 === 'なし') {
kintone.app.record.setFieldShown('回収予定日4', false);
kintone.app.record.setFieldShown('回収日4', false);
record.回収予定日4.value = "";
record.回収日4.value = "";
  
   } return event;
});

// エラーを表示する処理
var events2 = [
"app.record.index.edit.submit","app.record.create.submit","app.record.edit.submit",
"app.record.edit.show","app.record.create.show","app.record.index.edit.show","app.record.detail.show",
"app.record.edit.change.チェック1" ,"app.record.create.change.チェック1" ,"app.record.index.edit.change.チェック1",
"app.record.edit.change.チェック2" ,"app.record.create.change.チェック2" ,"app.record.index.edit.change.チェック2",
"app.record.edit.change.チェック3" ,"app.record.create.change.チェック3" ,"app.record.index.edit.change.チェック3",
"app.record.edit.change.チェック4" ,"app.record.create.change.チェック4" ,"app.record.index.edit.change.チェック4",
"app.record.edit.change.回収日1" ,"app.record.create.change.回収日1" ,"app.record.index.edit.change.回収日1",
"app.record.edit.change.回収予定日1" ,"app.record.create.change.回収予定日1" ,"app.record.index.edit.change.回収予定日1",
"app.record.edit.change.回収日2" ,"app.record.create.change.回収日2" ,"app.record.index.edit.change.回収日2",
"app.record.edit.change.回収予定日2" ,"app.record.create.change.回収予定日2" ,"app.record.index.edit.change.回収予定日2",
"app.record.edit.change.回収日3" ,"app.record.create.change.回収日3" ,"app.record.index.edit.change.回収日3",
"app.record.edit.change.回収予定日3" ,"app.record.create.change.回収予定日3" ,"app.record.index.edit.change.回収予定日3",
"app.record.edit.change.回収日4" ,"app.record.create.change.回収日4" ,"app.record.index.edit.change.回収日4",
"app.record.edit.change.回収予定日4" ,"app.record.create.change.回収予定日4" ,"app.record.index.edit.change.回収予定日4",

];
kintone.events.on(events2, function(event) {
var record = event.record;
var checkVa1 = record["チェック1"].value;
var checkVa2 = record["チェック2"].value;
var checkVa3 = record["チェック3"].value;
var checkVa4 = record["チェック4"].value;

// 選択肢により必須表示

if(checkVa1 === '未回収'){
if ( !record["回収予定日1"].value ){
record["回収予定日1"].error = "必須項目！";
}else{
record["回収予定日1"].error = null;
}
}

if(checkVa1 === '回収'){
record["回収予定日1"].error = null;
if ( !record["回収日1"].value ){
record["回収日1"].error = "必須項目！";
}else{
record["回収日1"].error = null;
}
}

if(checkVa2 === '未回収'){
if ( !record["回収予定日2"].value ){
record["回収予定日2"].error = "必須項目！";
}else{
record["回収予定日2"].error = null;
}
}

if(checkVa2 === '回収'){
record["回収予定日2"].error = null;
if ( !record["回収日2"].value ){
record["回収日2"].error = "必須項目！";
}else{
record["回収日2"].error = null;
}
}

if(checkVa3 === '未回収'){
if ( !record["回収予定日3"].value ){
record["回収予定日3"].error = "必須項目！";
}else{
record["回収予定日3"].error = null;
}
}

if(checkVa3 === '回収'){
record["回収予定日3"].error = null;
if ( !record["回収日3"].value ){
record["回収日3"].error = "必須項目！";
}else{
record["回収日3"].error = null;
}
}

if(checkVa4 === '未回収'){
if ( !record["回収予定日4"].value ){
record["回収予定日4"].error = "必須項目！";
}else{
record["回収予定日4"].error = null;
}
}

if(checkVa4 === '回収'){
record["回収予定日4"].error = null;
if ( !record["回収日4"].value ){
record["回収日4"].error = "必須項目！";
}else{
record["回収日4"].error = null;
}
}

return event;
});

})();
2

要因が複雑に絡み合ってるかもしれませんね。問題を切り分けるためにも以下をまずためしてみるのはどうでしょう？

 

  • 一旦エラー制御ははずす

  • チェック1〜4のイベントハンドリングを分ける（チェック1だけのイベント、チェック2だけのイベント、チェック3だけの…とわける

 

3

村濱一樹 様

お世話になっております。

アドバイス頂き、誠にありがとうございます。動きは問題なく動きましたが、

ランダム入力際の動きがコントロールできない・・

ここに再度投稿させていただいたように、エラーの順番で記入しないとやっぱり正確な動きができなくなってしまいます。

実際運営の項目は１０個もあります・・やっぱり全部おっしゃる通り、チェック1〜１０のイベントハンドリングを分けてやるしかないでしょうか？

お手すきな際にアドバイス頂けたら幸いです。どうぞよろしくお願い致します。

4

Changeイベントの順番の落とし穴な気がしているんですよね。。手元にないので試せませんが、

まずは、３・４件からでもハンドリング分けてみましたか？それで動作確認がとれたのであればあとは分割すればいいだけですので、

 

これらのコードは以下のようにまとめれそうです。

※下記はイメージです、実際にためしたわけではありませんのでご留意を。

// 動的にチェック1-10のためのイベントハンドラを作る
function setCheckEvents() {
for (let i = 1; i <= 10; i++) {
const events = ["app.record.edit.change.チェック" + i,"app.record.create.change.チェック"+ i, "app.record.index.edit.change.チェック"+ i];
kintone.events.on(events, function(event) {
      const check = event.record.["チェック"+i].value;
  
  if(check ==='未回収') {
   kintone.app.record.setFieldShown('回収日' + i,false);
   kintone.app.record.setFieldShown('回収予定日' + i,true);
   }if(check ==='回収') {
   kintone.app.record.setFieldShown('回収日' + i,true);
   kintone.app.record.setFieldShown('回収予定日' + i,true);
   }if(!check || check ==='なし') {
kintone.app.record.setFieldShown('回収予定日', + ifalse);
kintone.app.record.setFieldShown('回収日' + i,false);
record["回収予定日" + i].value="";
record["回収日" + i].value="";
   }
return event;
}
}
}
5

村濱一樹 様

お世話になっております。

再度アドバイス頂き、誠にありがとうございます。

教わって頂いたコードで、感動いたしました！プロの皆様はこうやってまとめてコードを書くこと！！

恐縮ながら、質問させていただいても大丈夫でしょうか？お忙しいところ大変恐れ入りますが、ご指導頂けたら幸いです。

私まだ知識不足で、このようにコード宣言することが初めてて、ネット上も色々調べてみましたが、回答がなくて・・

このようにコードを真似した時点で、上と下になにを追加すればいいかわからなくて・・今まですべて

(function () {
"use strict";

var events = [
のように始まって、
return event;
});

})();で終わってました・・・

②また今回このようなエラーになりますが、const checkをどう修正すべきかもわからず・・

 

6

これをつかうというのは変わりませんよ。

(function () {
"use strict";
var events = [
のように始まって、
return event;
});
})();

 

function…で始まっているのは関数です。
関数はこのようにつかいます。

setCheckEvent();

 

なので、下記のようなイメージです。

(function () {
"use strict";

functionsetCheckEvents() {} // 関数書く（中身は省略）

  setCheckEvents();

});
})();

 

関数などをつかえばコードの見通しや保守性はだいぶ上がりますので、興味があればぜひ下記のはじめようJavaScriptカスタマイズシリーズを参考にしてみてください。

https://developer.cybozu.io/hc/ja/articles/115002336526

7

村濱一樹 様

お世話になっております。何度もアドバイス頂き、誠にありがとうございます。

関数を使ったほうが本当に便利ですね。

ただ、ずっとやってみているのですが、この辺がうまくいかなくて、改めて粘ってみます。。。

8

僕のソースコードがSyntax Errorですね。

動作確認してないので、すいません！

 

✗ const check = event.record.[“チェック”+i].value;
○ const check = event.record[“チェック”+i].value;

こまかいですが . ドットが不要でした。他にもエラーでるかもしれません。

9

村濱一樹 様

お世話になっております。何度も何度もご丁寧に教えていただき、誠にありがとうございます。

ちょっと動きました。とてもうれしいです。週末かけてもうちょっと粘ってみます。

その前にもし可能であれば、このコードでの関数の繋がりは間違っているかどうかだけ再度アドバイス頂けますでしょうか？

10

つながりとは何を指しますでしょうか？

とりあえず関数だけうごくか確認してみたいなら、関数の中身は一旦シンプルにしてみてはどうですか？

 

 

プログラム書くときの基本的な考え方としては、問題の切り分けを意識してみてください。

まずは関数内をシンプルにして問題なく動くか
次にFor文が想定通りうごいているか
for文の中をシンプルにしてうごくか…

最初はStep by stepになると思いますが、今後も書く予定があればぜひTryしてみてください。

11

お世話になっております。

色々とアドバイス頂き、誠にありがとうございます。

私まだプログラム経験全然浅いので、おっしゃる通り、思考から改めて頑張ってみたいと思います。

初めてfunction setCheckEvents() を教わったお陰様で、今まで長々となってたコードがシンプルにでき、とても気持ちよくて、心より感謝申し上げます。大変恐縮ではございますが、以下のように追加してみたら、動きますが37のところがビックリマーク（Don’t make functions wighin a loop.）となっておりまして、これは関数をループしないみたいですが、正確ではどう組めば正しいでしょうか？もしお時間ありましたら、再度教えていただくことは可能でしょうか？何度も何度も本当に申し訳ございませんが、返事頂けたら幸いです。

(function () {
"use strict";
// 動的にチェック1-10のためのイベントハンドラを作る
function setCheckEvents() {
for (let i = 1; i <= 4; i++) {
const events = ["app.record.edit.show","app.record.create.show","app.record.index.edit.show","app.record.detail.show",
"app.record.edit.change.チェック"+ i,"app.record.create.change.チェック"+ i, "app.record.index.edit.change.チェック"+ i];
kintone.events.on(events, function(event) {
    const check = event.record["チェック"+i].value;
    
    if(check){
   if(check === '未回収') {
   kintone.app.record.setFieldShown('回収日' + i, false);
   kintone.app.record.setFieldShown('回収予定日' + i, true);
   }else if(check === '回収') {
   kintone.app.record.setFieldShown('回収日' + i, true);
   if(event.record['回収予定日' + i].value){
   kintone.app.record.setFieldShown('回収予定日' + i, true);
   }else{
   kintone.app.record.setFieldShown('回収予定日' + i, false);
   }
  
   }else if(check === 'なし') {
   kintone.app.record.setFieldShown('回収日' + i, false);
   kintone.app.record.setFieldShown('回収予定日' + i, false);
   event.record['回収予定日' + i].value = "";
event.record['回収日' + i].value = "";
   }
   }else{
   kintone.app.record.setFieldShown('回収予定日' + i, false);
kintone.app.record.setFieldShown('回収日' + i, false);
event.record['回収予定日' + i].value = "";
event.record['回収日' + i].value = "";
   }
    
return event;
});
}
}
setCheckEvents();

// });
})();
12

Functionの中でforを回してるのが良くなかったです、実際には回数を切りかえやすくするために下記がいいですね。下記だと警告もなくなります。

 

(function () {
"use strict";
// 動的にチェック1-10のためのイベントハンドラを作る
function setCheckEvents(i) {
const events = ["app.record.edit.show", "app.record.create.show", "app.record.index.edit.show", "app.record.detail.show", "app.record.edit.change.チェック" + i, "app.record.create.change.チェック" + i, "app.record.index.edit.change.チェック" + i];
kintone.events.on(events, function (event) {    
const check = event.record["チェック" + i].value;       
if (check) {  
if (check === '未回収') {  
kintone.app.record.setFieldShown('回収日' + i, false);  
kintone.app.record.setFieldShown('回収予定日' + i, true);  
} else if (check === '回収') {  
kintone.app.record.setFieldShown('回収日' + i, true);  
if (event.record['回収予定日' + i].value) {  
kintone.app.record.setFieldShown('回収予定日' + i, true);  
} else {  
kintone.app.record.setFieldShown('回収予定日' + i, false);  
}    
} else if (check === 'なし') {  
kintone.app.record.setFieldShown('回収日' + i, false);  
kintone.app.record.setFieldShown('回収予定日' + i, false);  
event.record['回収予定日' + i].value = "";
event.record['回収日' + i].value = "";  
}  
} else {  
kintone.app.record.setFieldShown('回収予定日' + i, false);
kintone.app.record.setFieldShown('回収日' + i, false);
event.record['回収予定日' + i].value = "";
event.record['回収日' + i].value = "";  
}    
return event;
});
}

// forを関数を呼び出すときに使用
for (let i = 1; i <= 4; i++) {
setCheckEvents(i);
}
})();
13

大変お世話になっております。

ご教授ありがとうございました！
最終の構成までご提示いただき、大変助かりました！！ネットでも色々検索してみましたが、やっぱり応用ができず、お陰様で正しい組み方まで教っていただき、大きな一歩成長できたような気がします（涙）

最後にもう一個質問させていただいてもよろしいでしょうか？

頂いたコードに

"app.record.index.edit.submit", "app.record.create.submit", "app.record.edit.submit",

と一部の条件を加えただけでなんと理想な動きができました（感動）。今までは私が最初に投稿したように、エラーはエラーで定義しているイベントを一個増やしてましたが、今回は一個のイベントですべてが実現できたのは、やっぱりシンプル＆正確に関数を使用したからでしょうか？

お手すきな際に回答していただけると幸いです。

(function () {
"use strict";
// 動的にチェック1-10のためのイベントハンドラを作る
function setCheckEvents(i) {
const events = ["app.record.index.edit.submit", "app.record.create.submit", "app.record.edit.submit",//0827追加
"app.record.edit.show", "app.record.create.show", "app.record.index.edit.show", "app.record.detail.show", "app.record.edit.change.チェック" + i, "app.record.create.change.チェック" + i, "app.record.index.edit.change.チェック" + i];
kintone.events.on(events, function (event) {    
const check = event.record["チェック" + i].value;       
if (check) {  
if (check === '未回収') {  
kintone.app.record.setFieldShown('回収日' + i, false);  
kintone.app.record.setFieldShown('回収予定日' + i, true); 
event.record['回収日' + i].value = ""; 
if (!(event.record['回収予定日' + i].value)) {  //0827追加
event.record['回収予定日' + i].error = "必須です";//0827追加
}//0827追加
} else if (check === '回収') {  
kintone.app.record.setFieldShown('回収日' + i, true);  
if (event.record['回収予定日' + i].value) {  
kintone.app.record.setFieldShown('回収予定日' + i, true);  
} else {  
kintone.app.record.setFieldShown('回収予定日' + i, false);  
}  
if (!(event.record['回収日' + i].value)) {  //0827追加
event.record['回収日' + i].error = "必須です";//0827追加
}//0827追加

} else if (check === 'なし') {  
kintone.app.record.setFieldShown('回収日' + i, false);  
kintone.app.record.setFieldShown('回収予定日' + i, false);  
event.record['回収予定日' + i].value = "";
event.record['回収日' + i].value = "";  
}  
} else {  
kintone.app.record.setFieldShown('回収予定日' + i, false);
kintone.app.record.setFieldShown('回収日' + i, false);
event.record['回収予定日' + i].value = "";
event.record['回収日' + i].value = "";  
}    
return event;
});
}

// forを関数を呼び出すときに使用
for (let i = 1; i <= 4; i++) {
setCheckEvents(i);
}

})();
14

> 今までは私が最初に投稿したように、エラーはエラーで定義しているイベントを一個増やしてましたが、今回は一個のイベントですべてが実現できたのは、やっぱりシンプル＆正確に関数を使用したからでしょうか？

むしろ、1個1個ちゃんとイベントを定義したからだと思います。

kintone.events.on()

でapp.record.edit.change.チェック1-4を、for文を使って繰り返し必要な数だけ定義しています。Tomyさんの最初のコードは1個のkintone.events.on()にチェック1-4を全部いれた結果、動きがおかしくなったのかなと思いました。そのため、kintone.events.onとチェックフィールドの数を1対1にして試した見た、というのが私が提示したコードですね。

最初のコード:
1つのkintone.events.on()に、チェック1-4のChangeEventを定義していた

私が提示したコード:
4つのkintone.events.on()に、チェック1-4のChangeEventを定義した

※今回の関数は4回もevents.onの定義するのが面倒だったので、まとめた、というおまけの要素ですね。

関数にまとめたからうまくいく、うまくいかないというのは基本的にありません。強いて言えば、同じコードは複数回書かないことによってバグを減らしたり見通しを良くしたりできるので、予期せぬ不具合には遭遇しにくくはなります。

 

15

村濱一樹 様

大変お世話になっております。

承知いたしました！！！

最後までご丁寧に教えていただき、とても光栄です。

今後の思考的にも大きな勉強になりました。このたびは誠にありがとうございました。感謝の気持ちでいっぱいです！

今後も機会あれば、ぜひご指導のほど、どうぞよろしくお願い致します。