Generic Function to Collapse/Expand Sublist Fields with Dynamic Button Label in Suitelet Using JQuery

Overview:

This generic JavaScript function enables the collapsing and expanding of sublist columns on a Suitelet page. It dynamically changes the button label between “Expand” and “Collapse” based on the visibility of the sublist columns. This function can be reused and customized according to the specific field and button identifiers used on different Suitelet pages.

Usage:

To use this function, simply call it in your Suitelet script, passing the necessary parameters (e.g., field array, sublist ID, button ID). The function checks whether the columns are visible or hidden and toggles the visibility accordingly. Additionally, it changes the button label to “Expand” or “Collapse” based on the current state.

Function Code:

/**
 * Generic function to toggle visibility of sublist columns and update button label.
 * @param {Array} fieldArray - Array of field identifiers that should be toggled.
 * @param {String} sublistId - The ID of the sublist to collapse/expand.
 * @param {String} buttonId - The ID of the button that will toggle between "Expand" and "Collapse".
 * @param {Object} subFields - Object containing field data with collapsibility information.
 */
function toggleSublistColumns(fieldArray, sublistId, buttonId, subFields) {
    try {
        jQuery(function ($) {
            let allCollapsed = true; // Flag to track if all columns are collapsed


            // Loop through the fieldArray to check each field's visibility
            for (let i = 0; i < fieldArray.length; i++) {
                let fieldId = fieldArray[i].replace('custpage_', ''); // Clean field ID
                if (!subFields[fieldId]) continue;


                // Check if the field is collapsible
                if (subFields[fieldId].isCollapsible === true) {
                    let column = $('#' + sublistId + '_splits td:nth-child(' + (i + 1) + ')');


                    // Toggle column visibility based on current visibility state
                    if (column.is(':visible')) {
                        column.hide();
                        allCollapsed = false; // Mark as not all columns are collapsed
                    } else {
                        column.show();
                    }
                }
            }


            // Change the button label based on the visibility state of columns
            let button = $('#' + buttonId); 
            if (allCollapsed === false) {
                button.val('Expand'); // Set button to "Expand" when not all columns are collapsed
            } else {
                button.val('Collapse'); // Set button to "Collapse" when all columns are collapsed
            }    
        });
    } catch (e) {
        log.error("error@toggleSublistColumns", e);
    }
}

Parameters:

1. fieldArray (Array):
2. An array of field IDs (or names) corresponding to the columns that should be toggled. This is typically an array of custpage_* field identifiers.
3. sublistId (String):
4. The ID of the sublist in which the columns reside. This is typically something like custpage_sublist_id for the sublist.
5. buttonId (String):
6. The ID of the button that will toggle between “Expand” and “Collapse.” The function will change the button’s label based on the visibility of the columns.
7. subFields (Object):
8. An object that contains field data. Each field should have a property isCollapsible which determines whether the field is collapsible. Example:

subFields = {
    'field1': { isCollapsible: true },
    'field2': { isCollapsible: false },
    'field3': { isCollapsible: true }
};