lodashを使って簡単カスタマイズビュー作成

kintone カスタマイズ
1

lodashとは汎用的な機能を集めたJavaScriptライブラリです。 Cybozu CDNにてサポートされているので手軽に利用できます。 今回はlodashのテンプレート機能を用いて、簡単にカスタマイズビューを作成する方法をご紹介します。

サンプル

lodashを用いて、こちらの記事のコードを書き換えます。

コード

HTML

<div id="my-customized-view">
  <table border="1">
    <thead>
      <tr>
        <th>レコード番号</th>
        <th>信号機</th>
        <th>作成日時</th>
      </tr>
    </thead>
    <tbody id="my-tbody"></tbody>
  </table>
</div>
<!-- ここから追加 -->
<script type="text/html" id="lodash_template">
  <tr>
    <td><a href="<%= url %>"><%=id%></a></td>
    <td><%=traffic_light%></td>
    <td><%=created%></td>
  </tr>
</script>

JavaScript

(function () {
  "use strict";
  kintone.events.on(["app.record.index.show"], function (event) {
    if (event.viewName !== "カスタマイズビュー") {
      return event;
    }
    var records = event.records;
    if (!records || !records.length) {
      document.getElementById("my-customized-view").innerHTML =
        "表示するレコードがありません";
      return event;
    }
    varrecUrl =
      location.protocol +
      "//" +
      location.hostname +
      "/k/" +
      kintone.app.getId() +
      "/show#record=";
    varmyRecordSpace = document.getElementById("my-tbody");
    myRecordSpace.innerHTML = ""; // ここから変更
    var template = _.template(
      document.getElementById("lodash_template").innerHTML
    );
    myRecordSpace.innerHTML = _.reduce(
      records,
      function (html, record) {
        returnhtml +
          template({
            url: recUrl + record.レコード番号.value,
            id: record.レコード番号.value,
            traffic_light: record.信号の色.value,
            created: newDate(record.作成日時.value).toLocaleString(),
          });
      },
      ""
    );
    return event;
  });
})();