配置したcsv出力ボタンを押したとき、出力フラグとしてのチェックボックスを自動的にONにしたい

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

javascript初心者です。

現在、勤務先でkintoneアプリを作成・提出を求められているのですが、

周囲にはプログラミングが出来る方が殆どおらず、長時間悩んでおり、相談できる方もいないので書き込みをいたしました。

現在、こちらのQiitaの記事を書いてくださった方のコードを利用させていただき、csv出力ボタンを作りました。https://qiita.com/juri_don/items/e7b21e155a7a6f84fee9

現在、チェックボックスが『済』(csv出力済みの意)の状態になっていたら、チェックが付いていないcsvデータをボタンを押した時に出力するようにし、実装が出来ています。

ここにさらに、csvを出力したら、それらのデータに対し出力済みと分かるように自動的に『済』にチェックを入れるようにしたいです。

考え方としては、出力フラグがついていないすべてのデータ(or済データを含む全データ)を取得し、

それらのデータを出力フラグを済に一括更新する、という流れかと思うのですが、

うまくコードに起こすことが出来ずに悩んでおります。(コメントアウト7.以下です)

大変初歩的すぎる質問かもしれないのですが、どうぞよろしくお願いいたします。

//kintoneアプリストアの『顧客リスト』を使用します。
(()=>{
'use strict';

//レコード一覧表示
kintone.events.on(['app.record.index.show'], event => {

//メニュー右側を取得
const sp =kintone.app.getHeaderMenuSpaceElement();

//ボタンを作る
const btn = document.createElement('button');
//ボタンに表示したいテキスト
btn.textContent='CSV出力ボタン';

//スペースフィールドにボタンを追加する
sp.appendChild(btn);

//ボタンをクリックしたときの動作
btn.onclick=()=>{
//CSVダウンロード
dlCsv();
};
return event;

});


// CSVファイル生成用
const HEADER =['顧客ランク','会社名','部署名','担当者名','郵便番号','TEL'];//CSVに出力したいフィールドのフィールドコード

// CSVをダウンロード
const dlCsv = async ()=>{
//フィールド名からCSVの文字列データを作る
const setHeaderData = () => {
let headerData = '';
HEADER.forEach(h => {
headerData += h + ',';
});
headerData += '\r';
return headerData;
};

//レコードからCSVの文字列データを作る
const recordToCsvData = records => {
let rowData = '';
records.forEach(r => {
HEADER.forEach(h => {
rowData += r[h].value + ',';
});
rowData += '\r';
});
return rowData;
};

//URLエンコード
const createDataUriFromString = str => {
// 文字列を配列に変換
const array = str.split('').map(s => s.charCodeAt());
// エンコード
const sjis_array = Encoding.convert(array, 'SJIS', 'UNICODE');
const uInt8List = new Uint8Array(sjis_array);
return uInt8List;
};

//2. CSVにしたいレコードを取得する
const param_get = {
app:kintone.app.getId(),
//すでに、済とフラグ(チェックボックス)が付いている場合、それを省く
query:'出力フラグ not in ("済")',
};
const obj_get = await kintone.api('/k/v1/records','GET',param_get);
const targetRecords = obj_get.records;

//3. レコード1件以上だったらCSV出力
if (targetRecords.length > 0) {

//4. CSVにするテキストデータを作成
const str = createDataUriFromString( setHeaderData() + recordToCsvData(targetRecords));

//5. CSVファイル作成
const blob = new Blob([str], {type:"text\/csv"});
const url = URL.createObjectURL(blob);

//6. ダウンロード処理
const a = document.createElement("a");
document.body.appendChild(a);
a.download = "test.csv";
a.href = url;
a.click();
a.remove();
URL.revokeObjectURL(url);

//7. csvでDLしたレコードを済に変える
function createPutRecords(records){
var appID = kintone.app.getID();
var putRecords =[];
for(var i = 0, j = records.length; i<j ; i++){
var record = records[i];
putRecords[i] = {
id: record.$id.value,
record:{
'出力フラグ':{
value:['済']
}
}
};
}
return putRecords;
}

const param_upd = {
'app':kintone.app.getId(),
'record':createPutRecords(records)
};
const obj_put = await kintone.api('/k/v1/records','PUT' , param_upd);
const updateRecords = obj_put.records;
console.log(updateRecords);
}
};
})();

T.Nさん

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

createPutRecords()の実行時の引数に指定しているrecordsが未定義なのが問題かと思います。
恐らくtargetRecordsを用いればよいかと思います。

あと、一括更新の場合はparam_updのプロパティはrecordではなくrecordsになるかと思います。
https://developer.cybozu.io/hc/ja/articles/201941784#step2

パット見なので、もしかすると他にもあるかもしれません。
動かない場合はブラウザのデベロッパーツールでデバッグすると良いと思います。
https://developer.cybozu.io/hc/ja/articles/207613916

江口様、ご回答いただきありがとうございます。

以下のように修正したところ、希望通りの挙動を示すようになりました。

おっしゃるとおり、引数としてtargetRecordsを利用し、

あとは、変数appIDのメソッドのスペルミスを直すことで動きました。

お忙しいところ、感謝いたします。どうもありがとうございました。

//7. csvでDLしたレコードを済に変える 修正版
function createPutRecords(targetRecords){ //修正① 引数変更
var appID = kintone.app.getId(); //修正② getIDを修正
var putRecords =[];
for(var i = 0, j = targetRecords.length; i<j ; i++){ //修正③ jの値変更
var record = targetRecords[i]; //修正④ 値の変更
putRecords[i] = {
id: record.$id.value,
record:{
'出力フラグ':{
value:['済']
}
}
};
}
return putRecords;
}

const param_upd = {
'app':kintone.app.getId(),
'records':createPutRecords(targetRecords) //修正⑤ recordsにプロパティ変更
};

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