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