予算・実績管理アプリのカスタマイズについて

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

つい先日よりkintoneを使用させていただいております。

 

予算・実績管理のサンプルを試しているのですが、これをうまくカスタマイズして使用できないかとなりまして苦戦しております。

全くの初心者で、いくつか参考になりそうな投稿も見てみましたが、わからないというのが現状です。

表の名前、各項目の名前の変更まではできたのですが、追加ができません。

実績管理アプリには利益のフィールドは作りました。

 

/*
* カスタマイズビューのサンプルプログラム
* Copyright (c) 2016 Cybozu
*
* Licensed under the MIT License
*/
jQuery.noConflict();
(function($) {

“use strict”;
//予算管理アプリを全レコード取得
function fetchRecords(appId, opt_offset, opt_limit, opt_records) {
var app_yosan = kintone.app.getLookupTargetAppId(“拠点”); //予算管理アプリID
var offset = opt_offset || 0;
var limit = opt_limit || 100;
var allRecords = opt_records || [];
var params = {app: app_yosan, query: ‘order by レコード番号 asc limit ’ + limit + ’ offset ’ + offset};
return kintone.api(kintone.api.url(’/k/v1/records’, true), ‘GET’, params).then(function(resp) {
allRecords = allRecords.concat(resp.records);
if (resp.records.length === limit) {
return fetchRecords(appId, offset + limit, limit, allRecords);
}
return allRecords;
});
}
//予実管理データのカスタマイズビュー用データの作成
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;
key1 = records[i][‘拠点’][‘value’];
key1 = key1.replace(/</g, “<”).replace(/>/g, “>”);
key2 = records[i][‘予算’][‘value’];

var params = {‘app’: appId, ‘query’: ‘拠点 = "’ + key1 + ‘"’};
return kintone.api(kintone.api.url(‘/k/v1/records’, true), ‘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 = records[i][‘利益’][‘value’];
key6 = parseInt(key3, 10) / parseInt(key2, 10) * 100;
key6 = key5.toFixed(2);
key6 += “%”;
allData.push({segment: key1, budget: key2, results: key3, Difference: key4, purofit: key5,AchievementRate: key6});
}else {
event.error = ‘実績管理情報が取得できません。’;
}
i = i + 1;
if (records.length !== i) {
return makeYojitsuData(records, allData, i);
}
return allData;
});
}
//差異のマイナス値を赤色に変更
function cellDesign() {
$(‘#view tr td’).each(function(index, elm) {
if ($(this).hasClass(‘Difference_class’)) {
if ($(this).text().indexOf(“-”) > -1) {
$(this).css(‘color’, ‘#ff0000’);
}
}
});

}
//予実管理のカスタマイズビューを取得
function dispYojitsuCustomizeView(records) {
makeYojitsuData(records).then(function(data) {
//列の設定
var colModelSettings = [
{name: “segment”, index: “segment”, width: 300, align: “center”,
classes: “segment_class”},
{name: “budget”, index: “budget”, width: 200, align: “right”,
classes: “budget_class”, formatter: ‘currency’, sorttype: “float”},
{name: “results”, index: “results”, width: 200, align: “right”,
classes: “results_class”, formatter: ‘currency’, sorttype: “float”},
{name: “Difference”, index: “Difference”, width: 200, align: “right”,
classes: “Difference_class”, formatter: ‘currency’, sorttype: “float”},
{name: “purofit”, index: “Difference”, width: 200, align: “right”,
classes: “purofit_class”, formatter: ‘currency’, sorttype: “float”},
{name: “AchievementRate”, index: “AchievementRate”, width: 150, align: “center”,
classes: “AchievementRate_class”, sorttype: “float”}
];
//列の表示名
var colNames = [“依頼元”, “予算”, “支出”, “残金”, “利益”,“利益率”];
$(“#view”).jqGrid({
data: data,
datatype: “local”,
colNames: colNames,
colModel: colModelSettings,
rowNum: 10,
rowList: [1, 10, 20],
caption: “管理表”,
height: “auto”,
width: 1100,
pager: ‘pager’,
shrinkToFit: true,
viewrecords: true,
gridComplete: function() {
cellDesign();

}
});
});
}
//イベント処理
kintone.events.on([‘app.record.index.show’], function(event) {
var appId = kintone.app.getId(); //実績管理アプリID
fetchRecords(appId).then(function(records) {
dispYojitsuCustomizeView(records);
});
});

})(jQuery);

 

いろいろな投稿を見ていじってみたのですが、key5 = records[i][‘利益’][‘value’];、purofit: key5、{name: “purofit”, index: “Difference”, width: 200, align: “right”,classes: “purofit_class”, formatter: ‘currency’, sorttype: “float”},var colNames = [“依頼元”, “予算”, “支出”, “残金”, “利益”,“利益率”];このあたりを追加するのに精一杯で、コードが合っているのかもわかりません。

初心者過ぎて申し訳ございませんが、どのようにしたらいいでしょうか。

ご教示いただけますと幸いです。

タカクラ様

お世話になっております。トヨクモの加納と申します。

ご質問から日が空いてしまいましたが、その後問題は解決しましたでしょうか。もし未解決のままであれば、この回答がご参考になれば幸いです。

まず、問題の状況ですが、「予算・実績管理のサンプルアプリについて、https://developer.cybozu.io/hc/ja/articles/202640870 を元にカスタマイズを行なった。カスタマイズに使用したサンプルのJSプログラムを更に編集して、表の名前と各項目の名前の変更をすることはできたが、項目の追加ができず、方法が知りたい。」というような理解でよろしいでしょうか。

まず、項目の追加ができない事に関しては、ご記載のコードにエラーが含まれていることが下忍です。

ご記載のコード46行目で、records[i][‘利益’] を key5 に代入されていますが、records[i] は ‘利益’ という要素を持っていないため、ここで代入が失敗しています。

また、31行目で key6 を宣言していないため、47行目の key6 への代入も失敗しています。

また、103行目に全角の「,」が入っているなど、他にもいくつかコード上のエラーがあり、それが元でご要望通りの動作ができていないものと思われます。エラーがどこにあるのかについては、例えばブラウザにChromeをお使いであれば、https://www.buildinsider.net/web/chromedevtools/01 で紹介されているデベロッパーツールのConsoleタブに、そのページで起きたエラーの詳細が表示されますので、こちらから確認できます。例えば、上記の key6 への代入失敗については、添付画像のように表示されます。他のブラウザにも同様の機能がありますので、お試しください。

また、上記の「records[i] が ‘利益’ の要素を持っていない」というような問題に関しては、

console.log("records[i]");

というコードを加えることで、デベロッパーツールのConsoleタブに records[i] の詳細を表示することができ、確認ができます。

以上、長くなってしまいましたが、お役に立てれば幸いです。

加納大地 様

ご連絡ありがとうございます。

その後チュートリアルから勉強し直しておりましたが、まだ解決には至っておりませんでした。

 

質問が要点を得ておらず大変失礼いたしました。加納様のおっしゃる通りのことで悩んでおりました。

具体的な解決方法、ありがとうございます。

明日からの休暇を使い、解決方法をしっかりと確認させていただきます。

 

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

 

加納大地 様

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

タカクラです。

いろいろ勉強し直し足りないと思われる点を修正し定義し直してみたのですがやはりうまくいきません。

定義がうまくできないことが問題だとは思うのですが実績管理内のレコード「利益」の値をそのまま表示させたい場合はどのように定義をすればよろしいのでしょうか。

以下修正したものを貼り付けます。アドバイスいただけますと大変うれしいです。

どうぞよろしくお願いいたします。

 

/*
* カスタマイズビューのサンプルプログラム
* Copyright (c) 2016 Cybozu
*
* Licensed under the MIT License
*/
jQuery.noConflict();
(function($) {

“use strict”;
//予算管理アプリを全レコード取得
function fetchRecords(appId, opt_offset, opt_limit, opt_records) {
var app_yosan = kintone.app.getLookupTargetAppId(“拠点”); //予算管理アプリID
var offset = opt_offset || 0;
var limit = opt_limit || 100;
var allRecords = opt_records || [];
var params = {app: app_yosan, query: ‘order by レコード番号 asc limit ’ + limit + ’ offset ’ + offset};
return kintone.api(kintone.api.url(’/k/v1/records’, true), ‘GET’, params).then(function(resp) {
allRecords = allRecords.concat(resp.records);
if (resp.records.length === limit) {
return fetchRecords(appId, offset + limit, limit, allRecords);
}
return allRecords;
});
}
//予実管理データのカスタマイズビュー用データの作成
function makeYojitsuData(records, opt_data, opt_i, opt_j) {
var i = opt_i || 0; //レコードのカウント
var allData = opt_data || []; //予実の集計結果
var appId = kintone.app.getId(); //実績管理アプリID
var opt_j = kintone.app.getLookupTargetAppId(“利益”);
var key1, key2, key3, key4, key5, key6;
key1 = records[i][‘拠点’][‘value’];
key1 = key1.replace(/</g, “<”).replace(/>/g, “>”);
key2 = records[i][‘予算’][‘value’];
console.log(“records[i]”);

var params = {‘app’: appId, ‘query’: ‘拠点 = "’ + key1 + ‘"’};
return kintone.api(kintone.api.url(‘/k/v1/records’, true), ‘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 += “%”;
key6 = records[opt_j][‘利益’][‘value’];
allData.push({segment: key1, budget: key2, results: key3, Difference: key4, AchievementRate: key5, purofit: key6 });
}else {
event.error = ‘実績管理情報が取得できません。’;
}
i = i + 1;
if (records.length !== i) {
return makeYojitsuData(records, allData, i);
}
return allData;
});
}
//差異のマイナス値を赤色に変更
function cellDesign() {
$(‘#view tr td’).each(function(index, elm) {
if ($(this).hasClass(‘Difference_class’)) {
if ($(this).text().indexOf(“-”) > -1) {
$(this).css(‘color’, ‘#ff0000’);
}
}
});

}
//予実管理のカスタマイズビューを取得
function dispYojitsuCustomizeView(records) {
makeYojitsuData(records).then(function(data) {
//列の設定
var colModelSettings = [
{name: “segment”, index: “segment”, width: 300, align: “center”,
classes: “segment_class”},
{name: “budget”, index: “budget”, width: 200, align: “right”,
classes: “budget_class”, formatter: ‘currency’, sorttype: “float”},
{name: “results”, index: “results”, width: 200, align: “right”,
classes: “results_class”, formatter: ‘currency’, sorttype: “float”},
{name: “Difference”, index: “Difference”, width: 200, align: “right”,
classes: “Difference_class”, formatter: ‘currency’, sorttype: “float”},
{name: “purofit”, index: “purofit”, width: 200, align: “right”,
classes: “purofit_class”, formatter: ‘currency’, sorttype: “float”},
{name: “AchievementRate”, index: “AchievementRate”, width: 150, align: “center”,
classes: “AchievementRate_class”, sorttype: “float”}
];
//列の表示名
var colNames = [“依頼元”, “予算”, “支出”, “残金”, “利益”, “利益率”];
$(“#view”).jqGrid({
data: data,
datatype: “local”,
colNames: colNames,
colModel: colModelSettings,
rowNum: 10,
rowList: [1, 10, 20],
caption: “売上”,
height: “auto”,
width: 1100,
pager: ‘pager’,
shrinkToFit: true,
viewrecords: true,
gridComplete: function() {
cellDesign();
}
});
});
}
//イベント処理
kintone.events.on([‘app.record.index.show’], function(event) {
var appId = kintone.app.getId(); //実績管理アプリID
fetchRecords(appId).then(function(records) {
dispYojitsuCustomizeView(records);
});
});

})(jQuery);