カテゴリー内の他の記事

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

フォローする

(著者:Cstap 落合 雄一

はじめに

こんにちは。落合@cstapです。

kintoneでは、レコード一覧で100件まで表示できます。しかし、「もっと表示したい!!」という強欲な方のために101件以上のレコードを「さらに表示」ボタンを使って表示する方法を伝授したいと思います(^^)

利用する機能は、カスタマイズビュー・JavaScriptカスタマイズの2つです。

カスタマイズビュー

101件以上を表示するために、2014年4月に新機能として追加されたカスタマイズビューを使ってみましょう(^^)
そもそもカスタマイズビューって・・・( ・◇・)?

これです!これ!!一覧の設定ページにあるこいつ↓のことです!!

それでは、サンプルとして「レコード番号」「作成者」「作成日時」の3つのフィールドを一覧表示してみましょう(^^♪
まずは、このカスタマイズビューに以下のHTMLを指定します。

テーブル、ボタン、テーブルのスタイルをシンプルに書いたHTMLですね♪(^^)
また、「ページネーションを表示する」はOffにしてください。

JavaScript

次に、先ほど指定したカスタマイズビューのHTMLにレコードを挿入するJavaScriptを登録します(^^♪
早速ソースコードを見てみましょう。

JavaScriptの説明

①一覧画面表示イベント

レコード一覧画面の表示後イベントのapp.record.index.showを使います。

②ボタンクリックイベント

カスタマイズビューで指定したHTMLのbutton要素(id=” button_more”)にonclickイベントを追加します。

③検索クエリに基づいて、次の100件の取得(showMoreRecordsEvent)

検索クエリの取得は、kintone.app.getQueryCondition()を使います。「ページネーションを表示する」をOffにするので、kintone.app. getQuery()でも同じ結果が得られます。ただし、両方ともPCのみでしか利用できません。

次の100件の取得は、kintone REST API リクエストkintone.api/k/v1/recordsを使います。

④取得したすべてのレコードについて行追加(createTableRecords)

③で取得したすべてのレコードを引数に、テーブルの行を作成し追加します。フィールド形式についてはここを参考にしてください。

⑤テーブルのクリア(destroyTableRecords)

検索条件を変更した場合に、一度テーブルをクリアする必要があります。ソースはこの部分です(^^)

結果

「さらに表示」ボタンで次の100件が表示されることを確認できましたでしょうか?

最後に

今回、101件以上を「さらに表示」ボタンを使って表示する方法について説明しました。
使いやすいサンプルが欲しい!!(>_<)という方もいらっしゃるかと思います。そこで弊社HPに、より実用的なサンプルを置きましので、重ねてご参考にしていただければと思います。

※cstap社のサンプルについては、cybozuのサポート対象外となります。

 

このTipsは、2014年4月版で確認したものになります。

デモ環境

https://dev-demo.cybozu.com/k/172/

※デモ環境についての説明はこちら

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
Shinnosuke Tanaka

いつも参考にしております。

1点質問させていただいてもよろしいでしょうか?

 

このままの仕様ですと、常に現在表示されているところから、100件みにいくので、すべて一覧を表示しきってもさらに表示するボタンが表示されます。

これを、先の件数があるときのみ表示することは可能でしょうか?

 

おそらく、クエリで得られた総件数等がとれればいける気がするのですが、その方法がわかりません・・・

恐れ入りますが、アドバイスいただけますか?

 

Avatar
cybozu Development team

Shinnosuke Tanaka 様

ご質問の件ですが、レコード件数を取得すれば可能かと思いますが、レコード件数を取得するAPIは現在ありません。

下記投稿が参考になると思いますが、いかがでしょうか。

https://cybozudev.zendesk.com/hc/ja/community/posts/201127454

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