今回はアプリからワンタッチでゲストスペースを作成するJavaScriptカスタマイズを紹介したいと思います。
これはテンプレート化されたスペースを、ゲストユーザ別に利用していて、それらのスペースをアプリで管理する場合に有効です。
毎回手動でスペースを作成して、スペース内にアプリを配置～ としていた手間を、レコード詳細画面に配置したボタンワンタッチで解決できます。
ではさっそく見ていきましょう。
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
/*
* sample program
* Copyright (c) 2014 Cybozu
*
* Licensed under the MIT License
* https://opensource.org/license/mit/
*/
(function() {
'use strict';
// テンプレートゲストスペースID
const SP_TEMPLATE_ID = 2;
function createRequestBody() {
// レコード情報を取得
const record = kintone.app.record.get().record;
// ユーザ選択フィールドの取得
const users = record['ユーザー選択'].value;
// スペースメンバの設定
const members = (function() {
const array = [];
for (const i in users) {
if (!Object.prototype.hasOwnProperty.call(users, i)) {
continue;
}
const member = {
entity: {
type: 'USER',
code: users[i].code
},
isAdmin: true // 管理者フラグ
};
array.push(member);
}
return array;
})(record);
return {
id: SP_TEMPLATE_ID,
name: record['ゲストスペース名'].value,
isGuest: true, // ゲストスペースフラグ
members: members,
};
}
function createGuestSpace() {
// リクエストの作成
const params = createRequestBody();
// スペース作成API実行
const url = kintone.api.url('/k/v1/template/space', true);
return kintone.api(url, 'POST', params).then((resp) => {
alert('スペース作成が完了しました');
}).catch((e) => {
alert('スペース作成時にエラーが発生しました');
});
}
kintone.events.on('app.record.detail.show', (event) => {
// 増殖バグ対策
if (document.getElementById('menuButton') !== null) {
return;
}
const menuButton = document.createElement('button');
menuButton.id = 'menuButton';
menuButton.innerHTML = 'ゲストスペース作成';
menuButton.onclick = function() {
createGuestSpace();
};
kintone.app.record.getHeaderMenuSpaceElement().appendChild(menuButton);
});
})();
|
最初に、レコード詳細画面の表示時にスペース作成ボタンを表示します。
60
61
62
63
64
65
66
67
68
69
70
71
72
|
kintone.events.on('app.record.detail.show', (event) => {
// 増殖バグ対策
if (document.getElementById('menuButton') !== null) {
return;
}
const menuButton = document.createElement('button');
menuButton.id = 'menuButton';
menuButton.innerHTML = 'ゲストスペース作成';
menuButton.onclick = function() {
createGuestSpace();
};
kintone.app.record.getHeaderMenuSpaceElement().appendChild(menuButton);
});
|
次にスペースボタンが押されたときのリクエスト生成処理を行います。
スペース作成APIではいろいろな設定パラメーターが用意されています。
今回は必要最小限の4つのパラメーターを設定していきます。
スペース作成時のパラメーター
固定リンクがコピーされました
id：ベースとなるテンプレートスペースのIDname：作成するスペースの名前isGuest：ゲストではないスペースの場合false、ゲストスペースの場合truemembers：スペースに含む正規ユーザ（必ず1人以上設定する必要あり）
参考：
スペースを作成する
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
|
function createRequestBody() {
// 開いているレコード情報を取得
const record = kintone.app.record.get().record;
// ユーザ選択フィールドの取得
const users = record['ユーザー選択'].value;
// スペースメンバの設定
const members = (function() {
const array = [];
for (const i in users) {
if (!Object.prototype.hasOwnProperty.call(users, i)) {
continue;
}
const member = {
entity: {
type: 'USER',
code: users[i].code
},
isAdmin: true // 管理者フラグ
};
array.push(member);
}
return array;
})(record);
return {
id: SP_TEMPLATE_ID,
name: record['ゲストスペース名'].value,
isGuest: true, // ゲストスペースフラグ
members: members,
};
}
|
最後に作成したリクエストをスペースAPIを使って登録します。
51
52
53
54
55
56
57
|
// スペース作成API実行
const url = kintone.api.url('/k/v1/template/space', true);
return kintone.api(url, 'POST', params).then((resp) => {
alert('スペース作成が完了しました');
}).catch((e) => {
alert('スペース作成時にエラーが発生しました');
});
|
