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.

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

/*
 * Open/close group fields depending on radio button choice
 *
 * Licensed under the MIT License
 */
(() => {
  'use strict';

  // Map Radio button to each Field group
  const groupMap = {
    'Sales Inquiry': 'group_sales',
    'Support': 'group_support',
    'Partnership': 'group_partnership',
    'Other': 'group_other'
  };

  // List of all Field groups
  const groupIds = Object.values(groupMap);

  // Target events
  const eventsSubmit = [
    'app.record.detail.show',
    'app.record.create.show',
    'app.record.edit.show',
    'app.record.create.change.radio_button',
    'app.record.edit.change.radio_button'
  ];

  kintone.events.on(eventsSubmit, (event) => {
    const radioButtonValue = event.record.radio_button.value;

    // Close all Field groups first
    groupIds.forEach(id => kintone.app.record.setGroupFieldOpen(id, false));

    // Open only the field group that matches the Radio button value
    const openGroupId = groupMap[radioButtonValue];
    if (openGroupId) {
      kintone.app.record.setGroupFieldOpen(openGroupId, true);
    }
    return event;
  });
})();

The below gif shows how this looks in action.