Overview
This sample code shows and hides fields depending on the choices selected in the Check box field.
Sample Image
Prepare the App
Create an App
with the following fields and settings.
Field Type |
Field Name |
Field Code |
Notes |
Check box |
Choice |
Choice |
|
Text |
Text |
TextField |
|
Table |
Table |
TableField |
See the table below for the fields to place inside. |
Field group |
Group |
GroupField |
See the group below for the fields to place inside. |
Set the following fields and settings for the Table field.
Field Type |
Field Name |
Field Code |
Notes |
Text |
Text |
Table_text |
|
Number |
Number |
Table_number |
|
Set the following fields and settings for the Group field.
Field Type |
Field Name |
Field Code |
Notes |
Text |
Text |
Group_text |
|
Number |
Number |
Group_number |
|
Sample Code
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
|
// Show and hide fields based on check box choices
(function() {
'use strict';
var CHOICE = 'Choice'; // field code of checkbox field
var TEXT = 'TextField'; // field code of text field to display/hide
var TABLE = 'TableField'; // field code of table field to display/hide
var GROUP = 'GroupField'; // field code of group field to display/hide
var events = ['app.record.create.show', 'app.record.edit.show',
'app.record.create.change.' + CHOICE, 'app.record.edit.change.' + CHOICE];
kintone.events.on(events, function(event) {
var record = event.record;
var choiceVal = record[CHOICE].value;
// State which checkbox labels will display/hide fields
if (choiceVal.indexOf('Text') >= 0) {
kintone.app.record.setFieldShown(TEXT, true);
} else {
kintone.app.record.setFieldShown(TEXT, false);
}
if (choiceVal.indexOf('Table') >= 0) {
kintone.app.record.setFieldShown(TABLE, true);
} else {
kintone.app.record.setFieldShown(TABLE, false);
}
if (choiceVal.indexOf('Group') >= 0) {
kintone.app.record.setFieldShown(GROUP, true);
} else {
kintone.app.record.setFieldShown(GROUP, false);
}
return event;
});
}());
|