レコード詳細画面でワンクリックで担当者に自分を追加するワザ

著者名:菊地 宏司

目次

はじめに

今回はレコード詳細画からボタンワンクリックで担当者フィールドへ自分を追加する方法について紹介しようと思います。

たとえば、あなたは今タスク一覧のレコード詳細を見ています。
そこにはまだ担当者を割り振っていないタスクがズラリ。
そんな時あなたは自分のやるべきタスクが登録されているのを発見しました。
「あ、これは自分のタスクだな」→ レコード編集を開く → ユーザー選択から自分を選択して → 保存を押します。

なんて面倒ですよね。

こんな「あとチョットこうだったら」をカスタマイズで改善して便利にしちゃいましょう。

デモ環境

デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/69/ (External link)

ログイン情報は cybozu developer network デモ環境 で確認してください。

実装イメージ

レコード詳細画面には、ユーザー選択フィールドと JavaScript でスペースフィールドに作成したボタンを配置します。

ボタンを押すと「担当者」に自分を追加します。

実装の手順と流れ

  1. ボタンの作成とボタンイベント監視登録を行います。
  2. 担当者に自分を追加します。

ボタンの作成とイベントリスナーの登録

まず、レコード詳細画面を開いたときにボタンを作成するのでイベント取得を設定します。

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);
  });
}

以上、ワンクリックで担当者に自分を追加は終了です。

information

この Tips は、2014 年 4 月版 kintone で動作を確認しています。