一覧画面へいわゆる「いいね」ボタンを設置したいと考えております。
素人ながらいろいろな質問やサイトを参考にさせていただき、レコード詳細画面では下記コードにて設置できました。
スペースに表示した画像ボタンをクリックすると、数値フィールドの値に+１して画面を再読み込みするという処理です。
※複数回ボタンを連打できないように直前のURLが現在のURLと同じだった場合、上記処理の前にreturn eventするようにしてます。
そこで、一覧画面からも同じような処理ができるようにしたいのですが、
①レコード毎に画像を追加する方法(画像自体はすべて同じ画像)
②それぞれの画像にそのレコードの値を書き換えるonclickを設定する方法
がわからず困っております。
何かいい方法があればお教えいただけないでしょうか。
よろしくお願いいたします。
(function() {
"use strict";
kintone.events.on('app.record.detail.show', function(event) {
var imgurl = 'xxx.png';
var image = document.createElement('img');
image.src = imgurl;
image.onclick = function () {
var ref = document.referrer;
var url = location.href;
if(ref === "https://xxx.cybozu.com/k/" + kintone.app.getId() + "/show"){
return event;
}
else if(ref != url){
var appId = event.appId;
var recId = event.recordId;
var goodcount = parseInt(event.record.数値.value,10);
var params = {
"app": appId,
"id": recId,
"record": {
"数値": {
"value": parseInt(goodcount + 1,10)
}
}
};
kintone.api(
kintone.api.url('/k/v1/record', true),
'PUT',
params,
function(resp) {
},
function(resp) {
}
);
location.reload(true);
}
}
kintone.app.record.getSpaceElement('imgspace').appendChild(image);
return event;
});
})();
カスタマイズ初心者様
お世話になっております．
基本的には，ご提示いただいたコードの4行目から48行目をループ処理することになると思います．
一覧画面表示後イベントにおけるeventオブジェクトには，recordsプロパティというrecordの配列があります．
レコード毎に処理を行いたいので，このevent.recordsについてループ処理を行えば良いと思います．
配列のループにはArray.forEach()などを用いると良いです．
一覧画面表示後イベントにおけるeventオブジェクトには，19行目のrecordIdプロパティと20行目のrecordプロパティはないので，各レコードの値を参照するよう書き換える必要があるかと思います．
48行目について，一覧画面ではスペースフィールドを取得できないので，td要素など何らかのDOMを取得する必要があります．
Document.getElementsByClassName()またはDocument.getElementsByTagName()を用いることになるかと思います．
また，いいね!プラグインというものがオープンソースであるので，参考になるかもしれません．
江田様
お世話になっております。
いつもご教示いただきありがとうございます。毎度助かっております。
一覧画面でのカスタマイズを今までほとんどやったことが無く、苦戦しておりました。
イベント毎のeventオブジェクトをしっかり勉強したいと思います。
下記コードにて実装できました。ありがとうございました。
(function() {
"use strict";
kintone.events.on('app.record.index.show', function(event) {
var records = event.records;
console.log(records);
records.forEach(function(record, i){
var imgurl = 'xxx.png';
var image = document.createElement('img');
image.src = imgurl;
image.onclick = function () {
var appId = event.appId;
var recId = record.$id.value;
var goodcount = parseInt(record.数値.value,10);
var params = {
"app": appId,
"id": recId,
"record": {
"数値": {
"value": parseInt(goodcount + 1,10)
}
}
};
kintone.api(
kintone.api.url('/k/v1/record', true),
'PUT',
params,
function(resp) {
},
function(resp) {
}
);
location.reload(true);
}
var goodspace = document.getElementsByClassName('line-cell-gaia recordlist-ellipsis-gaia');
goodspace[i].appendChild(image);
});
return event;
});
})();