Overview
This sample opens and closes different Field groups depending on the choice selected in the Radio button field.
Sample Image
Each choice in the radio button field will open their own field groups and close all others, as shown in the image below.
Prepare the App
Create an App
with the following fields and settings.
Field Type |
Field Name |
Field Code |
Notes |
Radio button |
Inquiry Type |
radio_button |
Options: Sales Inquiry, Support, Partnership, Other |
Field group |
Sales Inquiry |
group_sales |
Place any number of fields inside. |
Field group |
Support |
group_support |
Place any number of fields inside. |
Field group |
Partnership |
group_partnership |
Place any number of fields inside. |
Field group |
Other |
group_other |
Place any number of fields inside. |
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
/*
* Open/close group fields depending on radio button choice
*
* Licensed under the MIT License
*/
(function() {
'use strict';
// define variables
var GROUP1 = 'group_sales'; // field code of Field Group 1
var GROUP2 = 'group_support'; // field code of Field Group 2
var GROUP3 = 'group_partnership'; // field code of Field Group 3
var GROUP4 = 'group_other'; // field code of Field Group 4
var RADIOBUTTON = 'radio_button'; // field code of radio button field
var FIELDVALUE1 = 'Sales Inquiry'; // first value of radio button field
var FIELDVALUE2 = 'Support'; // second value of radio button field
var FIELDVALUE3 = 'Partnership'; // third value of radio button field
var FIELDVALUE4 = 'Other'; // fourth value of radio button field
var eventsSubmit = ['app.record.detail.show',
'app.record.create.show',
'app.record.edit.show',
'app.record.create.change.' + RADIOBUTTON,
'app.record.edit.change.' + RADIOBUTTON];
kintone.events.on(eventsSubmit, function(e) {
var record = e.record;
var radioButtonValue = record[RADIOBUTTON].value;
// First, close all Field Groups
kintone.app.record.setGroupFieldOpen(GROUP1, false);
kintone.app.record.setGroupFieldOpen(GROUP2, false);
kintone.app.record.setGroupFieldOpen(GROUP3, false);
kintone.app.record.setGroupFieldOpen(GROUP4, false);
// open/close Field Groups depending on radio button choice
switch (radioButtonValue) {
case FIELDVALUE1:
kintone.app.record.setGroupFieldOpen(GROUP1, true);
break;
case FIELDVALUE2:
kintone.app.record.setGroupFieldOpen(GROUP2, true);
break;
case FIELDVALUE3:
kintone.app.record.setGroupFieldOpen(GROUP3, true);
break;
case FIELDVALUE4:
kintone.app.record.setGroupFieldOpen(GROUP4, true);
break;
}
});
})();
|
The below gif shows how this looks in action.