Edited at

kintone JavaScript カスタマイズ CheatSheet

kintone カスタマイズをする際によく使うコードを集めてみました。


kintone


kintone JavaScript API


情報取得

アプリのIDを取得する

var appId = kintone.app.getId();


詳細画面


詳細の空白スペースにボタンを設置する

kintone.app.record.getHeaderMenuSpaceElement().appendChild(myDetailButton);


フィールド要素取得

kintone.app.record.getFieldElement(myFieldEl);


スペースフィールドの要素を取得

kintone.app.record.getSpaceElement(mySpaceEl);


詳細画面のメニューの上側の空白部分にボタンを設置

kintone UI Component 利用

(function() {

"use strict";
/**
* レコード詳細画面表示イベント
*
*/

var kintoneEvent;
(function () {
kintone.events.on("app.record.detail.show", function (event) {
kintoneEvent = event;
var kintoneSpaceElement = kintone.app.record.getHeaderMenuSpaceElement();
var button = new kintoneUIComponent.Button({ text: 'Submit' });
console.log(button);
kintoneSpaceElement.appendChild(button.render());

button.on('click', function(e){
viewAlert(kintoneEvent);
});

// 処理が少ない時は直接ここに書いても良い。
// button.on('click', function(e){
// alert('kintone event =>' + e);
// });

});
})();

// イベントハンドラを受けての処理を記述
var viewAlert = e => alert('kintone event =>' + e);

})();


一覧画面

一覧の空白スペースにボタンを設置する

kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);


アプリの設計情報取得

コーディング時、アプリのフィールドコードを確認する際にChromeDevToolのコンソールに貼り付けて使ってます。("app": の後にアプリIDを入力します)

kintone.api(kintone.api.url('/k/v1/form', true), 'GET', {"app":1}, function(resp) {

// success
console.log(resp);
}, function(error) {
// error
console.log(error);
});

アプリのフォームの設定を取得します。

主に、プラグインの作成時、仕様書を起こす際のレコードレイアウト作成時に使っています。

var body = {

"app": kintone.app.getId()
};
kintone.api(kintone.api.url('/k/v1/app/form/fields', true), 'GET', body, function(resp) {
// success
console.log(resp);
}, function(error) {
// error
console.log(error);
});

フォームのレイアウトを取得する

var body = {

"app": kintone.app.getId()
};

kintone.api(kintone.api.url('/k/v1/app/form/layout', true), 'GET', body, function(resp) {
// success
console.log(resp);
}, function(error) {
// error
console.log(error);
});


スペース


スペース情報の取得

スペース内アプリ一覧等が取得出来ます。

kintone.api(kintone.api.url('/k/v1/space', true), 'GET', {"id": 1}, function(resp) {

// success
console.log(resp);
}, function(error) {
// error
console.log(error);
});


レコード


レコード1行取得

kintone REST API で取得されるレコードレイアウト確認に使ってます。

var body = {

"app": 1,
"id": 1001
};
kintone.api(kintone.api.url('/k/v1/record', true), 'GET', body, function(resp) {
// success
console.log(resp);
}, function(error) {
// error
console.log(error);
});

var body = {

"app": kintone.app.getId(),
"id": kintone.app.record.getId()
};

kintone.api(kintone.api.url('/k/v1/record', true), 'GET', body, function(resp) {
// success
console.log(resp);
}, function(error) {
// error
console.log(error);
});

アプリIDとレコードIDをAPIでセットしても良い。

良い感じでJSONを整形する

var body = {

"app": kintone.app.getId(),
"id": kintone.app.record.getId()
};

kintone.api(kintone.api.url('/k/v1/record', true), 'GET', body, function(resp) {
// success
console.log(JSON.stringify(resp, null, 4));
}, function(error) {
// error
console.log(error);
});


レコード一括取得(クエリ指定)


var body = {
"app": 1,
"query": "updated_time > \"2012-02-03T09:00:00+0900\" and updated_time < \"2012-02-03T10:00:00+0900\" order by $id asc limit 10 offset 0",
"fields": ["$id", "created_time", "dropdown"]
};

kintone.api(kintone.api.url('/k/v1/records', true), 'GET', body, function(resp) {
// success
console.log(resp);
}, function(error) {
// error
console.log(error);
});


一覧のクエリ文字列を取得する


var condition = kintone.app.getQueryCondition();
console.log(condition);

// order by, limit, offset付きで取得する場合はこちら
var condition = kintone.app.getQuery();
console.log(condition);


フィールドのchangeイベントで書き換えられた値を別フィールドにセットする


(function() {
"use strict";
kintone.events.on(["app.record.edit.change.日付", "app.record.create.change.日付"], function(event) {

console.log(event);
let changesValue = event.changes.field.value;
console.log(changesValue);
let record = event.record;
// var record = kintone.app.record.get();
// record.record['最新日付'].value = '書き換えた文字列';
// kintone.app.record.set(record);
// changes.field.value
record['最新日付'].value = changesValue;
return event;
});
})();


jQuery


jQuery UI

ダイアログ


<script src="https://js.cybozu.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://js.cybozu.com/jqueryui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://js.cybozu.com/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

var compiled = _.template('<div id="dialog" title="Hello"> Hello,<%= echo %></div>')({echo: 'World'});
var elMyBt = _.template('<button id="myBt">click</button>');
$(kintone.app.record.getHeaderMenuSpaceElement()).append(elMyBt);
$('#myBt').on('click', function() {
viewDialog();
});
function viewDialog() {
$(compiled).dialog({autoOpen: false, modal: true}).dialog('open');
}


JavaScript


関数

関数を作る


function square(number) {
return number * number;
}


Promise


var funcA = function promiseSampleA() {
// Promiseを返す処理A
};
var funcB = function promiseSampleB() {
// Promiseを返す処理B
};
function main() {
return Promise.all([promiseSampleA(), promiseSampleB()]);
}
// 実行例
main().then(function (value) {
console.log(value);
}).catch(function(error){
console.error(error);
});