予算アプリと実績アプリの集計表をカスタマイズビューに表示する

フォローする

Index

概要

カスタマイズビューを利用し、予算と実績の差異と達成率を集計表を作成します。 カスタマイズビューの設定方法に関しては、「カスタマイズする場合」をご確認ください。

完成形

事前準備

  • kintone アプリ(kintone アプリストア にある「予算・実績管理」を使います)
    ※該当のアプリは、https://(サブドメイン).cybozu.com/k/#/market/ から追加できます。
  • エディター

サンプルプログラム

ご注意事項

  • サンプルプログラムは、その動作を保証するものではありません
  • サンプルプログラムの技術的なサポート等は行っていません
  • kintone JavaScript APIは非同期で実行されるため、XMLHttpRequest を使って同期処理しています。 処理中はブラウザがフリーズする場合があります。 また、XMLHttpRequest は利用できないブラウザもありますので、ご注意ください。

以下はすべて、「実績管理」アプリに対して作業を行います。

カスタマイズビュー

  • 一覧を追加します。
  • 新規に一覧を作成し「レコード一覧の表示形式」を“カスタマイズ”に設定します。 (カスタマイズビューを作成するには、kintoneの管理権限が必要です。)
  • HTML欄に上記のHTMLを入力し保存します。

PC用のJavaScriptカスタマイズ

詳細設定から「JavaScript / CSSによるカスタマイズ」を開き、Cybozu CDN から次のライブラリを順番に指定します。

  • jQuery
    https://js.cybozu.com/jquery/2.2.4/jquery.min.js (version 2.2.4を利用)
  • jQuery UI
    https://js.cybozu.com/jqueryui/1.11.4/jquery-ui.min.js (version 1.11.4を利用)
  • jqGrid
    https://js.cybozu.com/jqgrid/v5.1.0/js/jquery.jqGrid.js (version 5.1.0を利用)
    https://js.cybozu.com/jqgrid/v5.1.0/js/i18n/grid.locale-ja.js (version 5.1.0を利用)

JavaScriptサンプル

  • 次のサンプルプログラムをエディターにコピーして、ファイル名を「sample_grid.js」 、文字コードを「UTF-8」、「BOMなし」で保存します
    ※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください

 

PC用のCSSファイル

詳細設定から「JavaScript / CSSによるカスタマイズ」を開き、Cybozu CDN から次のライブラリを順番に指定します。

  • jQuery UI
    https://js.cybozu.com/jqueryui/1.11.4/themes/redmond/jquery-ui.css (version 1.11.4、Themeに「redmond」を利用)
  • jqGrid
    https://js.cybozu.com/jqgrid/v5.1.0/css/ui.jqgrid.css

設定した画面

「JavaScript / CSSによるカスタマイズ」画面でそれぞれ設定した例を紹介します。

  

使用したAPI

  1. イベントハンドラーを登録する
  2. レコード一覧の表示後イベント
  3. アプリのIDを取得する
  4. ルックアップフィールドの参照先のアプリIDを取得する
  5. REST APIリクエストを送信する
  6. URL を取得する(クエリ文字列無し)

参考Tips記事

  1. kintone API で Promise を使ってみよう!
  2. Promiseを利用したモダンなアプリの全レコード取得の書き方

デモ環境

(実績管理) https://dev-demo.cybozu.com/k/67/

(予算管理) https://dev-demo.cybozu.com/k/68/

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

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

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

Avatar
Eriko

いつも大変お世話になっております。

こちらのサンプルを弊社用にカスタマイズし、利用しております。

達成率の部分なのですが、こちらの数字を「100%以下の場合赤文字にする」ということは可能でしょうか?

よろしくお願いします。

Avatar
cybozu Development team

Eriko様

お世話になっております。

達成率を「100%以下の場合赤文字にする」件ですが、以下の方法で可能と考えます。

・ $('.Difference_class').val()で値を取得
・ %をトリミング
・ トリミングした値をparse.IntでInt型にparseして比較
 
もしまたご不明な点がありましたらお気軽におたずねください。
Avatar
Eriko

cybozu Development team 様

いつも大変お世話になります。

もう一つのTIPSでもお伝えしましたが、

当方初心者のため、大変お手数ではありますが上記のサンプルコードを頂くことは可能でしょうか?

ご迷惑をおかけしますが、よろしくお願いいたします。

Avatar
cybozu Development team

Eriko様

先のご案内に誤りがありました。申し訳ありません。

$('.Difference_class').val() ではなく、達成率のため、$('.Achievemnet_class').val() がいいかと思います。

トリミングについては、developer network内のこちらの記事に参考になる方法がございます。

parseIntについては本記事の該当箇所をご参考ください。

ぜひお試しの上、またご不明な点がありましたらご連絡ください。

よろしくお願いいたします。

Avatar
takashi

いつも参考にさせて頂いております。

実績管理アプリの集計を行うとき、例えば弊社では2000件くらいレコードがあり、

色々試したのですが全レコードの集計値を出すことができません。

(繰り返し処理無しの上限、500件までなら出来たのですが・・)

実績を全レコード集計する際のサンプルコードなどご教示頂けないでしょうか?

 

Avatar
cybozu Development team

takashi 様

いつもお世話になっております。

もうし解釈がズレましたら申し訳ございません。

実績管理アプリの全レコードに対して集計を行いたいであれば、

本Tipsのサンプルコードの「予算管理アプリの全レコード取得」を参考して、

実績管理アプリの全レコードを取得することで、全レコード集計を行うことが可能かと思います。

ぜひお試しの上、またご不明な点がありましたらご連絡ください。

よろしくお願いします。

Avatar
du

いつもお世話になっております。

こちらで下記の手順で実施してみましたが、予実管理に何も表示されていません。

①アプリ追加

②予算管理アプリにデータ一行追加

➂上記手順通り実績管理アプリを編集。

④実績管理アプリにデータ一行追加。

何か操作が間違ってますか。

以上、よろしくお願い申し上げます。

 

Avatar
cybozu Development team

du様
いつもお世話になっております。
cybozu developer network運営事務局です。

こちらで記事通り作成してみたら、問題なく動作しました。
まず以下の3つの内容をご確認の上、それでも何も表示されないようでしたら、
差し支えなければ、各設定画面の画像を添付していただければと思います。

①アプリの設定>JavaScript/CSSカスタマイズで記事にある画像の順番通り、
ライブラリ、JS,CSSファイルを適用したのかをもう一度ご確認ください。

②またライブラリをURL指定してアップロードする時に、
https://が重複して記入されていないかご確認ください。

③アプリの設定>一覧の設定で、カスタマイズビューのHTML部分に
入れたコードに記述ミスがないかもう一度ご確認ください。

よろしくお願いします。

 

Avatar
du

お疲れ様です。

ご回答ありがとうございます。

最初はサンプルJSをローカルからアップロードする形で、結果は失敗しましたが、

先ほど、DropboxにサンプルJSをアップして、URLを設定する形で、成功しました。

ローカルからアップする方法は何かほかの設定が必要でしょうか?

以上、よろしくお願い申し上げます。

 

 

 

 

Avatar
cybozu Development team

du様
お世話になっております。

>ローカルからアップする方法は何かほかの設定が必要でしょうか?
こちらについてですが、ファイルをアップロードする以外に他の設定は必要ありません。

アプリの設定>JavaScript/CSSカスタマイズ>PC用のJavaScriptファイルの方に
作成したJSファイルをアップロードして、保存>アプリ更新をクリックするという手順になります。

(※一覧でのカスタマイズビューの設定や、ライブラリの指定は完了したことを前提にしています。)

アプリの設定>JavaScript/CSSカスタマイズ>適用範囲に「すべてのユーザーに適用」、
もしくは、「アプリ管理者だけに適用」に設定されているかご確認ください。

よろしくお願いいたします。

 

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