今回は、レコード詳細画のボタンワンクリックで、担当者フィールド（ユーザー選択フィールド）に自分を追加する方法を紹介します。
たとえば、あなたは今タスク一覧のレコード詳細を見ています。
そこにはまだ担当者を割り振っていないタスクがズラリ。
そんな時あなたは自分のやるべきタスクが登録されているのを発見しました。
「あ、これは自分のタスクだな」→ レコード編集を開く → ユーザー選択から自分を選択して → 保存を押します。
なんて面倒ですよね。
こんな「あとチョットこうだったら」をカスタマイズで改善して便利にしちゃいましょう。
デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/69/
ログイン情報は
cybozu developer networkデモ環境
で確認してください。
以下のフィールドを配置したアプリを作成します。
| フィールドの種類 |
フィールド名 |
フィールドコード（要素ID） |
| ユーザー選択 |
担当者 |
member |
| スペース |
- |
btnspace |
JavaScriptでスペースフィールドに作成したボタンを配置します。
ボタンを押すと「担当者」に自分を追加します。
- ボタンの作成とボタンイベント監視登録を行います。
- 担当者に自分を追加します。
ボタンの作成とイベントリスナーの登録
固定リンクがコピーされました
まず、レコード詳細画面を開いたときにボタンを作成するのでイベント取得を設定します。
1
2
3
4
5
6
7
|
// グローバル変数memberを定義
let member;
// イベントの取得
kintone.events.on('app.record.detail.show', (event) => {
member = event.record.member.value;
// ...
});
|
次に、スペースの子要素にボタンを作成します。
1
2
3
4
5
6
7
8
9
10
|
// スペース要素の取得
const se = kintone.app.record.getSpaceElement('btnspace');
// ボタンの作成
const btn = document.createElement('button');
btn.appendChild(document.createTextNode(' 担当者に自分を追加 '));
btn.id = 'btnAddMine';
btn.name = 'btnAddMine';
se.appendChild(btn);
btn.style.marginTop = '30px';
|
次にボタンのイベント監視を設定します。
ボタンが押されたらaddMemberMine()関数の呼び出しをします。
1
|
btn.addEventListener('click', addMemberMine);
|
これで、ボタンのクリックイベントでaddMemberMine()関数が動作するようになりました。
では次にボタンを押したときの動作となるaddMemberMine()の処理を見ていきましょう。
作業者に自分を追加する
固定リンクがコピーされました
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
|
function addMemberMine() {
// ログインユーザの情報を取得
const loginuser = kintone.getLoginUser();
const objParam = {};
objParam.app = kintone.app.getId(); // アプリ番号
objParam.id = kintone.app.record.getId(); // レコード番号
objParam.record = {};
objParam.record.member = {};
objParam.record.member.value = [];
// すでに担当者になっているメンバーを追加する
for (let i = 0; i < member.length; i++) {
objParam.record.member.value[i] = {};
objParam.record.member.value[i].code = {};
objParam.record.member.value[i].code = member[i].code;
}
// ログインユーザを追加する
objParam.record.member.value[member.length] = {};
objParam.record.member.value[member.length].code = {};
objParam.record.member.value[member.length].code = loginuser.code;
// レコードを更新する
kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', objParam, (resp) => {
// 成功時は画面をリロード
location.reload(true);
});
}
|
以上、ワンクリックで担当者に自分を追加は終了です。
