今回は、前回のアプリを改造してグラフの設定更新や新規追加をしてみたいと思います。
アプリの準備
アプリは前回のアプリを再利用して作成してください。
こんな見た目にします。（グラフの設定更新ボタンが追加されただけです）
グラフの種類とグラフの表示モードを更新するようなアプリです。
JavaScript
前回のJavaScriptに「グラフの設定更新ボタン」を設置するコードを追加します。
これでスペースフィールドに「グラフの設定更新ボタン」が追加されます。
const btnPut = document.createElement("button");
btnPut.textContent = "グラフの設定更新";
sp.appendChild(btnPut);
「グラフの設定更新ボタン」クリックの部分を書いていきます。
ボタンクリックでやることの流れは
- グラフ設定APIで現在のグラフの設定を取得する
- 取得してきたグラフ設定の内容をテーブルの内容で上書きする
- グラフ設定を更新する
- 設定反映APIで設定を反映する
です。
// ボタンクリック
btnPut.onclick = async () => {
// 1. グラフ設定APIで現在のグラフの設定を取得する
// 2. 取得してきたグラフ設定の内容をテーブルの内容で上書きする
// 3. グラフ設定を更新する
// 4. 設定反映APIで設定を反映する
}
1. グラフ設定APIで現在のグラフの設定を取得する
前回同様、グラフ設定をGETしてgraphSettingに入れちゃいます。
これは設定更新のときに使います。
const obj = kintone.app.record.get();
const bodyGet = {
app: obj.record.アプリID.value,
};
//グラフAPIでグラフの設定を呼び出す
const graphSetting = await kintone.api(
kintone.api.url("/k/v1/app/reports", true),
"GET",
bodyGet
);
2. 取得してきたグラフ設定の内容をテーブルの内容で上書きする
テーブルの内容でグラフ設定を上書きします。
r.value.name.valueには、テーブルの1カラム目のグラフ名が入っています。
obj.record.テーブル.value.forEach((r, idx) => {
graphSetting.reports[r.value.name.value].chartType = r.value.chartType.value;
graphSetting.reports[r.value.name.value].chartMode = r.value.chartMode.value;
});
3. グラフ設定を更新する
グラフ設定APIで更新します。
リクエストパラメータのreportsには、テーブルの内容で更新した、graphSettingのreportsプロパティを使います。
詳細は↓の公式ドキュメントを確認してくださいね。
const bodyPut = {
app: obj.record.アプリID.value,
reports: graphSetting.reports,
};
const resp = await kintone.api(
kintone.api.url("/k/v1/preview/app/reports", true),
"PUT",
bodyPut
);
4. 設定反映APIで設定を反映する
グラフの設定更新APIを叩いたあとは、設定反映APIでデプロイ！する
await kintone.api(
kintone.api.url("/k/v1/preview/app/deploy", true),
"POST",
{ apps: [{ app: obj.record.アプリID.value}] }
);
動作確認
グラフ名「テスト」のグラフの種類をたて棒グラフから円グラフに変更します。
新規追加も・・・
サブテーブルに行を追加して更新するとグラフが**「とりあえず」**追加されるようにしてみたいと思います。
2. 取得してきたグラフ設定の内容をテーブルの内容で上書きする
のコードに下記if文を追加します。
新規追加する場合、
name, index, groups, aggregatoins, sorts は必須のプロパティとなるようです。
というわけで、とりあえず、これらのプロパティをセットしておきます。
obj.record.テーブル.value.forEach((r, idx) => {
//追加ここから↓↓
if (!graphSetting.reports[r.value.name.value]) {
graphSetting.reports[r.value.name.value] = {
name: r.value.name.value,
index: idx,
groups: [{ code: "ラジオボタン" }],
aggregations: [{ code: "数値_1", type: "SUM" }],
sorts: [{ by: "TOTAL", order: "DESC" }],
};
}
//追加ここまで↑↑
graphSetting.reports[r.value.name.value].chartType = r.value.cartType.value;
graphSetting.reports[r.value.name.value].chartMode = r.value.chartMode.value;
});
動作確認
TESTという縦棒グラフを追加してみました。
まとめ
最終的なコードはこちらです。
更新ととりあえずの新規追加のみできるカスタマイズになりました。
次回はグラフの種類だけでなく、分類する項目や集計方法なども設定できるようなアプリを作ってみたいと思います。