一覧画面でサブテーブルの内容表示(宛名ラベル)

[Legacy_Account1458 (kintone_TS44（Legacy Account）)]

下記のURLで、アプリに登録している会社の宛名ラベルを作成する事は出来たのですが、

(https://bibouroq.hatenablog.com/entry/2018/11/15/232126)

アプリ内のサブテーブルに従業員の項目を追加した場合に、どの様にサブテーブルの値を一覧に表示して、

宛名ラベルを作成すれば良いのでしょうか？

 

[Legacy_Account2229 (koichi（Legacy Account）)]

kintone_TS44さん

こんにちは。サブテーブル対応してみました。

一括取得したrecordsからテーブル行ごとにレコードを分割したsubRecordsを作って処理させました。

recordsからsubRecordsに置き換えた部分があるので、そこはコメントアウトしています。

大元のスクリプトでは、listrowの作成などでfield配列を使っていますが、下記スクリプトではフィールド名を直書きしています。

出力される宛名ラベル部分は、自由に変更ください。

(function() {

 'use strict';

 kintone.events.on("app.record.index.show", function(event) {

  if (event.viewId !== カスタマイズビューのID) {
   return event;
  }

  const fields = ['会社名', '都道府県', '住所1', '住所2', '役職', '所属', '名前'];

〜省略〜

  fetch().then(function(myrecords) {
   var records = myrecords;

   // recordsからテーブル行ごとにレコードを分割し、subRecordsに格納
   var subRecords = [];
   for (let i = 0; i < records.length; i++) {
    for (let j = 0; j < records[i].社員テーブル.value.length; j++) {
     subRecords.push({
      "$id": { "value": records[i].$id.value },
      "会社名": { "value": records[i].会社名.value },
      "都道府県": { "value": records[i].都道府県.value },
      "住所1": { "value": records[i].住所1.value },
      "住所2": { "value": records[i].住所2.value },
      "役職": { "value": records[i].社員テーブル.value[j].value.役職.value },
      "所属": { "value": records[i].社員テーブル.value[j].value.所属.value },
      "名前": { "value": records[i].社員テーブル.value[j].value.名前.value }
     });
    }
   }

   function allprint(records) {
    var datalist = [];
    for (let i = 0; i < records.length; i++) {
     let listrow = {
      "namae": subRecords[i].所属.value + ' ' + subRecords[i].役職.value + ' ' + subRecords[i].名前.value,
      "client": subRecords[i].会社名.value,
      "prefectures": subRecords[i].都道府県.value,
      "address1": subRecords[i].住所1.value,
      "address2": subRecords[i].住所2.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);
    allprint(subRecords);
   });

   var label = document.createElement('label');
   label.appendChild(button);
   // label.appendChild(document.createTextNode(" 表示件数："+ records.length + " 件"));
   label.appendChild(document.createTextNode(" 表示件数："+ subRecords.length + " 件"));
   if (document.getElementById('my_index_button') !== null) {
    kintone.app.getHeaderMenuSpaceElement().textContent = null;
   }
   kintone.app.getHeaderMenuSpaceElement().appendChild(label);

   // Handsontableで表と行ボタン作成
   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];
   for (let i = 0; i < subRecords.length; i++) {
    let record = subRecords[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});

   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.所属.value + ' ' + record.役職.value + ' ' + record.名前.value,
       "client": record.会社名.value,
       "prefectures": record.都道府県.value,
       "address1": record.住所1.value,
       "address2": record.住所2.value
      };
      datalist.push(listrow);
     }
     show(datalist);
    });
    td.innerHTML = '';
    td.appendChild(button);
   }
   columns.unshift({data: "ボタン", renderer: showbutton, title: 'ラベル', editor: false});

   var hot = new Handsontable(container, {
    // data: records,
    data: subRecords,
    minSpareRows: 0,
    contextMenu: false,
    fillHandle: false,
    columns: columns
   });
  });
 });

})();

[Legacy_Account1458 (kintone_TS44（Legacy Account）)]

koichiさんご回答ありがとうございます。
教えて頂いた、コードで試してみたのですが上手く表示する事が出来ません。

下記のコードで、修正箇所があればご教示願います。

 

(function() {
 'use strict';
  kintone.events.on("app.record.index.show", function(event) {
if (event.viewId !== 一覧ID){
return event;
}

const fields = ['会社名','支店・支社名','郵便番号','都道府県','住所1','住所2','役職','所属','氏名'];
//会社名：client：0
//支店・支社名：client2：1
//郵便番号：zipcode：2
//都道府県：prefectures：3
//住所1：address1：4
//住所2：address2：5
//役職：namae：6
//所属：namae：7
//氏名：namae：8

   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;
    });
   }

   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>' + '<br>' +
'<p class="address2"><%= data.address2 %></p>' + '<br>' +
'<p class="client1"><%= data.client1 %></p>' + '<br>' +
'<p class="client2"><%= data.client2 %></p>' + '<br>' +
'<p class="namae"><%= data.namae %></p></div>');
    var cells = obj.document.getElementsByTagName('td');
    _.each(datalist, function (value, key) {
     cells[key].innerHTML = compiled({"data": value});
    });
    obj;
   }

fetch().then(function(myrecords) {
   var records = myrecords;

   // recordsからテーブル行ごとにレコードを分割し、subRecordsに格納
   var subRecords = [];
   for (let i = 0; i < records.length; i++) {
    for (let j = 0; j < records[i].worker.value.length; j++) {
     subRecords.push({
      "$id": { "value": records[i].$id.value },
      "会社名": { "value": records[i][fields[0]].value },
      "支店・支社名": { "value": records[i][fields[1]].value },
      "郵便番号": { "value": records[i][fields[2]].value },
      "都道府県": { "value": records[i][fields[3]].value },
      "住所1": { "value": records[i][fields[4]].value },
      "住所2": { "value": records[i][fields[5]].value },
      "役職": { "value": records[i].worker.value[j].value.fields[6].value },
      "所属": { "value": records[i].worker.value[j].value.fields[7].value },
      "名前": { "value": records[i].worker.value[j].value.fields[8].value }
     });
    }
   }

   function allprint(records) {
    var datalist = [];
    for (let i = 0; i < records.length; i++) {
     let listrow = {
      "namae": subRecords[i][fields[7]].value + ' ' + subRecords[i][fields[6]].value + ' ' + subRecords[i][fields[8]].value,
  "client1": subRecords[i][fields[0]].value,
"client2": subRecords[i][fields[1]].value,
       "zipcode": subRecords[i][fields[2]].value,
        "address1": subRecords[i][fields[3]].value +''+ subRecords[i][fields[4]].value,
        "address2": subRecords[i][fields[5]]
     };
     datalist.push(listrow);
    }
    show(datalist);
   }

   var button = document.createElement("button");
   button.id = 'my_index_button';
   button.textContent = "表示レコードを1ラベルずつ作成";
   button.addEventListener("click", function() {
    // allprint(records);
    allprint(subRecords);
   });

   var label = document.createElement('label');
   label.appendChild(button);
   // label.appendChild(document.createTextNode(" 表示件数："+ records.length + " 件"));
   label.appendChild(document.createTextNode(" 表示件数："+ subRecords.length + " 件"));
   if (document.getElementById('my_index_button') !== null) {
    kintone.app.getHeaderMenuSpaceElement().textContent = null;
   }
   kintone.app.getHeaderMenuSpaceElement().appendChild(label);

   // Handsontableで表と行ボタン作成
   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];
   for (let i = 0; i < subRecords.length; i++) {
    let record = subRecords[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});

   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": records[i][fields[7]].value + ' ' + records[i][fields[6]].value + ' ' + records[i][fields[8]].value,
"client1": records[i][fields[0]].value,
  "client2": records[i][fields[1]].value,
"zipcode": records[i][fields[2]].value,
"address1": records[i][fields[3]].value +''+ records[i][fields[4]].value,
"address2": records[i][fields[5]]
      };
      datalist.push(listrow);
     }
     show(datalist);
    });
    td.innerHTML = '';
    td.appendChild(button);
   }
   columns.unshift({data: "ボタン", renderer: showbutton, title: 'ラベル', editor: false});

   var hot = new Handsontable(container, {
    // data: records,
    data: subRecords,
    minSpareRows: 0,
    contextMenu: false,
    fillHandle: false,
    columns: columns
   });
  });
});
})();

[Legacy_Account2229 (koichi（Legacy Account）)]

kintone_TS44さん

修正箇所です。

 

※fieldsの各要素が、アプリのフィールドコードと一致している必要があります。

const fields = ['会社名','支店・支社名','郵便番号','都道府県','住所1','住所2','役職','所属','氏名'];

中略

 

※「名前」と「氏名」が混在しているため、フィールドコードに合わせてください。

※役職、所属、氏名のvalueの記述を変更しました。他フィールドと同様に [fields[数字]] の形式にしました。

fetch().then(function(myrecords) {
 var records = myrecords;

 // recordsからテーブル行ごとにレコードを分割
 var subRecords = [];
 for (let i = 0; i < records.length; i++) {
  // for (let j = 0; j < records[i].社員テーブル.value.length; j++) {
  for (let j = 0; j < records[i].worker.value.length; j++) {
   subRecords.push({ 
    "$id": { "value": records[i].$id.value },
    "会社名": { "value": records[i][fields[0]].value },
    "支店・支社名": { "value": records[i][fields[1]].value },
    "郵便番号": { "value": records[i][fields[2]].value },
    "都道府県": { "value": records[i][fields[3]].value },
    "住所1": { "value": records[i][fields[4]].value },
    "住所2": { "value": records[i][fields[5]].value },
    "役職": { "value": records[i].worker.value[j].value[fields[6]].value },
    "所属": { "value": records[i].worker.value[j].value[fields[7]].value },
    "氏名": { "value": records[i].worker.value[j].value[fields[8]].value }
   });
  }
 }

中略

 

※records[i]の代わりにrecordにしました。

 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[7]].value + ' ' + record[fields[6]].value + ' ' + record[fields[8]].value,
     "client1": record[fields[0]].value,
     "client2": record[fields[1]].value,
     "zipcode": record[fields[2]].value,
     "address1": record[fields[3]].value +''+ record[fields[4]].value,
     "address2": record[fields[5]].value
    };
    datalist.push(listrow);
   }
   show(datalist);
  });
  td.innerHTML = '';
  td.appendChild(button);
 }