Add Users to the User Field with One Click

Contents

Overview

This article introduces how to add the logged-in user (the User viewing the record) to a User selection field with one click. Without the aid of this customization, users need to navigate to the Record Edit page to add themselves to the User selection field, and click on Save to apply the changes.

Sample Image

An event is triggered when the Record Details page is accessed, and a button is displayed on a Blank space field. Clicking the button adds the logged-in user to the User selection field.

Prepare the App

Create an App (External link) with the following fields and settings.

Field Type Field Name Field Code / Element ID
User selection Member member
Blank space - btnspace

After creating the App, add a new record with no data inside.

Sample Code

Prepare the following JavaScript code in a text editor and navigate to the Kintone App's settings. Upload the file into the Upload JavaScript for PC option of the JavaScript and CSS Customization settings (External link) .

 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

(function() {
  'use strict';

  // Create a variable
  var member;

  function addMemberMine() {

    var loginUser = kintone.getLoginUser();

    var objParam = {};
    objParam.app = kintone.app.getId(); // The App ID
    objParam.id = kintone.app.record.getId(); // The Record ID
    objParam.record = {};
    objParam.record.member = {};
    objParam.record.member.value = [];

    // If there are other users in the User field, also add those users
    for (var 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;
    }

    // Add the logged-in user
    objParam.record.member.value[member.length] = {};
    objParam.record.member.value[member.length].code = {};
    objParam.record.member.value[member.length].code = loginUser.code;

    // Refresh the page
    kintone.api('/k/v1/record', 'PUT', objParam, function(resp) {
      // Refresh the page on success
      location.reload(true);
    });
  }

  // Add a Record Details event
  kintone.events.on('app.record.detail.show', function(event) {
    member = event.record.member.value;

    // Get the element of the Blank space field
    var se = kintone.app.record.getSpaceElement('btnspace');

    // Create a button
    var btn = document.createElement('button');
    btn.appendChild(document.createTextNode(' Add yourself '));
    btn.id = 'btnAddMine';
    btn.name = 'btnAddMine';
    se.appendChild(btn);
    btn.style.marginTop = '30px';
    btn.addEventListener('click', addMemberMine);
  });

})();

After saving the settings and clicking on Update App, navigate to a record. A button should appear where the Blank space field is placed. Users who click the button should automatically be added in to the Member field.

Code Explanation

Set the app.record.detail.show event

The main code is set to run when the user navigates to the Record Details page.

1
2
3

  kintone.events.on('app.record.detail.show', function(event) {
   //...
  });

Create a button

The getSpaceElement method is used to retrieve the element of the Blank space field. A button is created and appended to the element.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// Get the element of the Blank space field
var se = kintone.app.record.getSpaceElement('btnspace');

// Create a button
var btn = document.createElement('button');
btn.appendChild(document.createTextNode(' Add yourself '));
btn.id = 'btnAddMine';
btn.name = 'btnAddMine';
se.appendChild(btn);
btn.style.marginTop = '30px';

Add an event listener to the button

An event listener is set on the button. When the button is clicked, the addMemberMine function is called.

1

btn.addEventListener('click', addMemberMine);

Call the Update Record API

The addMemberMine function calls Kintone's Update Record API to add the logged-in user to the User selection field. The parameters for the API are created in this method, and takes into account for any other users already listed in the User selection field.

 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() {

  // Get info of the logged-in user
  var loginUser = kintone.getLoginUser();

  var objParam = {};
  objParam.app = kintone.app.getId(); // The App ID
  objParam.id = kintone.app.record.getId(); // The Record ID
  objParam.record = {};
  objParam.record.member = {};
  objParam.record.member.value = [];

  // If there are other users in the User field, also add those users
  for (var 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;
  }

  // Add the logged-in user
  objParam.record.member.value[member.length] = {};
  objParam.record.member.value[member.length].code = {};
  objParam.record.member.value[member.length].code = loginUser.code;

  // Refresh the page
  kintone.api('/k/v1/record', 'PUT', objParam, function(resp) {
    // Refresh the page on success
    location.reload(true);
  });
}