[kintoone] 응용 프로그램에 차트 API를 통해 얻은 차트 정보를 표시합니다.

9982 단어 kintone
나는 특정한 응용 프로그램 ID를 만들어서 도표의 정보를 얻어 이런 응용 프로그램을 보여 주고 싶다.
차트 API 문서는 여기에 있습니다.

첫 번째 응용 프로그램, 그래프가 있는 응용 프로그램


앱스토어에서 사건 관리 앱을 추가하다.
이미 있으신 분들은 여기를 건너뛰고 두 번째 앱을 추가하세요.

두 번째 응용 프로그램, 도표 설정을 획득한 응용 프로그램


이번 주인공 앱은
'처음부터 만들기'로 볼록점을 만든다.
이런 외관 & 필드를 원합니다.
적용 ID를 입력하고 버튼을 클릭하면 차트 설정이 테이블에 표시됩니다.

필드 유형
필드 이름
필드 코드
시험을 준비하다
문자열(단일행)
응용 프로그램 ID
응용 프로그램 ID
스페이스 바
--
sp_btn
차트 정보 가져오기 버튼이 됨
문자열(단일행)
차트 이름
name
테이블에서
문자열(단일행)
차트 ID
id
테이블에서
문자열(단일행)
차트 유형
chartType
테이블에서
문자열(단일행)
차트 표시 모드
chartMode
테이블에서

사용자 정의 JavaScript


즉시 함수에use strict 추가
추가, 편집 화면 표시에서 이동.
(() => {
  "use strict";

  kintone.events.on(
    ["app.record.create.show", "app.record.edit.show"],
    (event) => {
      //処理
    }
  );
})();

빈칸에 단추를 설정합니다.
//ボタン設置
const sp = kintone.app.record.getSpaceElement("sp_btn");
const btn = document.createElement("button");
btn.textContent = "グラフの情報取得";
sp.appendChild(btn);
버튼을 눌러 이벤트를 클릭합니다.REST API를 await로 호출하기 때문에 async를 미리 추가합니다.
addEventListener 좋아하는 사람은 거기에 적으세요!
//ボタンクリック
btn.onclick = async () => {
  //処理
}
그런 다음 차트 API에서 차트 설정을 호출합니다.kintone.app.record.get()를 통해 클릭할 때의 기록 내용을 얻을 수 있습니다.
//クリック時のレコードの内容を取得
const obj = kintone.app.record.get();
const body = {
  app: obj.record.アプリID.value,
};

//グラフAPIでグラフの設定を呼び出す
const graphSetting = await kintone.api(
  kintone.api.url("/k/v1/app/reports", true),
  "GET",
  body
);
다음은 표에 도표 설정을 쓰는 곳입니다.
설명은 뒤에 서술한다.
//テーブルの行たち
const tRows = [];
//グラフ名でグラフ設定内をループして行を作る
Object.keys(graphSetting.reports).forEach((g) => {
  tRows.push({
    value: {
      name: {
        type: "SINGLE_LINE_TEXT",
        value: graphSetting.reports[g].name,
      },
      id: {
        type: "SINGLE_LINE_TEXT",
        value: graphSetting.reports[g].id,
      },
      chartType: {
        type: "SINGLE_LINE_TEXT",
        value: graphSetting.reports[g].chartType,
      },
      chartMode: {
        type: "SINGLE_LINE_TEXT",
        value: graphSetting.reports[g].chartMode,
      },
    },
  });
});

//レコードのテーブルに行を挿入
obj.record.テーブル.value = tRows;
kintone.app.record.set(obj);
tRows는 표 행을 포함하는 배열입니다.
호출된 도표 설정은 키로 지정해야 하며, 그룹의 요소 번호가 아니라 키로 지정해야 합니다Object.keys(graphSetting.reports).forEach(~의 감각으로 순환하다.graphSetting.reports[g].name, graphSetting.reports[g].id 등은 도표의 설정에서 가져온 것이다.각각name, id,chartType,chartMode
  • name: 차트 이름
  • id: 차트 ID
  • chartType:차트 유형
  • chartMode:차트 표시 모드
  • 네.
    자세한 내용은 차트 API 문서의 응답 매개 변수를 확인하십시오.
    ↓ 차트 API(GET) 문서
    코드는 모두 여기서↓

    동작 확인 & 집계


    이렇게 움직이는 거예요?
    (어쨌든 이동하는 코드, 오류 처리 등은 적당히 작성해 주세요!)

    그러므로
    그래프 설정을 가져왔습니다!
    다음에는 이 앱을 조금 진화시켜 차트 설정을 업데이트하고 추가 차트를 만드는 앱을 만들고 싶습니다.

    좋은 웹페이지 즐겨찾기