カテゴリー内の他の記事

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

フォローする

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

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

 

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運営事務局様

 

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

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

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