이번에는 지난번 프로그램을 개조해서 그래프의 설정과 추가를 업데이트하고 싶습니다.

어플리케이션 준비

지난번 프로그램을 이용해서 프로그램을 만드세요.
이런 모양으로.(차트 설정 업데이트 버튼만 추가됨)
차트 유형 및 차트 표시 모드를 업데이트하는 응용 프로그램입니다.

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에는 표의 첫 번째 열을 포함하는 도표 이름이 있습니다.

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 업데이트를 설정합니다.
요청한 매개 변수의 리포트는 테이블 내용으로 업데이트된graphiSetting의 리포트 속성을 사용합니다.
자세한 내용은 ↓의 공식 문서를 확인하세요.

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라는 주형도를 추가해 보았습니다.

총결산

마지막 코드는 여기 있습니다.
업데이트와 잠깐의 새로운 추가 기능만 사용자 정의로 바뀌었습니다.
다음에는 도표의 종류뿐만 아니라 분류된 항목과 합계 방법 등도 설정할 수 있는 애플리케이션을 만들고 싶다.