レコード一覧画面に、すべてのレコードを更新するボタンを作りたいです

kintone カスタマイズ
21

wenxit1218様

お世話になります。ご丁寧にご説明いただいて、どうもありがとうございます。

やっと意味が理解できました!! コメントアウトで書いていただいているのに理解が及ばず失礼致しました。

コード修正したところ、以下のひとつめのreturnのところにエラーが出ていて、またボタンが表示されなくなってしまいました。
//関連レコードのフィールドコードの変数を代入
return (new RelatedRecordsFieldManager(relatedRecordsCode)).getRecords(selfRecord).then(function(relatedRecords){
return {

また、冒頭5行目にもエラーが出ていますが、こちらは無視してもよいのでしょうか。

よろしくお願い致します。

mm

 

22

mm 様

お世話になります。
いえいえ、言葉不足で失礼いたしました。疑問が解消されてよかったです！

>以下のひとつめのreturnのところにエラーが出ていて

52~53行の部分が47~48行と重複しているようですが、おそらくそちらが原因です。
52~53行を削除した上で再度試して頂いてもよろしいでしょうか？

Promise.all([
getRecords(kintone.app.getId()),

また、最後の部分に});を追加していただいて、数的には問題ないと思いますが、
おそらくreturn event;の行数が一行ずれている気がします（77行→78行）

          });
        });
      });
    });
    return event;
  });
})();

コーディングする際は，インデント（字下げ）を整理することでミスを発見しやすくなるので、
こちらの記事で使いやすいテキストエディタが紹介されているので、ぜひ確認してみてください。

>冒頭5行目にもエラーが出ていますが、

5行目で定義されているtmpRecordsの変数名が、
すでに3行目で使われている引数名と同じになっているのが原因だと思います。

こちらの記事の「レコードを取得する関数」のサンプルコードのように、
変数と引数を異なる名前で定義したほうが良いかと思います。

23

wenxit1218 様

お世話になります。

エラーの修正ありがとうございます。エディタはATOMを使用していますが、インデントのやり方や文字の色を変える方法がわからなくて、あまり使いこなせていません。。

5行目で定義されているtmpRecordsの変数名が、
すでに3行目で使われている引数名と同じになっているのが原因だと思います。

こちらにつきまして、

https://developer.cybozu.io/hc/ja/community/posts/360017977863 このコードをそのまま使用していて、

tmprecordsの変数名を何にすればよいのかわからなく修正が出来ないのですが、どうしたら良いでしょうか。

 

今は、一括更新を押すと「更新しました」というメッセージボックスが5回表示されます。

そして、データの更新はされません。

ためしに、作成したコードをすべて削除して手動で1つのレコードを保存し直したところ、値は更新されたので

今回作ったコードのどこかにミスがあると思います。

コンソールを見てみたところ、failed to get content script となっていました。修正する箇所がありましたら教えていただけますでしょうか。

よろしくお願い致します。

ｍｍ

24

mm 様

お世話になります。

>エディタはATOMを使用していますが、

インデントのチェックなどは、JavaScriptの構文チェックツールESLintがおすすめです。
記事に使い方の紹介もあるのでぜひ読んでみてください。

>tmprecordsの変数名を何にすればよいのか

こちらの記事の「レコードを取得する関数」のサンプルコードのように「_tmprecords」などで問題ないと思います。

vargetRecords = function(app, **\_tmpRecords** ) {
varlimit = 500;
vartmpRecords = **\_tmpRecords** || [];

>今は、一括更新を押すと「更新しました」というメッセージボックスが5回表示されます。

現状の処理では、5つの関連レコードのデータをそれぞれ取得して、
集計フィールドの値を更新する処理を5回行うことになっています。
更新自体はできますが、5つの関連レコードの関連先アプリとレコードが同じものであれば、
一度に更新できるようにリクエストボディを編集した方が良いかもしれません。

ややこしくなってしまい申し訳ありませんが、こちらのコードをもとに、

・relatedRecordsFieldCodeArray の定義をして頂き（「商品数小計」と「計算」のフィールドコードは前回設定して頂いたまま）

// ５つの関連レコードのフィールドコードが入る配列
varrelatedRecordsFieldCodeArray = ['関連レコード一覧1',....]

・更新するリクエストボディの中身に、5つの「商品数小計」のデータが入るように編集

※やり方の一例ですが、reduce.()を使って、関連レコードの配列から、
全部の「商品数小計」データが入るオブジェクトを作成することができます。
reduceの使い方は、こちらが参考になると思います：
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

return Promise.all(responses[0].map(function(selfRecord) {
return (new RelatedRecordsFieldManager(relatedRecordsFieldCodeArray[0])).getRecords(selfRecord).then(function(relatedRecords) {
return {
id:selfRecord.レコード番号.value,
record:
relatedRecordsFieldCodeArray.reduce(function(acc, elem) {
var subtotal = elem + '商品数小計';
var quantity = elem + '数量';
acc[subtotal] = {
value: relatedRecords.reduce(function(sum, relatedRecord) {
return sum + Number(relatedRecord[quantity].value);
}, 0)
};
return acc;
}, {})
};
});
}));
}).then(function(records) {

上記二点をしていただけると、一度の更新処理で5つの集計フィールドが更新されると思います。
お手数ですが、再度試して頂いてもよろしいでしょうか。

25

wenxit1218様

 

お世話になります。

ESLintのご紹介ありがとうございました。事前準備のインストールは出来ました。

ESLintと@cybozu/eslint-configをインストールは、PowerShellでの作業でしょうか？

_tmprecordsの変数名ありがとうございます。修正致しました。

コードの修正もありがとうございました。頂いた内容で修正してみたのですが、またエラーが表示されてボタンが見えなくなってしまいました。スクリーンショットでエラーの箇所を貼りました。

以前作っていた部分は消さなくても良いのでしょうか？ 以下が現状のコードになりますので、ご確認いただけますでしょうか。

 

(function() {
“use strict”;
var getRecords = function(app, _tmpRecords){
var limit = 500;
var tmpRecords = _tmpRecords || [];
return kintone.api(kintone.api.url(‘/k/v1/records’, true), ‘GET’, {
app: app,
query: ‘limit ’ + limit +’ offset ’ + tmpRecords.length
}).then(function(response){
tmpRecords = tmpRecords.concat(response.records);
return response.records.length === limit ? getRecords(app, tmpRecords) : tmpRecords;
});
}
var putRecords = function(app, records){
var limit = 100;
return Promise.all(
records.reduce(function(recordsBlocks, record){
if(recordsBlocks[recordsBlocks.length - 1].length === limit){
recordsBlocks.push([record]);
}else{
recordsBlocks[recordsBlocks.length - 1].push(record);
}
return recordsBlocks;
}, [[]]).map(function(recordsBlock){
return kintone.api(kintone.api.url(‘/k/v1/records’, true), ‘PUT’, {
app: app,
records: recordsBlock
});
})
);
}
kintone.events.on(‘app.record.index.show’, function(event){
if(document.getElementById(‘updateButton’) !== null) return;
var button = document.createElement(‘button’);
button.innerHTML = ‘一括更新’;
button.id = ‘updateButton’;
kintone.app.getHeaderMenuSpaceElement().appendChild(button);
button.addEventListener(‘click’, function(){

// ５つの関連レコードのフィールドコードが入る配列
var relatedRecordsFieldCodeArray = [‘関連レコード一覧’,‘関連レコード一覧_2’,‘関連レコード一覧_3’,‘関連レコード一覧_4’,‘関連レコード一覧_5’]
// 関連レコードの個数分の集計を行う処理追加
relatedRecordsFieldCodeArray.map(function(relatedRecordsCode){
// 「申請済商品数小計」のフィールドコードを下記ように定義
var subtotal = relatedRecordsCode + “数値”;
var quantity = relatedRecordsCode + “数量”;
Promise.all([
getRecords(kintone.app.getId()),
RelatedRecordsFieldManager.prototype.getFieldProperties()
]).then(function(responses){
return Promise.all(responses[0].map(function(selfRecord) {

//関連レコードのフィールドコードの変数を代入

return (new RelatedRecordsFieldManager(relatedRecordsCode)).getRecords(selfRecord).then(function(relatedRecords){
return {
id: selfRecord.レコード番号.value,
record: {
relatedRecordsCodeArray.reduce(function(acc, elem) {
var subtotal = elem + ‘数値’;
var quantity = elem + ‘数量’;
acc[subtotal] = {
value: relatedRecords.reduce(function(sum, relatedRecord) {
return sum + Number(relatedRecord[quantity].value);
}, 0)
};
return acc;
}, {})
}};
});
}));
}).then(function(records) {

//「申請済商品数小計」のフィールドコードの変数を代入
[subtotal]: {
value: relatedRecords.reduce(function(sum, relatedRecord){
return sum + Number(relatedRecord.数量.value);
}, 0)
}
}
};
});
}));
}).then(function(records){
putRecords(kintone.app.getId(), records).then(function(){
alert(‘更新しました。’);
location.reload();
});
});
return event;
});
});
});
})();

 

よろしくお願い致します。

mm

26

mm 様

お世話になります。

>ESLintと@cybozu/eslint-configをインストールは、PowerShellでの作業でしょうか？
はい、ご認識の通りです。

>以前作っていた部分は消さなくても良いのでしょうか？

言葉不足ですみません。
やり方を変更しているため、以前の処理は不要です。
お手数ですが、今までのコードを修正するのではなく、
こちらの元のコードをもとに、下記を編集をしていただいたほうが分かりやすいと思います。

・_tmprecordsの変数名の編集
・relatedRecordsFieldCodeArray の定義（「商品数小計」と「計算」のフィールドコードは前回設定して頂いたまま）
・更新するリクエストボディの中身に、5つの「商品数小計」のデータが入るように編集
https://developer.cybozu.io/hc/ja/community/posts/900001438823/comments/900000841223

ご参考になれたら幸いです。

27

wenxit1218様

お世話になります。

ご返信ありがとうございます。

更新するリクエストボディとはどの箇所でしょうか？

// 関連レコードの個数分の集計を行う処理追加relatedRecordsFieldCodeArray.map(function(relatedRecordsCode){
// 「申請済商品数小計」のフィールドコードを下記ように定義
var subtotal = relatedRecordsCode + “数値”;
var quantity = relatedRecordsCode + “数量”;
Promise.all([
getRecords(kintone.app.getId()),
RelatedRecordsFieldManager.prototype.getFieldProperties()
]).then(function(responses){
return Promise.all(responses[0].map(function(selfRecord) {
の部分を全部削除すればよいでしょうか。

また、_tmprecordsの変数名は修正したのですが、上記コードで、まだ他に修正するところがありますか？

mm

28

mm 様

お世話になります。

不要な処理は書いて頂いた部分の全部ではなく、
「relatedRecordsFieldCodeArray.map(function(relatedRecordsCode){」の一部です。
細かい修正になるため、お手数ですが元のコードから修正したほうがやりやすいかと思います。

変更箇所は、
こちらの元のコードに_tmprecordsの変数名の修正とrelatedRecordsFieldCodeArray の定義を追加し、

return Promise.all(responses[0].map(function(selfRecord) {
.....
}).then(function(records) {

上記部分に下記内容を反映すれば更新処理ができると思います。
自分の環境で更新されることは確認できました。ご参考になれたら幸いです。

return Promise.all(responses[0].map(function(selfRecord) {
  return (new RelatedRecordsFieldManager(relatedRecordsFieldCodeArray[0])).getRecords(selfRecord).then(function(relatedRecords) {
    return {
      id:selfRecord.レコード番号.value,
      record:
        relatedRecordsFieldCodeArray.reduce(function(acc, elem) {
          var subtotal = elem + '商品数小計';
          var quantity = elem + '数量';
          acc[subtotal] = {
            value: relatedRecords.reduce(function(sum, relatedRecord) {
              return sum + Number(relatedRecord[quantity].value);
            }, 0)
          };
          return acc;
        }, {})
      };
    });
  }));
}).then(function(records) {
29

wenxit1218様お世話になっております。ご返信ありがとうございます。コードは新規で作り直してみることにしました。質問なのですが、

return Promise.all(responses[0].map(function(selfRecord) { ..... }).then(function(records) {

上記部分に下記内容を反映すれば更新処理ができると思います。

の箇所で、もともと.....の箇所にあった下記のコードは消してしまって問題ないのでしょうか？

//関連レコードのフィールドコードの変数を代入
return (new RelatedRecordsFieldManager(relatedRecordsCode)).getRecords(selfRecord).then(function(relatedRecords){
return {
id: selfRecord.レコード番号.value,
record: {
//「申請済商品数小計」のフィールドコードの変数を代入
[subtotal]: {
value: relatedRecords.reduce(function(sum, relatedRecord){
return sum + Number(relatedRecord.数量.value);
}, 0)
}
}
};
});
}));

ためしに、消した状態↓にしてみたところ、下から2行目でsyntax errorが表示され、また更新ボタンが表示されなくなってしまいました。

(function() {
“use strict”;
var getRecords = function(app, _tmpRecords){
var limit = 500;
var tmpRecords = _tmpRecords || [];
return kintone.api(kintone.api.url(‘/k/v1/records’, true), ‘GET’, {
app: app,
query: ‘limit ’ + limit +’ offset ’ + tmpRecords.length
}).then(function(response){
tmpRecords = tmpRecords.concat(response.records);
return response.records.length === limit ? getRecords(app, tmpRecords) : tmpRecords;
});
}
var putRecords = function(app, records){
var limit = 100;
return Promise.all(
records.reduce(function(recordsBlocks, record){
if(recordsBlocks[recordsBlocks.length - 1].length === limit){
recordsBlocks.push([record]);
}else{
recordsBlocks[recordsBlocks.length - 1].push(record);
}
return recordsBlocks;
}, [[]]).map(function(recordsBlock){
return kintone.api(kintone.api.url(‘/k/v1/records’, true), ‘PUT’, {
app: app,
records: recordsBlock
});
})
);
}
kintone.events.on(‘app.record.index.show’, function(event){
if(document.getElementById(‘updateButton’) !== null) return;
var button = document.createElement(‘button’);
button.innerHTML = ‘一括更新’;
button.id = ‘updateButton’;
kintone.app.getHeaderMenuSpaceElement().appendChild(button);
button.addEventListener(‘click’, function(){

// ５つの関連レコードのフィールドコードが入る配列
var relatedRecordsFieldCodeArray = [‘関連レコード一覧’,‘関連レコード一覧_2’,‘関連レコード一覧_3’,‘関連レコード一覧_4’,‘関連レコード一覧_5’]

return Promise.all(responses[0].map(function(selfRecord) {
return (new RelatedRecordsFieldManager(relatedRecordsFieldCodeArray[0])).getRecords(selfRecord).then(function(relatedRecords) {
return {
id:selfRecord.レコード番号.value,
record:
relatedRecordsFieldCodeArray.reduce(function(acc, elem) {
var subtotal = elem + ‘数値’;
var quantity = elem + ‘数量’;
acc[subtotal] = {
value: relatedRecords.reduce(function(sum, relatedRecord) {
return sum + Number(relatedRecord[quantity].value);
}, 0)
};
return acc;
}, {})
};
});
}));

}).then(function(records){
putRecords(kintone.app.getId(), records).then(function(){
alert(‘更新しました。’);
location.reload();
});
});
});
return event;
});
})();

 

もし間違っていれば教えていただけますでしょうか。

よろしくお願い致します。

mm

30

mm 様

お世話になります。

>消した状態↓にしてみたところ、下から2行目でsyntax errorが表示され

…の箇所にあったコードは消して頂いて問題ございません。
syntax errorはプログラムの書き方が間違っている時によく出るエラーなので、
今回の場合は、下記の行の前にあった一部のコードが漏れているのが原因かと思います。

return Promise.all(responses[0].map(function(selfRecord) {

上記行の前に、下記部分を追加していただければエラーは解消されると思います。

Promise.all([
getRecords(kintone.app.getId()),
RelatedRecordsFieldManager.prototype.getFieldProperties()
]).then(function(responses) {
31

wenxit1218様

ご返信ありがとうございます。

Promise.allをreturn Promise.allに変更するのだと勘違いして消してしまっていました。

失礼致しました。

追加してみたところ、ボタンは表示され、関連レコードがない状態だと「更新しました」と動くのですが、

いざ関連レコード先に新規でレコードを登録すると、コードの以下の場所に「undefined」のエラーが出てしまい、更新されません。

 

51行目 relatedRecordsFieldCodeArray.reduce(function(acc, elem) {

55行目 value: relatedRecords.reduce(function(sum, relatedRecord) {

56行目 return sum + Number(relatedRecord[quantity].value);

quantityは関連レコード先の数量のフィールドコードを入れてあって、間違いないはずなのですが、何が問題なのでしょうか。

ご教授頂けますでしょうか。よろしくお願い致します。

mm

32

mm 様

お世話になります。

＞コードの以下の場所に「undefined」のエラーが出てしまい、更新されません。

関連レコード先の数量のフィールドコードが、
「quantity」で指定するフィールドコードと一致しない場合で試しましたが、同じエラーを再現できました。

関連レコード先の数量のフィールドに、
フィールドコードが「quantity」の指定と異なるものがあるのが原因の気がしますが、
念のため、関連レコード先の数量のフィールドのフィールドコードが下記のようになっているかを、ご確認頂いても良いでしょうか？

関連レコード一覧数量、関連レコード一覧_2数量、関連レコード一覧_3数量、関連レコード一覧_4数量、関連レコード一覧_5数量

33

wenxit1218様

お世話になります。

確認が遅くなってしまい申し訳有りません。

関連レコード先の数量のフィールドのフィールドコードを正しく修正しました。

すると、「申請済商品数小計」に数字は入るのですが、他の商品分の数量も同時に読み込んでしまい、在庫数の計算が合わなくなってしまいました。

下の図の、「申請済商品数小計」には、「直近の申請」の一覧に商品名と数量が表示されているものだけにしたいです。

以前はそのように動作していました。

 

だいぶ時間が経ってしまいましたが、修正方法がわかれば教えて頂けますでしょうか。

よろしくお願い致します。

 

mm

34

sio様

お世話になります。

上記が修正できればアプリが完成するので、ご確認いただけますでしょうか。

お手数おかけしますが、よろしくお願い致します。

mm

35

お世話になっております。
コメントに気づかず返信が遅れて失礼いたしました。

今までのコードは５つの「申請済商品数小計」の集計をする仕組みでしたが、
「直近の申請」の関連レコード一覧以外の集計は不要になったということでしたら、
「申請済商品数小計」が「直近の申請」の関連レコード一覧にある商品の「数量」の集計という理解で問題がなければ、
今までのコードではなく、前に提示していただいたこちらの投稿のコードと同じ仕組みになると思います。
https://developer.cybozu.io/hc/ja/community/posts/360017977863/comments/360004431671

上記投稿のコードの下記部分のフィールドコードを変更すれば、数値の集計ができると思います。

return (new RelatedRecordsFieldManager('関連レコードのフィールドコード')).getRecords(selfRecord).then(function(relatedRecords){ return { id: selfRecord.レコード番号.value, record: { 申請済商品数小計のフィールドコード: { value: relatedRecords.reduce(function(sum, relatedRecord){ return sum + Number(relatedRecord.商品数量のフィールドコード.value); }, 0) } } }; });}));