一覧画面の各レコードの左側にチェックボックスを表示させ、
ボタン押下で選択されているデータを取得し、他アプリにまとめて入れたいと考えています。
日頃の取引を入れているアプリから、選択した取引分の請求書を作成するイメージです。あくまで例ですが・・・
ボタンの表示や、データが取得できれば請求書はできるのですが、
チェックボックスの表示やデータの取得の部分がわかりません。
サンプルコードなどがあると助かります。
よろしくお願いいたします。
yamasakiさん
まず、kintoneのチェックボックスフィールド等とkintone_app_getFieldElementsを用いた方法（ステータスが受注のレコードをボタン押下で抽出、別アプリ登録ができたら、ステータスを請求済にするとかですね）が運用にマッチせず、その場でレコードをピックアップして登録したいというシナリオだという前提かと思います・・・。
オリジナルの一覧画面を活用することもできると思いますが、DOM操作等を要することを考えると、「はじめよう kintone JavaScript API」の第7回にチェックボックス部分を足して、第2回にあるボタン処理を入れる方法が考えられそうですので、書いてみたいと思います。
カスタマイズビューのHTMLは、第7回分に「チェック」ヘッダを足しています。
<div id="my-customized-view">
<table border="1">
<thead>
<tr>
<th>チェック</th>
<th>レコード番号</th>
<th>信号機</th>
<th>作成日時</th>
</tr>
</thead>
<tbody id="my-tbody">
</tbody>
</table>
</div>
JavaScriptは、第7回分をベースに先ほどのHTMLと同じく「チェックボックス」の分の列を追加し、第2回のボタン設置と操作部分を記載しています。
event.records を利用するために、チェックボックス要素のidはevent.recordsのインデックスを紐つけています。サンプルではチェックされたレコードを当該アプリに登録するようにしていますので、この辺は適宜置き換えて頂ければと思います。また、event.recordsを利用したこの方法では一度に処理（選択）できるレコードは一覧表示の最大件数である100件になります。
(function () {
"use strict";
kintone.events.on('app.record.index.show', function (event){
if (event.viewName != 'カスタマイズビュー') {
return;
}
var records = event.records;
if (!records || !records.length) {
document.getElementById('my-customized-view').innerHTML = '表示するレコードがありません';
return;
}
var recUrl = location.protocol + '//' + location.hostname + '/k/' + kintone.app.getId() + '/show#record=';
var myRecordSpace = document.getElementById('my-tbody');
myRecordSpace.innerHTML = '';
for (var i = 0; i < records.length; i++) {
var record = records[i];
var row = myRecordSpace.insertRow(myRecordSpace.rows.length);
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(2);
var cell3 = row.insertCell(3);
var tmpI = document.createElement('input');
tmpI.type = 'checkbox';
tmpI.name = 'checked-records';
tmpI.id = 'checked-index-' + i;
cell0.appendChild(tmpI);
var tmpA = document.createElement('a');
tmpA.href = recUrl + record.レコード番号.value;
tmpA.innerHTML = record.レコード番号.value;
cell1.appendChild(tmpA);
cell2.innerHTML = record.信号の色.value;
var createdAt = new Date(record.作成日時.value);
cell3.innerHTML = createdAt.toLocaleString();
}
if (document.getElementById ('my_index_button') != null) {
return;
}
var myIndexButton = document.createElement('button');
myIndexButton.id = 'my_index_button';
myIndexButton.innerHTML = 'チェック済みレコード登録';
// ボタンクリック時の処理
myIndexButton.onclick = function() {
var post_records = [];
var recordIndexes = document.getElementsByName('checked-records');
for(var i=0; i<recordIndexes.length; i++){
if(recordIndexes[i].checked){
var checked_index = recordIndexes[i].id.split('-')[2];
console.log(records[checked_index]['$id']['value']);
var tmp_record = {
'信号の色':{
'value': records[checked_index]['信号の色']['value']
}
};
post_records.push(tmp_record);
}
}
if(post_records.length==0){
alert('チェックされたレコードはありません。');
return;
}
kintone.api(kintone.api.url('/k/v1/records', true), 'POST', {'app': kintone.app.getId(), 'records': post_records}, function(resp) {
alert('レコードを登録しました。');
location.reload(true);
}, function(resp) {
// エラーの場合はメッセージを表示する
var errmsg = 'レコード登録時にエラーが発生しました。';
// レスポンスにエラーメッセージが含まれる場合はメッセージを表示する
if (resp.message !== undefined){
errmsg += resp.message;
}
alert(errmsg);
});
}
kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
});
})();
Yamashitaさま
ありがとうございます。
カスタマイズビューを使用しないことは可能でしょうか？
通常の一覧画面の table には、現時点で recordlist-gaia というクラス名が与えてありますので、ここからテーブルのDOMを取得し、前例の cell0 と同じ要領でtdタグの追加、thタグをthead配下に追加してあげると良いと思います。
DOM操作を行う時には例えばこちらの回答中で紹介されている方法でカスタマイズを加えたいDOMの情報を取得します。
Yamashitaさま
ありがとうございました。
なんとか思い通りに作成する事ができました。
yamasakiさん、作成できたようで何よりです。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。