kintone:101件以上を「さらに表示」ボタンを使って表示する

サンプル(JavaScript)の利用方法について

サンプル(JavaScript)の利用方法について

ファイル

cstap_lib_show_more_records.js

ソースコード

<br />
/**<br />
 * 説明<br />
 *  レコード一覧は最大100件までしか表示できないので、カスタムビューを使って101件以上を「さらに表示」ボタンを使って表示する<br />
 *  絞り込み、ソートしたもののみ表示<br />
 *<br />
 * 依存関係<br />
 *  http://toyokumo-blog.kintoneapp.com/wp-content/uploads/2014/05/cstap_lib_get_field_element.js<br />
 *  http://toyokumo-blog.kintoneapp.com/wp-content/uploads/2014/05/cstap_bootstrap.css<br />
 *<br />
 * 使い方<br />
 *  1．27行目 var columns = []に一覧で表示するフィールドコードを指定<br />
 *  2．30行目 レコード番号のフィールドコードを変更している場合は、var recordCode = &quot;レコード番号&quot;を変更<br />
 *  3．カスタマイズビューに下記HTMLを指定<br />
&lt;table class=&quot;recordlist-gaia&quot;&gt;<br />
  &lt;thead id=&quot;cstap_thead&quot;&gt;&lt;/thead&gt;<br />
  &lt;tbody id=&quot;cstap_tbody&quot;&gt;&lt;/tbody&gt;<br />
&lt;/table&gt;<br />
&lt;button type=&quot;button&quot; id=&quot;button_more&quot; class=&quot;btn btn-large btn-success&quot;&gt;さらに表示&lt;/button&gt;<br />
 *<br />
 * URL<br />
 *  http://toyokumo-blog.kintoneapp.com/wp-content/uploads/2014/05/cstap_lib_show_more_records.js<br />
 *<br />
 * @author Yuichi Ochiai &lt;ochiai@cstap.com&gt;<br />
 */</p>
<p>// レコード一覧画面のカラム(フィールドコード)<br />
var columns = [&quot;レコード番号&quot;, &quot;作成日時&quot;, &quot;作成者&quot;, &quot;チェックボックス&quot;, &quot;添付ファイル&quot;, &quot;Table&quot;];</p>
<p>// レコード番号のフィールドコード<br />
var recordCode = &quot;レコード番号&quot;;</p>
<p>(function() {<br />
  &quot;use strict&quot;;</p>
<p>  // 一覧ページ<br />
  kintone.events.on(&#039;app.record.index.show&#039;, function(event) {</p>
<p>    // ボタンのイベントリスナー追加<br />
    document.getElementById(&quot;button_more&quot;).onclick = showMoreEvent;</p>
<p>    // フォームの定義取得<br />
    var appId = kintone.app.getId();<br />
    kintone.api(&#039;/k/v1/form&#039;, &#039;GET&#039;, {<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 &lt; 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 &lt; len1; ++j) {<br />
        var col = tableHeadColumns[j];<br />
        if (typeof formColumns[col] !== &#039;undefined&#039;) {<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(&quot;cstap_tbody&quot;);<br />
    var appId = kintone.app.getId();</p>
<p>    for (var i = 0, len = records.length; i &lt; 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 = &#039;&lt;a href=&quot;/k/&#039; + appId + &#039;/show#record=&#039; + record[recordCode][&#039;value&#039;] + &#039;&quot; class=&quot;btn btn-mini&quot;&gt;詳細&lt;/a&gt;&#039;;</p>
<p>      for (var j = 0, columnLen = columns.length; j &lt; 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 = &#039;&lt;a href=&quot;/k/&#039; + appId + &#039;/show#record=&#039; + record[recordCode][&#039;value&#039;] + &#039;&amp;mode=edit&quot; class=&quot;btn btn-mini&quot;&gt;編集&lt;/a&gt;&#039;;<br />
    }<br />
  };<br />
  getMoreRecord(cb);<br />
};</p>
<p>/* レコード取得 */<br />
var getMoreRecord = function(successCallback) {<br />
  var tb = document.getElementById(&quot;cstap_tbody&quot;);<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(&#039;/k/v1/records&#039;, &#039;GET&#039;, {<br />
    app: appId,<br />
    query: &quot;&quot; + currentQuery + &quot; limit &quot; + limit + &quot; offset &quot; + offset<br />
  }, function(resp) {<br />
    successCallback(resp.records);<br />
  });</p>
<p>};</p>
<p>/* テーブルヘッダ作成 */<br />
var makeTableHead = function(columns) {<br />
  var th = document.getElementById(&quot;cstap_thead&quot;);<br />
  if (th.rows.length === 0) {<br />
    var row = th.insertRow();<br />
    var showCell = document.createElement(&#039;th&#039;);<br />
    showCell.innerHTML = &#039;&#039;;<br />
    row.appendChild(showCell);</p>
<p>    for (var i = 0, len = columns.length; i &lt; len; i++) {<br />
      var cell = document.createElement(&#039;th&#039;);<br />
      cell.innerHTML = columns[i];<br />
      row.appendChild(cell);<br />
    }<br />
    var editCell = document.createElement(&#039;th&#039;);<br />
    editCell.innerHTML = &#039;&#039;;<br />
    row.appendChild(editCell);<br />
  }<br />
};</p>
<p>/* テーブルデータクリア */<br />
var destroyTableRecords = function() {<br />
  document.getElementById(&quot;cstap_tbody&quot;).innerHTML = &quot;&quot;;<br />
};<br />