【kintone】で宛名ラベルを作ってみる:メモ2
bibouroq.hatenablog.com
前回の続き。JavaScriptの方。
1か月後にはなぜこんな構造にしたのか忘れていそうなのでメモ。
- 導入部
- レコードを取得する関数
- 子ウィンドウを表示する関数
- ボタンを作る
- ボタンを表示する
- Handsontableのデータを用意1
- Handsontableのデータを用意2
- Handsontable作成
導入部
「一覧IDを入れる」に入れたIDの一覧でなければ動作させない。
表示したいフィールドのフィールドコードを配列で指定。
(function () { "use strict"; kintone.events.on("app.record.index.show", function (event) { if (event.viewId !== 一覧IDを入れる) return event; const fields = ['役職','氏名','会社名','郵便番号','住所1','住所2'];
レコードを取得する関数
kintoneの大量レコード取得を高速化 – cybozu developer network
ここはいろいろなやり方があり「kintone Utility Library for JavaScript」というライブラリを使うともっと簡素に書ける模様。
kintone.app.getQueryCondition()で現在の絞り込み条件で全レコード取得。
kintone.app.getQuery();を加工して現在の並び順を取得。
function fetch(opt_offset, opt_records) { var offset = opt_offset || 0; var records = opt_records || []; var appId = kintone.app.getId(); var query = kintone.app.getQueryCondition(); var query2 = kintone.app.getQuery(); var sort = query2.split(/by|limit/); var params = { app: appId, query: query + ' order by' + sort[1] + ' limit 500 offset ' + offset }; return kintone.api('/k/v1/records', 'GET', params).then(function(resp) { records = records.concat(resp.records); if (resp.records.length === 500) { return fetch(offset + 500, records); } return records; }); }
子ウィンドウを表示する関数
作成したdatalistを子ウィンドウに表示する。
TBはHTMLに書いた子ウィンドウのレイアウト。
paper.cssを使ってブラウザだけでExcelのデータを差し込み印刷する - Qiita
var TB = document.getElementById("TB").value; function show(datalist){ var obj = window.open(); obj.document.open(); obj.document.write(TB); obj.document.close(); // 12枚を超える場合はページを増やす var sheets = Math.ceil(datalist.length / 12); _.times(sheets - 1, function () { var clone = obj.document.getElementById('originSheet').cloneNode(true); obj.document.body.appendChild(clone); }); // underscore.js のテンプレート機能でテーブルのセルにデータを流し込む var compiled = _.template( '<div class="data"><p class="zipcode"><%= data.zipcode %></p>' + '<p class="address1"><%= data.address1 %></p>' + '<p class="address2"><%= data.address2 %></p>' + '<br>' + '<p class="client"><%= data.client %></p>' + '<p class="namae"><%= data.namae %> 様</p></div>'); var cells = obj.document.getElementsByTagName('td'); _.each(datalist, function (data, iii) { $(cells[iii]).html(compiled({ "data": data })); }); obj; }
ボタンを作る
fetch関数を実行してレコード取得。(myrecordsにデータが入る)
allprint関数→fetch関数で取得したデータを加工し、show関数に渡す。
fetch().then(function(myrecords) { var records = myrecords; function allprint(records) { var datalist = []; for (let i = 0; i < records.length; i++) { let listrow = { "namae": records[i][fields[0]].value +' '+ records[i][fields[1]].value, "client": records[i][fields[2]].value, "zipcode": records[i][fields[3]].value, "address1": records[i][fields[4]].value, "address2": records[i][fields[5]].value }; datalist.push(listrow); } show(datalist); } var button = document.createElement("button"); button.id = 'my_index_button'; button.textContent = "表示レコードを1ラベルずつ作成"; button.addEventListener("click", function() { allprint(records); });
ボタンを表示する
一覧画面上部の空白にボタンを表示させる。
ページネーションをオフにしているので何件表示しているかも表示させる。
var label = document.createElement('label'); label.appendChild(button); label.appendChild(document.createTextNode(" 表示件数:" + records.length + " 件")); if (document.getElementById('my_index_button') !== null) { kintone.app.getHeaderMenuSpaceElement().textContent = null; } kintone.app.getHeaderMenuSpaceElement().appendChild(label);
Handsontableのデータを用意1
columnsに表示したい列の情報を入れていく。
レコード番号をクリックするとレコード詳細画面に飛ぶようにする。
titleでフィールドコードの文字そのものを列名に指定している。
(列名を別途作りたい場合はdata外にcolHeaders:[]を作る。)
var container = document.getElementById('my-customized-view'); var columns = []; for(let i = 0;i < fields.length; i++){ columns[i] = {data: fields[i] + '.value', title: fields[i], editor: false}; } for(let i =0; i<records.length; i++) { let record = records[i]; record["リンク用HTML"] = '<a href="/k/' + kintone.app.getId() + '/show#record=' + record.$id.value + '">' + record.$id.value +'</a>'; } columns.unshift({data: "リンク用HTML", renderer: 'html', title:'レコード番号', editor: false});
Handsontableのデータを用意2
ボタンを表示する関数を作り、columnsの先頭に追加。
Handsontableは「renderer:関数名」で関数の引数にグリッドの情報(instance, td , row, col, prop, value, cellProp)が入るらしい。
rowは行番号、getSourceDataAtRowに行番号を指定して行データを取得。
function showbutton(instance, td , row, col, prop, value, cellProp){ let button = document.createElement("button"); button.textContent = "作成"; button.addEventListener("click", function() { var datalist = []; var record = cellProp.instance.getSourceDataAtRow(row); for(let i =0;i < 12; i++){ let listrow = { "namae": record[fields[0]].value +' '+ record[fields[1]].value, "client": record[fields[2]].value, "zipcode": record[fields[3]].value, "address1": record[fields[4]].value, "address2": record[fields[5]].value }; datalist.push(listrow); } show(datalist); }); td.innerHTML = ''; td.appendChild(button); } columns.unshift({data: "ボタン", renderer: showbutton, title: 'ラベル', editor: false});
Handsontable作成
表の仕様がここで色々設定できる。
Handsontable 使い方メモ2(グリッドのオプション) - Qiita
var hot = new Handsontable(container, { data: records, minSpareRows: 0, contextMenu: false, fillHandle: false, columns: columns }); }); }); })();