初めに
前回はJavaScriptAPIを使っての値の取得と更新を試しました。
今回はRESTAPIで1件のレコードの取得と値の更新サンプルです。
※複数件はまた別です。
手順
- フィールドコード
テキストという文字列を1つ設置してください - 下記コードをコピペしてtest.js等適当な名前で保存し、アプリ設定でアップロード
- レコードを追加し、適当な文字を入れて保存
- レコード詳細画面で押下して値の更新。今回ABCという文字が入力され画面が更新されます。
test.js
(() => {
'use strict';
const fieldCode = "テキスト"
// ボタン押下時に書きかえる
const updateFunction = async () =>{
const appId = kintone.app.getId();
const recordId = 1;
const body = {
app:appId,
id: recordId
};
const res = await kintone.api(kintone.api.url('/k/v1/record.json', true), 'GET', body);
const record = res.record;
//取得したデータの表示
alert(`書きかえ前の${fieldCode}の値は${record[fieldCode].value}だよ`);
// 更新のパラメータを宣言
const putBody = {
app: appId,
id: recordId,
record: {
[fieldCode]: {
value: 'ABC'
}
}
};
// 非同期で更新
await kintone.api(kintone.api.url('/k/v1/record.json', true), 'PUT', putBody);
// 画面の更新
location.reload();
}
kintone.events.on('app.record.detail.show', (event) => {
// ボタンの設置と作成
const button = document.createElement("button")
button.innerText = "書き換え"
button.addEventListener("click",updateFunction)
// kintoneに表示する要素（位置）を取得して、ボタンを設置。
const el = kintone.app.record.getHeaderMenuSpaceElement()
el.appendChild(button)
// 必ずeventを返してあげる
return event
});
})();
説明
今回はレコード詳細画面にて、レコード番号が1のレコードを取得し、レコード番号1に対して更新を行ってます。適宜変更してください。
- 取得 =>
await kintone.api(kintone.api.url('/k/v1/record.json', true), 'GET', body)
ではRESTAPIを使ってレコードを取得してます。ですが、詳細画面であればAPI数も使いもったいないので-kintone.app.record.get()で取得してあげた本来は良いです。サンプルという事で。使う場面は、別アプリのデータ取得する場合が多いのかなと思います。 - 更新 =>
await kintone.api(kintone.api.url('/k/v1/record.json', true), 'PUT', putBody);で値を更新し、更新した後の値を確認するためにlocation.reload()で画面をリロードし直してあげてます。
async/await??
突然asyncとawaitという文字がついています。const updateFunction = async () =>{...}やawait kintone.api(...)の部分です。
ざっくりですが、こいつを使うことで返答があるまでお前らちょっと待ってくれやという状態になります。
非同期処理してくれるRESTAPIでデータ取得した際、通常この結果を待たずに上から下に処理が進みます。待たずに進むと期待していたrecordも取得できないまま処理が進み、値を表示しようとしてもに空の段階のものが表示されます。なので同期的に処理してねという合図としてasync/awaitを使用しています。私も最初全然わかりませんでした
(今尚不安)
こちらも詳しくは下記にリンク張ります。言葉足らずですみません、セツメイムズカシイ。
REST APIについて、下記ドキュメントに詳しくわかりやすく記載されてます。
おわりに
今回は1件のレコードをRESTAPIで取得して更新してみました。
複数になるとbodyにrecordIdではなくqueryを使用していくようになるので、そちらもまた別に書いていきたいと思います。
