Open and Close Field Groups Using Radio Buttons

Contents

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.

Screenshot: The relationship is shown between the Radio button field and the Field group.

Prepare the App

Create an App (External link) 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.

Animated Gif: Users use the radio buttons to open or close fields groups.