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() }); }, ''); }); })();
0件のコメント