Use radio buttons to open field groups

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.

groupA.PNG 

 

 

The below gif shows how this looks in action.

groupB.gif

Sample Code

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

Notes

Refer to the Tutorial page, on how to add scripts to your app.

Was this article helpful?
0 out of 0 found this helpful
Comments
Please sign in to leave a comment.