kintoneの一覧ビューを取得、設定するAPIを利用すれば、他のドメインやアプリの一覧ビューをコピーしたり、複数の一覧ビューを一括設定したりできます。
今回はこの機能を使って、プラグインの設定画面からカスタマイズビューを作成する方法を紹介します。
プラグインでオリジナルの画面やグラフを表示したい場面はよくあると思います。
kintoneにはカスタマイズビューと呼ばれる機能があり、一覧ビューの見た目や動作をJavaScriptで自由にカスタマイズできます。
下記は参考Tipsです。
カスタマイズビューはJavaScriptカスタマイズを想定した機能のため、これまでプラグインには対応していませんでした。
しかし、一覧ビューの取得、設定APIを使えば、カスタマイズビューに対応したkintoneプラグインを制作できます。
これにより、自由な見た目のプラグインを開発、配布できます。
以下に手順を説明します。
プラグインのひな型を作成する
固定リンクがコピーされました
kintoneプラグイン開発手順
にしたがって、manifestファイルを作成します。
ここでは、単純な保存ボタンのみの設定画面を作成します。
保存ボタンのクリックイベントで既存の一覧情報を取得し、カスタマイズビューの設定を加えて保存します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
/*
* sample program
* Copyright (c) 2016 Cybozu
*
* Licensed under the MIT License
* https://opensource.org/license/mit/
*/
jQuery.noConflict();
(($) => {
'use strict';
const $submit = $('#plugin-submit');
const VIEW_NAME = 'カスタムビューサンプル';
// 保存ボタンのクリックイベント
$submit.click((e) => {
kintone.api(kintone.api.url('/k/v1/preview/app/views', true), 'GET', {app: kintone.app.getId()}).then((resp) => {
const req = $.extend(true, {}, resp);
req.app = kintone.app.getId();
// カスタムビューが存在しなければ追加
if (!req.views[VIEW_NAME]) {
// 先頭にする
for (const key in req.views) {
if (req.views.obj.hasOwnProperty) {
req.views[key].index = Number(req.views[key].index) + 1;
}
}
req.views[VIEW_NAME] = {
type: 'CUSTOM',
name: VIEW_NAME,
html: '<div id=\'custom-view-container\'></div>',
filterCond: '',
sort: 'レコード番号 asc',
pager: false,
index: 0
};
}
kintone.api(kintone.api.url('/k/v1/preview/app/views', true), 'PUT', req).then((resp2) => {
// 作成したビューIDを保存する
const viewId = resp2.views[VIEW_NAME].id;
kintone.plugin.app.setConfig({viewId: viewId});
});
});
});
})(jQuery);
|
プラグインの設定で保存したビューIDかどうかを判定して、カスタマイズビューを描画します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
/*
* sample program
* Copyright (c) 2016 Cybozu
*
* Licensed under the MIT License
* https://opensource.org/license/mit/
*/
jQuery.noConflict();
(($, PLUGIN_ID) => {
'use strict';
kintone.events.on('app.record.index.show', (event) => {
const config = kintone.plugin.app.getConfig(PLUGIN_ID);
if (!config) {
return false;
}
// プラグインで作成したカスタムビューかどうかのチェック
if (event.viewId !== config.viewId) {
return event;
}
// カスタムビューにデータをセット
const $container = $('#custom-view-container');
// レコード取得（ページネーション:falseなので自分で取得する必要がある）
const query = kintone.app.getQuery();
kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
app: kintone.app.getId(),
query: query
}).then((resp) => {
for (let i = 0; i < resp.records.length; i++) {
const record = resp.records[i];
$container.append($('<div></div>').text(record['文字列__1行_'].value));
}
});
return event;
});
})(jQuery, kintone.$PLUGIN_ID);
|
プラグインの設定保存ボタンをクリックすると、カスタマイズビューが作成されています。
保存ボタンをクリックすると、カスタマイズビューが作成されています。
一覧画面を開くと、プラグインで実装されたカスタマイズビューが表示されます。
いかがでしたでしょうか。
カスタマイズビューを使ったガントチャートプラグインやオセロプラグインなど、夢が膨らみますね！
