新規投稿
フォローする

一覧画面へのボタン追加について

一覧画面へいわゆる「いいね」ボタンを設置したいと考えております。

 

素人ながらいろいろな質問やサイトを参考にさせていただき、レコード詳細画面では下記コードにて設置できました。

スペースに表示した画像ボタンをクリックすると、数値フィールドの値に+1して画面を再読み込みするという処理です。

※複数回ボタンを連打できないように直前の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;
});
})();

 

0

2件のコメント

Avatar
江田篤史

カスタマイズ初心者様

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

基本的には,ご提示いただいたコードの4行目から48行目をループ処理することになると思います.
一覧画面表示後イベントにおけるeventオブジェクトには,recordsプロパティというrecordの配列があります.
レコード毎に処理を行いたいので,このevent.recordsについてループ処理を行えば良いと思います.
配列のループにはArray.forEach()などを用いると良いです.

一覧画面表示後イベントにおけるeventオブジェクトには,19行目のrecordIdプロパティと20行目のrecordプロパティはないので,各レコードの値を参照するよう書き換える必要があるかと思います.

48行目について,一覧画面ではスペースフィールドを取得できないので,td要素など何らかのDOMを取得する必要があります.
Document.getElementsByClassName()またはDocument.getElementsByTagName()を用いることになるかと思います.

 

また,いいね!プラグインというものがオープンソースであるので,参考になるかもしれません.

1
Avatar
カスタマイズ初心者

江田様

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

いつもご教示いただきありがとうございます。毎度助かっております。

一覧画面でのカスタマイズを今までほとんどやったことが無く、苦戦しておりました。

イベント毎の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;
});
})();
1
サインインしてコメントを残してください。