備忘ですが、

誰かの役に立てばいい

【kintone】で宛名ラベルを作ってみる:メモ2

bibouroq.hatenablog.com
前回の続き。JavaScriptの方。
1か月後にはなぜこんな構造にしたのか忘れていそうなのでメモ。

導入部

「一覧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
    });
   });
  });
})();