新規投稿
フォローする

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

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

    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 = '';

    // ここから変更
    var template = _.template(document.getElementById("lodash_template").innerHTML);
    myRecordSpace.innerHTML = _.reduce(records, function(html, record){
      return html + template({
        "url": recUrl + record.レコード番号.value,
        "id": record.レコード番号.value,
        "traffic_light": record.信号の色.value,
        "created": new Date(record.作成日時.value).toLocaleString()
      });
    }, '');
  });
})();
1

0件のコメント

ログインしてコメントを残してください。