カテゴリー内の他の記事

カスタマイズビューでレコード毎の差分を表示 - 検針票の場合 -

このカスタマイズで利用している kintone Utility Library for JavaScript は現在推奨されていません。今後は kintone JavaScript Client (@kintone/rest-api-client) を利用するように書き換えてください。
Moment.js はメンテナンスモードになり、日付処理できる代替ライブラリへの移行が推奨されています。
代替ライブラリのひとつ Luxon については、kintone カスタマイズでの導入方法の紹介記事があります。

(著者:サイボウズ 竹内 能彦)

はじめに

皆さん、カスタマイズビューを使っていますか?

カスタマイズビューは難しそうだなぁと思われている方もいらっしゃいますが、kintone Utilityを使えばあとはHTMLの知識があれば様々な画面表示が可能になります。

今回は検針を例に前月との差分を見やすく表示してみます!

 

デモ環境

こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/272/

デモ環境の利用は、事前に cybozu developer network のメンバー登録が必要です。画面右上の「サインイン」ボタンよりご登録ください。
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。

 

結果

まずは結果から行きましょう!
以下のデータを入力した状態でカスタマイズビューを選択すると・・・

kintone1.png

 

このように前月との差分をわかりやすく表示します。これは便利!

kintone2.png

 

一覧の絞り込みももちろん機能します。
2016年のデータに絞り込むとこのように表示されます。

kintone3.png

 

kintone 設定

kintone アプリの作成

フィールド名

フィールドタイプ フィールドコード 備考
建物/部屋 文字列(1行) room 必須項目にする
ラジオボタン year 項目と順番には「2016」や「2017」などの西暦をセット
ドロップダウン month

必須項目にする

項目と順番には「1」から「12」の値をセット

種類 ラジオボタン type

項目と順番には「ガス」と「水道」をセット

数値 meter 必須項目にする

 

一覧(カスタマイズビュー)の作成

「アプリの設定 > 一覧」でレコード一覧の表示形式にカスタマイズを選択します。
※「カスタマイズ」を選択できるのは、kintoneのシステム管理者だけです。
「HTML」に以下のコードを設定します。

 

JS/CSS設定

「アプリの設定 > JavaScript / CSSでカスタマイズ」の「PC用のJavaScriptファイル」に以下のURL/ファイルを設定します。

  • https://js.cybozu.com/jquery/3.2.0/jquery.min.js
  • https://js.cybozu.com/momentjs/2.18.1/moment.min.js
  • kintoneUtility.min.js
    https://github.com/kintone/kintoneUtility/releases/tag/v0.4.1 の「Assets」からダウンロードしてください。
  • 以下のサンプルコードをエディタにコピーして、ファイル名を「sample.js」、文字コードを「UTF-8」で保存、アップロードします。
    ※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください

 

「アプリの設定 > JavaScript / CSSでカスタマイズ」の「PC用のCSSファイル」に以下のサンプルコードをエディタにコピーして、ファイル名を「sample.css」、文字コードを「UTF-8N」で保存、アップロードします。
※ファイル名は任意ですが、ファイルの拡張子は「css」にしてください。

 

終わりに

今回は検針を例にレコード毎の差分を表示してみましたが、他にも様々な形式で表示することができます。
皆さんが、カスタマイズビューにトライするきっかけになれば幸いです。

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

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

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