サンプル(JavaScript)の利用方法について
ファイル
cstap_lib_show_more_records.js
ソースコード
<br /></p><p>// レコード一覧画面のカラム(フィールドコード)<br />var columns = ["レコード番号", "作成日時", "作成者", "チェックボックス", "添付ファイル", "Table"];</p><p>// レコード番号のフィールドコード<br />var recordCode = "レコード番号";</p><p>(function() {<br /> "use strict";</p><p> // 一覧ページ<br /> kintone.events.on('app.record.index.show', function(event) {</p><p> // ボタンのイベントリスナー追加<br /> document.getElementById("button_more").onclick = showMoreEvent;</p><p> // フォームの定義取得<br /> var appId = kintone.app.getId();<br /> kintone.api('/k/v1/form', 'GET', {<br />app: appId<br /> }, function(resp) {</p><p>// tableHeadColumns作成<br />var formColumns = {};<br />var props = resp.properties;<br />for (var i = 0, len = props.length; i < len; i++) {<br /> var prop = props[i];<br /> formColumns[prop.code] = prop.label;<br />}<br />var tableHeadColumns = [].concat(columns);<br />for (var j = 0, len1 = tableHeadColumns.length; j < len1; ++j) {<br /> var col = tableHeadColumns[j];<br /> if (typeof formColumns[col] !== 'undefined') {<br /> tableHeadColumns[j] = formColumns[col];<br /> }<br />}</p><p>// テーブルのヘッダ部分作成<br />makeTableHead(tableHeadColumns);<br />// テーブルのレコードクリア<br />destroyTableRecords();<br />// 最初のデータを表示する<br />showMoreEvent();</p><p> });</p><p> });<br />})();</p><p><br />var showMoreEvent = function() {<br /> // レコード取得成功した時のコールバック関数作成<br /> var cb = function(records) {<br /> var tb = document.getElementById("cstap_tbody");<br /> var appId = kintone.app.getId();</p><p> for (var i = 0, len = records.length; i < len; i++) {<br />var record = records[i];<br />var last = tb.rows.length;<br />var row = tb.insertRow(last);<br />// 詳細<br />var showCell = row.insertCell(row.cells.length);<br />showCell.innerHTML = '<a href="/k/' + appId + '/show#record=' + record[recordCode]['value'] + '" class="btn btn-mini">詳細</a>';</p><p>for (var j = 0, columnLen = columns.length; j < columnLen; j++) {<br /> var cell = row.insertCell(row.cells.length);<br /> cell.appendChild(getFieldElement(record[columns[j]]));<br />}</p><p>// 編集<br />var editCell = row.insertCell(row.cells.length);<br />editCell.innerHTML = '<a href="/k/' + appId + '/show#record=' + record[recordCode]['value'] + '&mode=edit" class="btn btn-mini">編集</a>';<br /> }<br /> };<br /> getMoreRecord(cb);<br />};</p><p><br />var getMoreRecord = function(successCallback) {<br /> var tb = document.getElementById("cstap_tbody");<br /> var last = tb.rows.length;<br /> var offset = last;<br /> var limit = 100;<br /> var appId = kintone.app.getId();</p><p> // 現在の検索クエリ取得<br /> var currentQuery = kintone.app.getQuery();</p><p> // データ取得<br /> kintone.api('/k/v1/records', 'GET', {<br /> app: appId,<br /> query: "" + currentQuery + " limit " + limit + " offset " + offset<br /> }, function(resp) {<br /> successCallback(resp.records);<br /> });</p><p>};</p><p><br />var makeTableHead = function(columns) {<br /> var th = document.getElementById("cstap_thead");<br /> if (th.rows.length === 0) {<br /> var row = th.insertRow();<br /> var showCell = document.createElement('th');<br /> showCell.innerHTML = '';<br /> row.appendChild(showCell);</p><p> for (var i = 0, len = columns.length; i < len; i++) {<br />var cell = document.createElement('th');<br />cell.innerHTML = columns[i];<br />row.appendChild(cell);<br /> }<br /> var editCell = document.createElement('th');<br /> editCell.innerHTML = '';<br /> row.appendChild(editCell);<br /> }<br />};</p><p><br />var destroyTableRecords = function() {<br /> document.getElementById("cstap_tbody").innerHTML = "";<br />};<br />