カテゴリー内の他の記事

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

レコード一括取得時にその結果が1万を超える可能性がある場合には、運用・適用中のプログラムのご確認ならびに修正対応の検討をお願いいたします。
詳細はこちらの記事を確認ください。

Index

概要

こちらのサンプルは、予算管理アプリと実績管理アプリのデータを使って、予算/実績の差異と達成率を計算し、集計表に表示させるカスタマイズです。

カスタマイズビューという機能を利用し、一つの集計表にデータをまとめられるので、複数のアプリを確認したり、手動で集計したりする手間を省くことができます。
カスタマイズの適用方法は、「適用手順」をご参照ください。

完成形

完成イメージ

デモ環境

こちらのデモ環境から実際に動作を確認できます。
(実績管理) https://dev-demo.cybozu.com/k/67/
(予算管理) https://dev-demo.cybozu.com/k/68/

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

事前準備

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

適用手順

今回のカスタマイズは、「実績管理」アプリに対して作業を行います。

カスタマイズビューの設定

アプリストアから「予算・実績管理」を追加した場合、この設定は不要です。
また、カスタマイズビューを作成するには、kintone の管理権限が必要です。

  1. 一覧を追加します。
  2. 新規に一覧を作成し「レコード一覧の表示形式」を「カスタマイズ」に設定します。
  3. HTML 欄に下記の HTML を入力し保存します。
カスタマイズビューの設定方法の詳細は、ヘルプの「カスタマイズする場合」の部分をご参照ください。
また、カスタマイズビューの使い方について、チュートリアル記事「カスタマイズビューを利用してみよう」により詳しい解説がありますので、
興味ある方はぜひそちらもご覧ください。

JavaScriptファイル / CSS ファイルの追加

カスタマイズに必要なライブラリを追加します。

  1. アプリの設定画面から、「JavaScript / CSS によるカスタマイズ」を開きます。
  2. 次の内容を設定します。
    カスタマイズファイルを設定した後の画面
    項目 設定する値
    PC用のJavaScriptファイル 次の順で、URL およびファイルを指定します。
    • https://js.cybozu.com/jquery/2.2.4/jquery.min.js
    • https://js.cybozu.com/jqueryui/1.11.4/jquery-ui.min.js
    • jquery.jqGrid.min.js
    • grid.locale-ja.js
    • sample_grid.js
      サンプルプログラムのコードをエディターにコピーし、文字コードを「UTF-8(BOM無し)」、拡張子を「js」にしてファイルを保存します。
      ファイル名は任意です。ここでは「sample_grid.js」としています。
    PC用のCSSファイル 次の順で、URL およびファイルを指定します。
    • https://js.cybozu.com/jqueryui/1.11.4/themes/redmond/jquery-ui.css
    • ui.jqgrid.css
    適用対象 カスタマイズを適用するユーザーやグループを選択します。

※ jqGrid について

jqGrid は v4.8 からライセンスが Creative Commons Attribution-Non-Commercial 3.0 License に変更され、商用利用ができなくなりました。
このカスタマイズでは、MIT / GPLv2 ライセンスである v4.7.0 を利用しています(ライセンス表記)。jqGrid のバージョンアップを行う際は、ライセンス規約にしたがって適用してください。
OSS ライセンスについては、こちらの記事で解説しています。ぜひご一読ください。

jqGrid は https://github.com/tonytomov/jqGrid/releases/tag/v4.7.0 の「Source code(zip)」からダウンロードしてください。
ダウンロードした zip ファイルを解凍した後、次のファイルを利用します。

  • jquery.jqGrid.min.js:js > minified ディレクトリの下
  • grid.locale-ja.js:js > i18n ディレクトリの下
  • ui.jqgrid.css:css ディレクトリの下

サンプルプログラム

注意事項

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

使用したAPI

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

参考Tips記事

  1. kintone API で Promise を使ってみよう!

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

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

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

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

 

Avatar
もっくん

いつもお世話になっております。このサイトで素人ながらメンバーでいつもJavaScriptを勉強させて頂いております。

機能拡張の件ですが、予算管理アプリのフォームの内容を「拠点」「予算」に「予算年月」「予算項目」を追加し、実績管理アプリの「予算実績一覧」に「拠点」「予算年月」「予算項目」毎に予算/実績/差異/達成率が出るようにしたいと思いっています。

現在「予算実績一覧」に「拠点」「予算年月」「予算項目」「予算」までは正しく出るようにしたのですが、「実績」が元のまま「拠点」合計額がそれぞれに出てしまっています。

下記lsファイルの中ほどのkey3の「実績合計」当りのところだと思うのですが、内容が理解できておらず修正出来ません。ご教授お願い致します。

 

(修正したSample.grid.jsは以下の通り)

---------------------------------------------------------------------------------
//予実管理データのカスタマイズビュー用データの作成
function makeYojitsuData(records, opt_data, opt_i) {
var i = opt_i || 0; //レコードのカウント
var allData = opt_data || []; //予実の集計結果
var appId = kintone.app.getId(); //実績管理アプリID
var key1, key2, key3, key4, key5, key6, key7;
key1 = records[i]['拠点']['value'];
key1 = key1.replace(/</g, "&lt;").replace(/>/g, "&gt;");

key6 = records[i]['予算年月']['value'];
key6 = key6.replace(/</g, "&lt;").replace(/>/g, "&gt;");
key7 = records[i]['予算項目']['value'];
key7 = key7.replace(/</g, "&lt;").replace(/>/g, "&gt;");

key2 = records[i]['予算']['value'];

// var params = {'app': appId, 'query': '拠点 = "' + key1 + '"'};
var params = {'app': appId, 'query': '拠点 = "' + key1 + '"', 'query1': '予算年月 = "' + key6 + '"', 'query2': '予算項目 = "' + key7 + '"' };


return kintone.api('/k/v1/records', 'GET', params).then(function(resp) {
if (resp.records) {
key3 = 0;
var obj = resp.records;
for (var j = 0; j < obj.length; j++) {
key3 += parseInt(obj[j]['実績合計']['value'], 10);
}
key4 = parseInt(key3, 10) - parseInt(key2, 10);
key5 = parseInt(key3, 10) / parseInt(key2, 10) * 100;
key5 = key5.toFixed(2);
key5 += "%";
allData.push({segment: key1, yyyymm: key6, item: key7, budget: key2, results: key3, Difference: key4, AchievementRate: key5});
}else {
event.error = '実績管理情報が取得できません。';
}
i = i + 1;
if (records.length !== i) {
return makeYojitsuData(records, allData, i);
}
return allData;
});
}

--------------------------------------------------------------------------------------

Avatar
cybozu Development team

もつくん 様

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

ご質問の内容が記事のシナリオと異なる場合、コミュニティでの質問をお願いしております。
お手数ですが以下のコミュニティで再度ご投稿をお願いします。

「JavaScript developer 向けフォーラム」
https://developer.cybozu.io/hc/ja/community/topics/200034345

cybozu Development teamにより編集されました
Avatar
もっくん

cybozu developer network運営事務局様

 

失礼しました。改めてコミュニティの方で質問させて頂きます。

ありがとうございました。

Avatar
ポム

ご質問があるのですが、実績管理のJavaScript サンプルコードをコピーして、

カスタマイズ画面から、PC用のJavaScriptファイルにJSEdit for kintoneより保存したものを入れたのですが、画面に反映しません。

何か間違っているのでしょうか。教えていただけると助かります。

Avatar
cybozu Development team

ポム 様

こちらでカスタマイズ内容を確認したところ、正常に表示することが可能だったため、
カスタマイズ一覧の設定や、その他カスタマイズの設定等お間違いがないか今一度ご確認お願い致します。

また、カスタマイズ部分で不明点があった際は コミュニティをご活用ください
どうぞよろしくお願い致します。

Avatar
kyoden

こちらのカスタマイズでは実績を入力する方法が、拠点ごとにレコードを作成して、その中のサブテーブルで

実績とその金額を行ごとに入力していると思います。

その方法ではなく、実績ごとにレコードを作成して、それに拠点を追加していきたいのですが、

(1レコード内において、前者 拠点:実績=1:N、後者 拠点:実績=1:1)

それで問題なくカスタマイズビューにおいて拠点ごとに集計はちゃんとできるでしょうか?

大変お手数をおかけしますが、ご教示のほどよろしくお願いいたします。

Avatar
cybozu Development team

kyoden 様

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

こちらは記事に対するフィードバックの欄となっておりますため、
記事の内容の発展などのご質問は、大変お手数ですがコミュニティにお願いできますでしょうか。

コミュニティのほうが多くの方がご覧になっているため、アドバイスも得やすいかと思います。

Avatar
山崎

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

以下、2点を変更・追加したく自身で試してみたのですが正解が分からず・・・

ご教示いただけませんでしょうか?

①拠点名 を担当者名に変更したい。
②売上だけでなく、粗利や複合機の台数も、一緒に表示できるようにしたい。
 
Avatar
cybozu Development team

山崎様

お世話になっております。cybozu developer network 運営でございます。

コメント欄右記に記載があります通り、
記事の発展的な質問に関してはコミュニティをご活用ください。

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

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