[kintoone] 응용 프로그램에 차트 API를 통해 얻은 차트 정보를 표시합니다.
9982 단어 kintone
차트 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
이번 주인공 앱은
'처음부터 만들기'로 볼록점을 만든다.
이런 외관 & 필드를 원합니다.
적용 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자세한 내용은 차트 API 문서의 응답 매개 변수를 확인하십시오.
↓ 차트 API(GET) 문서
코드는 모두 여기서↓
동작 확인 & 집계
이렇게 움직이는 거예요?
(어쨌든 이동하는 코드, 오류 처리 등은 적당히 작성해 주세요!)
그러므로
그래프 설정을 가져왔습니다!
다음에는 이 앱을 조금 진화시켜 차트 설정을 업데이트하고 추가 차트를 만드는 앱을 만들고 싶습니다.
Reference
이 문제에 관하여([kintoone] 응용 프로그램에 차트 API를 통해 얻은 차트 정보를 표시합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/juri_don/items/eaf9d164a0fa1ecaa043
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여([kintoone] 응용 프로그램에 차트 API를 통해 얻은 차트 정보를 표시합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/juri_don/items/eaf9d164a0fa1ecaa043텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)