Generate Text to Text field via checkbox?

1

Question / Problem

Generate Text to Text field via checkbox?

Current Situation

I want to add the text value when the user clicks 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 --> ✓

2024-04-12_15h55_25
2024-04-12_15h55_251052×249 5.57 KB

image
image1920×953 76.6 KB

image
image1920×953 77.3 KB

2

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

I added my mapping to this code, but after I tried it, 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;
    });
})();
4

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

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.

image
image1063×701 28.4 KB

image
image1920×953 76.6 KB

6

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.