changeイベントでのkintone.apiの実行順序

チェック項目の値の変更時(changeイベント)でアラートを表示しています。

A、B、Cの3つの項目にそれぞれの条件でアラートを出しています。

Aから順にチェックしていき、引っ掛かった時点でイベントをreturnします。

 

Aでは他のアプリの値と一致するかを確認するため、

kintone.apiのGETでAの値と一致するレコードがあるかを条件に、

一致するレコードがあると、window.alert(重複があります)を出します。

BとCは、値が未入力の場合にwindow.alert(Bが未入力です)/(Cが未入力です)を出します。

 

理想としては、Aを入力し、チェック項目にチェックを入れると重複がある場合は

「重複があります」が表示され、処理を抜け、

重複は無いがBが未入力の場合は、

「Bが未入力です」が表示され、処理を抜けるという動きです。

 

しかし、コードを書いて動かしたところ、

Aが重複していて、Bが未入力の場合

Bのアラート→Aのアラート→処理を抜ける という流れで動作します。

非同期処理なので、Aのアラートが出る前にBのアラートが動いて、

そのあとAのアラートが出てイベントを抜けていると推測しています。

 

changeイベントでは、kintone.apiはreturnできないので、理想通りの動きにするのは不可能でしょうか?

 

よろしくお願いします。 

juridonさんが記事を書いておられます。
change系のイベントではPromiseをreturnすることはできないので、
kintone.app.record.get,kintone.app.record.setを使用します。

岡崎様

ご回答ありがとうございます。
記載いただいたurl 確認いたしました。
私の認識が間違っていなければ、添付の記事はレコードの値の更新の方法だと思います。

アラートはどこに記述すればよろしいでしょうか?
カスタマイズ初心者のため、初歩的な質問でしたら申し訳ありません。
ご回答いただけますと幸いです。よろしくお願いします。

Hiroさん、
こちら私の勘違いで的外れな回答でした。
失礼いたしました。

Hiroさんの現在の症例の原因はapiの非同期処理にあります。
apiの結果が返ってくる前にBの処理へ進んでいるという状態です。
JavaScriptは上から実行しているように見えますが実際には少し違います。
本件のようなプログラムでは同期、非同期的な処理の理解は重要になってきます。

async awaitを用いると、各処理で結果を待つことができるようになります。(同期的)
書き方はいくつかありますが、コードを拝見することはできますか?

こちらも参考になるかと。async awaitの使い方は調べてください。
apiでデータ取得を待って、その内容でチェックをして条件によりアラート。

以下は全体的にどのようなプログラム構成になるかというものです。
B,Cの空判定をelse if で繋げてはいけません。

//ここで重複チェックに必要な情報を取得
const result = await kintone.api();

/*
取得後処理内容
*/

if(重複あり){
window.alert('重複');
return;
}else if(B == ''/*空*/){
  event.error = 'Bの入力なし'
}
if(C == ''/*空*/){
event.error = 'Cの入力なし'
}

return event;

岡崎 光輝

ご回答ありがとうございます。

私が現在書いているコードは以下の通りです。

一部抜粋したため、抜けている部分等あるかもしれませんので、

あくまでもコードの流れの確認としてみていただけますと幸いです。

 

私は同期処理にするために、’then’・’catch’を使っていました。

できれば、使い慣れているこちらの書き方で書きたいのですが、async awaitではなくても可能でしょうか?

よろしくお願いします。

//省略~
//changeイベント
var event = event.record;

var body = {
‘app’: 3, //他のアプリ
‘query’: ‘A="’ +event.A.value+ ‘" limit 1’,  // Aの値と他アプリのAの値が一致したものを1件取得
};

kintone.api(kintone.api.url(‘/k/v1/records’, true), ‘GET’, body).then(function(resp) {
// 1件取得できた場合
if(resp.records.length ===1){
alert(‘重複があります’);
return event;
}

}).catch(function(resp) {
// エラー表示をする
event.error = resp.message;
return event;
});

if(!event.B.value){
alert(‘Bが未入力です’);
return event;
}

if(!event.C.value){

alert(‘Cが未入力です’);
return event;
}

//~省略

Hiroさん

最後にまとめて、エラーメッセージを表示するのはいかがでしょうか?
change系のイベントでプロミスで待機中のオブジェクトをreturnできないので、除外しております。

async awaitを使わないのであれば、下記のようにまとめると一番早いですが、Promiseを使って順に処理する方が良いです。

//changeイベント
var event = event.record;

var body = {
'app': 3,
  //他のアプリ
'query': 'A=\"' + event.A.value + '\" limit 1', // Aの値と他アプリのAの値が一致したものを1件取得
};

//エラーがあればメッセージを格納するため、配列を用意
let errorMessage = [];

kintone.api(kintone.api.url('/k/v1/records', true), 'GET', body).then(function(resp) {  // 1件取得できた場合
 
if (resp.records.length === 1) {
errorMessage.push('重複があります'); 
}

if (!event.B.value) {
errorMessage.push('Bが未入力です');
}
if (!event.C.value) {
errorMessage.push('Cが未入力です');
}

//エラーがあれば配列を改行コードで連結し、アラート
if (errorMessage.length > 0) {
alert(errorMessage.join(''));
}

}).catch(function(resp) {
// エラー表示をする
console.log(resp.message);
});

岡崎様

ご回答頂きありがとうございます。
配列へのエラー格納は考えていなかったので、とても勉強になりました。

最後に、一応確認させていただきたいのですが、
1つずつアラートを出す方が良いとなった場合は、
async awaitを使わないと難しいという認識でよろしいでしょうか。

お手数お掛けしますがよろしくお願いいたします。

可能なカスタマイズではありますが、
こちらでコードを提供することは代行サービスになりますので
出来かねます。

こちらを参考に作成できるかと思います。

いずれにせよ、api→入力チェックという流れになると、
apiの結果を待っての実行になるので、promise,もしくはasync awaitをしようすることになるかと。

 

個人的にはpromiseを理解するとasync awaitのほうが直感的でわかりやすいかと思います。