kintone の app.record.edit.submit イベントのハンドラ内で非同期処理をする場合

kintone カスタマイズ
1

質問です。

例えば、以下のように、イベントハンドラ内で非同期でAPIなどから値を取得し、その値を 「submit実行前」に event.record にセットしたいのですが、

セットしようとしても、callback 関数よりも先に「return event」が実行されてしまうため、反映されないのです。

kintone.events.on([“app.record.edit.submit”], function(event){

var record = event.record;

kintone.proxy('/url/to/api', 'GET', {}, {},
  function(body, status, headers) { // callback 関数

      var result = JSON.parse(body);
      var _record = kintone.app.record.get();
      _record["record"]["FIELD_CODE"]["value"] = result.data;

     kintone.app.record.set(_record); // 間に合わない

  });

// 非同期なのでここで下のように書くこともできない
// record[""FILED"]["value"] = getBySomeAPI();

return event; // 先に実行

});

非同期処理のまま、return event 実行前に record の値を書き換える方法はありますでしょうか。

あるいは、jQuery の $.ajax を用いる場合には { async : false } オプションを使用すれば無理やり同期処理とすることも可能だったのですが、 kintone.proxy でも、同様に同期処理とすることは可能なのでしょうか。

2

ちなみに、kintone.app.record.set ではなく、kintone.api を用いて

var app = kintone.app.getId();
var id = kintone.app.record.getId();
var data = {
“app” : app,
“id” : id,
“record” : {
“FIELD” : { “value” : “my result here” }
}
};
kintone.api(“/k/v1/record”, “PUT”, data, function(res){
//
});

と、REST API を使用すれば、データのセット自体は可能であることを確認しています。けれども、リアルタイムに値が反映されませんし、わざわざ REST API を使うのもなあ・・・と思っています。

3

平井様、cstapの落合です。

私も試してみましたが、同期通信はできなさそうですね・・・
jQueryの$.ajaxを利用する手がベターかと思います。

あとすでに把握済みかもしれませんが、kintone.app.record.get／setについて以下の注意点があります。

kintone.events.on のインベントハンドラ内で kintone.app.record.get および kintone.mobile.app.record.get を実行することはできません。
kintone.events.on のインベントハンドラ内で kintone.app.record.set および kintone.mobile.app.record.set を実行することはできません。

ご注意ください。

jQueryの$.ajaxを使う場合は以下のような感じでどうでしょう？
郵便番号入れたら都道府県を保存前に設定するJavaScriptです。

(function() {
“use strict”;

kintone.events.on([“app.record.edit.submit”, “app.record.create.submit”], function(event) {
zipToAddr(event.record);
return event;
});
})();

var zipToAddr = function(record) {
var zipcode = record[“zipcode”][“value”];
$.ajax({
url: ‘http://api.aoikujira.com/zip/json/’ + zipcode,
dataType: ‘json’,
async: false,
success: function(json) {
record[“prefecture”][“value”] = json[“state”];
}
});
};

4

落合様

ご回答有難うございます。
jQueryの$.ajax を使用する場合、URLが https:// で始まらない場合に警告が出たり、うまく行かなかったので、 TIPS記事を参考に kintone.proxy で代替したところ、APIから無事にデータを取得できた経緯があります。

jQueryの$.ajax で SSL に対応しないAPI に接続する場合の注意点などありますでしょうか？

また、イベントハンドラ内で kintone.app.record.get／set が使用できない点について、私もドキュメントでも実動作でも確認済みですが、どうも、非同期の callback 関数の中では使用できるみたいなのですよね・・・これは仕様なのでしょうか。有難いのでそのまま使わせて頂いていますが。

5

平井様
cstapの落合です。

外部APIの実行には、可能ならkintone.proxyを使う方が良いかと思います。
$.ajaxの利用する場合は、やはりクロスドメインの注意が必要かと思います。
サーバー側にAccess-Control-Allow-Originを設定することなど、クロスドメインは結構ハマりやすいです。

ですが、クロスドメイン周りは情報も多いので「jquery ajax クロスドメイン」などで検索してみてください。

非同期のcallback関数の中ではkintone.app.record.get／setが使用できるのですね^^;
別イベントとして処理されているのかもしれません。
使えるものは使っちゃいましょう(^^♪