Generate Text to Text field via checkbox?

Weerapat_Tangkanakul · April 12, 2024, 9:09am

Question / Problem

Current Situation

I want to add the text value when the user clicks on the checkbox.
The value can be stacked and deleted when unchecking the checkbox

Code / Attempts

Share your code and setup

(function() {
"use strict";

var events = [
    'app.record.create.change.Air_Export',
    'app.record.edit.change.Air_Export',
    'app.record.create.change.Air_Import',
    'app.record.edit.change.Air_Import',
    'app.record.create.change.Sea_Export',
    'app.record.edit.change.Sea_Export',
    'app.record.create.change.Sea_Import',
    'app.record.edit.change.Sea_Import',
    'app.record.create.change.Warehouse',
    'app.record.edit.change.Warehouse',
    'app.record.create.change.Packing',
    'app.record.edit.change.Packing',
    'app.record.create.change.Removal',
    'app.record.edit.change.Removal',
    'app.record.create.change.Crossborder',
    'app.record.edit.change.Crossborder',
    'app.record.create.change.Transport',
    'app.record.edit.change.Transport',
    'app.record.create.change.PDF_Field',
    'app.record.edit.change.PDF_Field'
];

// Add event listener to the checkbox field
kintone.events.on(events, function(event)  {
    var record = event.record;
    var statusValue_AEX = record['Air_Export'].value;
    var statusValue_AIM = record['Air_Import'].value;
    var statusValue_OEX = record['Sea_Export'].value;
    var statusValue_OIM = record['Sea_Import'].value;
    var statusValue_WH = record['Warehouse'].value;
    var statusValue_PK = record['Packing'].value;
    var statusValue_RMV = record['Removal'].value;
    var statusValue_CB = record['Crossborder'].value;
    var statusValue_TR = record['Transport'].value;
    var textareaValue = record['PDF_Field'].value;;

    // If checkbox is checked, update textarea with custom message
    if (statusValue_AEX == '✔') {
        textareaValue = "Air Export ";
        record['PDF_Field'].value = textareaValue;
        console.log('Event triggered. Status Value:', statusValue_AEX);
    } 
    if (statusValue_AIM == '✔') {
        textareaValue = "Air Import ";
        record['PDF_Field'].value = textareaValue;
        console.log('Event triggered. Status Value:', statusValue_AIM);
    } 
    if (statusValue_OEX == '✔') {
        textareaValue = "Sea Export ";
        record['PDF_Field'].value = textareaValue;
        console.log('Event triggered. Status Value:', statusValue_OEX);
    } 
    if (statusValue_OIM ==='✔') {
        textareaValue = "Sea Import ";
        record['PDF_Field'].value = textareaValue;
        console.log('Event triggered. Status Value:', statusValue_OIM);
    } 
    if (statusValue_WH == '✔') {
        textareaValue = "Warehouse ";
        record['PDF_Field'].value = textareaValue;
        console.log('Event triggered. Status Value:', statusValue_WH);
    } 
    if (statusValue_PK == '✔') {
        textareaValue = "Packing ";
        record['PDF_Field'].value = textareaValue;
        console.log('Event triggered. Status Value:', statusValue_PK);
    } 
    if (statusValue_RMV == '✔') {
        textareaValue = "Removal ";
        record['PDF_Field'].value = textareaValue;
        console.log('Event triggered. Status Value:', statusValue_RMV);
    } 
    if (statusValue_CB == '✔') {
        textareaValue = "Crossborder ";
        console.log('Event triggered. Status Value:', statusValue_CB);
    } 
    if (statusValue_TR == '✔') {
        textareaValue = "Transport ";
        record['PDF_Field'].value = textareaValue;
        console.log('Event triggered. Status Value:', statusValue_TR);
    } else {
        textareaValue = ""; // If checkbox is unchecked, clear the textarea
    }
    return event;
});

})();

Here's the field that I use, the symbol in the check box Is --> ✓

Chris · April 12, 2024, 5:16pm

Hello @Weerapat_Tangkanakul
Here is an example script that automatically populates values in a text field when a checkbox is selected. Please note that the values to be populated are specified directly within the script.

(function() {
    'use strict';

    var checkboxMappings = {
        'Check_box_1': 'Red',
        'Check_box_2': 'Green',
        'Check_box_3': 'Blue' // Add more mappings as needed
    };

    // Get all checkbox field codes
    var checkboxFieldCodes = Object.keys(checkboxMappings);

    // Create event handlers for both create and edit record events
    var eventTypes = checkboxFieldCodes.reduce(function(acc, code) {
        return acc.concat(['app.record.create.change.' + code, 'app.record.edit.change.' + code]);
    }, []);

    kintone.events.on(eventTypes, function(event) {
        var record = event.record;
        var textField = record['Text_0'];

        // Find which checkbox was just acted upon and update accordingly
        checkboxFieldCodes.forEach(function(code) {
            if (event.type.endsWith(code)) {
                // Handle the checkbox that was changed
                if (record[code].value.includes('✔')) {
                    // Set text field based on the checkbox mapping
                    textField.value = checkboxMappings[code];
                    
                    // Uncheck all other checkboxes
                    checkboxFieldCodes.forEach(function(otherCode) {
                        if (otherCode !== code) {
                            record[otherCode].value = [];
                        }
                    });
                }
            }
        });

        return event;
    });
})();

Weerapat_Tangkanakul · April 18, 2024, 6:30am

I added my mapping on this code but after I tried it didn't show the value that I set up in the textbox. There is no error in the console either.

(function() {
'use strict';

var checkboxMappings = {
    'Air_Export': 'Air Export',
    'Air_Import': 'Air Import',
    'Sea_Export': 'Sea Export',
    'Sea_Import': 'Sea Import',
    'Warehouse' : 'Warehouse',
    'Packing'   : 'Packing',
    'Removal'   : 'Removal',
    'Crossborder': 'Cross Border',
    'Transport' : 'Transport',
     // Add more mappings as needed
};

// Get all checkbox field codes
var checkboxFieldCodes = Object.keys(checkboxMappings);

// Create event handlers for both create and edit record events
var eventTypes = checkboxFieldCodes.reduce(function(acc, code) {
    return acc.concat(['app.record.create.change.' + code, 'app.record.edit.change.' + code]);
}, []);

kintone.events.on(eventTypes, function(event) {
    var record = event.record;
    var textField = record['PDF_Field'];

    // Find which checkbox was just acted upon and update accordingly
    checkboxFieldCodes.forEach(function(code) {
        if (event.type.endsWith(code)) {
            // Handle the checkbox that was changed
            if (record[code].value.includes('✔')) {
                // Set text field based on the checkbox mapping
                textField.value = checkboxMappings[code];
                
                // Uncheck all other checkboxes
                checkboxFieldCodes.forEach(function(otherCode) {
                    if (otherCode !== code) {
                        record[otherCode].value = [];
                    }
                });
            }
        }
    });

    return event;
});

})();

Chris · April 18, 2024, 5:23pm

Here's the revised one:

(function() {
    'use strict';

    var checkboxMappings = {
        'Check_box_1': 'Red',
        'Check_box_2': 'Green',
        'Check_box_3': 'Blue',
        'Check_box_4': 'Yellow', 
        'Check_box_5': 'Black',
        'Check_box_6': 'Purple' // Add more mappings as needed
    };

    var checkboxFieldCodes = Object.keys(checkboxMappings);

    var eventTypes = checkboxFieldCodes.reduce(function(acc, code) {
        return acc.concat(['app.record.create.change.' + code, 'app.record.edit.change.' + code]);
    }, []);

    console.log('Registered Events:', eventTypes);  // Debug to check registered events

    kintone.events.on(eventTypes, function(event) {
        var record = event.record;
        var textField = record['Text_0'];

        console.log('Event Triggered:', event.type);  // Debug to see which event was triggered

        checkboxFieldCodes.forEach(function(code) {
            console.log(`Checking ${code}`);  // Debug to log each checkbox being checked

            if (event.type.endsWith(code) && record[code].value.includes('✔')) {
                console.log(`${code} was checked.`);  // Debug to confirm checkbox check
                textField.value = checkboxMappings[code];
                
                checkboxFieldCodes.forEach(function(otherCode) {
                    if (otherCode !== code) {
                        record[otherCode].value = [];
                    }
                });
            }
        });

        return event;
    });
})();

Weerapat_Tangkanakul · April 19, 2024, 7:03am

I change the value to fit with the name & field code in my space.
However, when I check the checkbox all the checkboxes are checking per attached.

The value still does not appear in the text field.
Here's my latest setup for the checkbox.

Chris · April 19, 2024, 3:30pm

Hello @Weerapat_Tangkanakul ,

I've confirmed that the setup works in my testing environment. At this point, I recommend checking your field codes, field types, permissions, etc. As mentioned above, please consider this example as a reference, and feel free to adjust and debug it according to your environment's specific needs.

Topic		Replies	Views
How to Sum text setting.	2	183	November 10, 2020
How to best implement the 'click' event on mobile version?	1	270	June 22, 2022
How to add a click event listener to a text field inside of a table?	1	237	June 17, 2022
Restricting Fields	2	228	May 26, 2022
How do I sum blank values?	4	199	February 12, 2021

Generate Text to Text field via checkbox?

Question / Problem

Current Situation

Code / Attempts

Related Topics