技術者ではないので、初歩的な質問で申し訳ありません。
サンプルで公開されている予算・実績管理アプリですが、こちらを加工して自社で使える
アプリにしたいと思っております。
https://cybozudev.zendesk.com/hc/ja/articles/202640870
サンプルのテーブル項目を以下のようにしたいのですが、どうすればよいのか教えて下さい。
・月度（ex.2015年1月度）
・予算合計
・実績合計
・PC予算
・PC実績
・PC差異
・PC達成率
・iOS予算
・iOS実績
・iOS差異
・iOS達成率
・Android予算
・Android実績
・Android差異
・Android達成率
ご面倒をお掛けしますが、どなたか教えて下さい。宜しくお願いします。
以下で対応可能ではないでしょうか。
①予算管理アプリのフォーム編集を行う。
1.「拠点」フィールドを「月度」フィールドに変更。
2.「PC予算」フィールドの追加。
3.「iOS予算」フィールドの追加。
4.「Android予算」フィールドの追加。
②実績管理アプリのフォーム編集を行う。
1.「拠点」フィールドを「月度」フィールドに変更。
2.「PC実績」フィールドの追加。（PC実績の合計を算出するために必要なテーブルも追加）
3.「iOS実績」フィールドの追加。（iOS実績の合計を算出するために必要なテーブルも追加）
4.「Android実績」フィールドの追加。（Android実績の合計を算出するために必要なテーブルも追加）
③サンプルソースコードの修正を行う。
1.列の設定箇所（「//列の設定」がコメントされている処理）に表示を行う列の数だけ追加
【変更イメージ】 "月度"、"予算合計"、"実績合計"、"PC予算"、"PC実績"、・・・の順で表示する場合
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:"PC_budget",index:"PC_budget",width:200,align:"right",classes:"PC_budget_class",formatter:'currency',sorttype:"float"},
{name:"PC_results",index:"PC_results",width:200,align:"right",classes:"PC_results_class",formatter:'currency',sorttype:"float"},
・
・
・
];
※width（表示幅）の値は表示件数が多くなる場合、値を小さくしたほうが望ましいと思われます。
2.列の表示名設定箇所（「//列の表示名」がコメントされている処理）の変更
【変更イメージ】 "月度"、"予算合計"、"実績合計"、"PC予算"、"PC実績"、・・・の順で表示する場合
var colNames = [“月度”,“予算合計”,“実績合計”,“PC予算”,“PC実績”, ・・・];
3.テーブルの作成処理（「//テーブルの作成」がコメントされている処理）の変更
<変更イメージ> ※「PC」の項目のみ追加として作成しております。
kintone.api(‘/k/v1/records’, ‘GET’, {app: app_yosan}, function(resp) {
var records = resp[‘records’];
var key1,key2,key3,key4,key5,key6,key7,key8,key9; ←修正：必要な変数を追加
var nn = 0;
var reqUri;
var xmlHttp;
for(var i = 0; i < records.length; i++){
key1 = records[i]['月度']['value']; ←修正：「月度」フィールドの値を取得するよう変更
key1 = key1.replace(/</g, "<").replace(/>/g, ">");
key2 = records[i]['予算']['value'];
key6 = records[i]['PC予算']['value']; ←修正：「PC予算」フィールドの値を取得するよう追加
// 同期リクエストを行う
reqUri = kintone.api.url('/k/v1/records') + '?app='+ appId + '&query=' + encodeURI("月度 = \"" + key1 + "\""); ←修正：「月度」フィールドの値を取得するよう変更
xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", reqUri, false);
xmlHttp.setRequestHeader('X-Requested-With','XMLHttpRequest');
xmlHttp.send(null);
if (xmlHttp.status == 200){
if(window.JSON){
key3 = 0;
var obj = JSON.parse(xmlHttp.responseText);
for(var j = 0; j < obj['records'].length; j++){
key3 += parseInt(obj['records'][j]['実績合計']['value']);
}
key4 = parseInt(key3,10) - parseInt(key2,10);
key5 = parseInt(key3,10) / parseInt(key2,10) * 100;
key5 = key5.toFixed(2);
key5 += "%";
//↓修正：上記同様の処理で、PC実績の合計値、差異、達成率を算出する。
key7 = 0;
var obj = JSON.parse(xmlHttp.responseText);
for(var j = 0; j < obj['records'].length; j++){
key7 += parseInt(obj['records'][j]['PC実績']['value']);
}
key8 = parseInt(key7,10) - parseInt(key6,10);
key9 = parseInt(key7,10) / parseInt(key6,10) * 100;
key9 = key9.toFixed(2);
key9 += "%";
//↓修正：表示を行う値を設定する。
data.push({segment:key1,
budget:key2,results:key3,
PC_budget:key6,PC_results:key7,PC_Difference:key8,PC_AchievementRate:key9
});
}
}
}
~~~~
省略
~~~~~
はじめまして。
挨拶が後になり、申し訳ございませんでした。
また、長々とコメントを記載し、見づらい状態となり申し訳ございません。
たま様
ご回答頂いていたのに、急な海外出張に行っておりまして遅くなってしまい、申し訳ありません。
本日ようやく時間が取れたので、ご回答頂いた内容でさっそく試したいと思います。
結果を改めてこちらに記載させて頂きますので、宜しくお願いします。
たま様
さっそく試してみたのですが、どうしても表示されません。以下長くなってしまいますが、全文SRC記載しますので、何かおわかりになるがご指摘頂けますと幸いです。
尚、フォーム変更でフィールドiID名こそ違いますが、作成自体はご指示通りです。
実績の方の合計を出す為のテーブルに関してもサンプルのコピペの様に作成しました。
※合計の達成率などが質問時に抜けていたので、サンプル＋PCでテストしています。
(function() {
"use strict";
kintone.events.on(['app.record.index.show'], function(event){
if (document.getElementById( "view" ) != null){
var appId = kintone.app.getId(); //実績管理アプリID
var app_yosan = kintone.app.getLookupTargetAppId("月度"); //予算管理アプリID
//列の設定
var colModelSettings= [
{name:"segment",index:"segment",width:100,align:"center",classes:"segment_class"},
{name:"budget",index:"budget",width:100,align:"right",classes:"budget_class",formatter:'currency',sorttype:"float"},
{name:"results",index:"results",width:100,align:"right",classes:"results_class",formatter:'currency',sorttype:"float"},
{name:"Difference",index:"Difference",width:100,align:"right",classes:"Difference_class",formatter:'currency',sorttype:"float"},
{name:"AchievementRate",index:"AchievementRate",width:150,align:"center",classes:"AchievementRate_class",sorttype:"float"}
{name:"PC_budget",index:"PC_budget",width:100,align:"right",classes:"PC_budget_class",formatter:'currency',sorttype:"float"},
{name:"PC_results",index:"PC_results",width:100,align:"right",classes:"PC_results_class",formatter:'currency',sorttype:"float"},
{name:"PC_Difference",index:"PC_Difference",width:100,align:"right",classes:"PC_Difference_class",formatter:'currency',sorttype:"float"},
{name:"PC_AchievementRate",index:"PC_AchievementRate",width:150,align:"center",classes:"PC_AchievementRate_class",sorttype:"float"}
];
//列の表示名
var colNames = ["月度","売上予算","売上実績","差異","達成率","PC予算","PC実績","PC差異","PC達成率"];
//テーブルの作成
var data = [];
kintone.api('/k/v1/records', 'GET', {app: app_yosan}, function(resp) {
var records = resp['records'];
var key1,key2,key3,key4,key5,key6,key7,key8,key9;
var nn = 0;
var reqUri;
var xmlHttp;
for(var i = 0; i < records.length; i++){
key1 = records[i]['月度']['value'];
key1 = key1.replace(/</g, "<").replace(/>/g, ">");
key2 = records[i]['売上予算合計']['value'];
key6 = records[i]['売上予算_PC']['value'];
// 同期リクエストを行う
reqUri = kintone.api.url('/k/v1/records') + '?app='+ appId + '&query=' + encodeURI("月度 = \"" + key1 + "\"");
xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", reqUri, false);
xmlHttp.setRequestHeader('X-Requested-With','XMLHttpRequest');
xmlHttp.send(null);
if (xmlHttp.status == 200){
if(window.JSON){
key3 = 0;
var obj = JSON.parse(xmlHttp.responseText);
for(var j = 0; j < obj['records'].length; j++){
key3 += parseInt(obj['records'][j]['実績合計']['value']);
}
key4 = parseInt(key3,10) - parseInt(key2,10);
key5 = parseInt(key3,10) / parseInt(key2,10) * 100;
key5 = key5.toFixed(2);
key5 += "%";
//↓修正：上記同様の処理で、PC実績の合計値、差異、達成率を算出する。
key7 = 0;
var obj = JSON.parse(xmlHttp.responseText);
for(var j = 0; j < obj['records'].length; j++){
key7 += parseInt(obj['records'][j]['PC合計']['value']);
}
key8 = parseInt(key7,10) - parseInt(key6,10);
key9 = parseInt(key7,10) / parseInt(key6,10) * 100;
key9 = key9.toFixed(2);
key9 += "%";
//↓修正：表示を行う値を設定する。
data.push({segment:key1,
budget:key2,results:key3,Difference:key4,AchievementRate:key5,
PC_budget:key6,PC_results:key7,PC_Difference:key8,PC_AchievementRate:key9
});
}
}
}
$("#view").jqGrid({
data:data,
datatype : "local",
colNames : colNames,
colModel : colModelSettings,
rowNum : 10,
rowList : [1, 12, 24 ,36],
caption : "売上予実一覧",
height : "auto",
width : "auto",
pager : 'pager',
shrinkToFit : true,
viewrecords: true,
gridComplete:function(){
cellDesign();
}
});
//マイナス値を赤色に変更
function cellDesign(){
var elTable = document.getElementById("view");
var elCell = elTable.getElementsByTagName("td");
var title;
for(var i = 0; i <elCell.length; i++){
if(elCell[i].className == "Difference_class"){
title = elCell[i].title;
if(title.indexOf("-")>-1){
elCell[i].style.color = "#ff0000";
}
}
}
}
});
}
return event;
});
})();
satoshi様
ご連絡が遅くなり、申し訳ございません。
ソースコードを確認したところ、以下の修正が必要かと思われます。
<修正前>
「//列の設定」処理内
{name:“AchievementRate”,index:“AchievementRate”,width:150,align:“center”,classes:“AchievementRate_class”,sorttype:“float”}
<修正後>
「//列の設定」処理内
{name:“AchievementRate”,index:“AchievementRate”,width:150,align:“center”,classes:“AchievementRate_class”,sorttype:“float”},
※要素を追加したため、最後に「,」が必要となります。
また、上記修正後も表示されない場合、以下のご確認もお願いいたします。
①「月度」フィールドコードが「予算管理アプリ」に定義されているか。
//テーブルの作成内
・var app_yosan = kintone.app.getLookupTargetAppId(“月度”);
②「売上予算合計」、「売上予算_PC」フィールドコードが「予算管理アプリ」に定義されているか。
//テーブルの作成内
・key2 = records[i][‘売上予算合計’][‘value’];
・key6 = records[i][‘売上予算_PC’][‘value’];
③「予算管理アプリ」、「実績管理アプリ」にそれぞれデータが入力されているか。
よろしくお願いいたします。
たま様
お手数をおかけしました。”,”が抜けていた事に気づいておりませんでした。
無事表示されましたので、あとはPC以外の項目を追加したいと思います。
ご丁寧に教えて頂きまして、有難うございました。
satoshi様
ご連絡ありがとうございます。
無事動作できたのことで安心いたしました。
PC以外の項目に関しても、同様な対応で実装可能と考えられます。
よろしくお願いいたします。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。