カテゴリー内の他の記事

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

フォローする

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

はじめに

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

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

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

 

デモ環境

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

※デモ環境についての説明、アカウントとパスワードはこちら

 

結果

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

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
  • https://kintone.github.io/kintoneUtility/kintoneUtility.min.js
  • 以下のサンプルコードをエディタにコピーして、ファイル名を「sample.js」、文字コードを「UTF-8N」で保存、アップロードします。
    ※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください

 

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

 

終わりに

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

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

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

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