Refresh InDesign Dialog via ExtendScript to Toggle Checkboxes?

[similartoacoolperson]

I am using Extended Script to create a dialog in InDesign. I’m reading data from a .csv file to get a list of names and for each name, checkboxes are created to let the user decide on some options in regard to each name before continuing with the script. Everything works perfectly fine in regard to the script, including the user’s choices with the options.

However, given that all that clicking to check or uncheck checkboxes can be time-consuming and annoying, I would like to add buttons to my dialog that allow for toggling of all the checkboxes used for the same option for each name. I got the toggling logic done and it works like I want it to (which I know from the one version of this that works, see below) but I cannot get the dialog to actually show the changes made.

When the user presses a button to toggle some checkbox groups, nothing happens. I use .update() on the dialog and I’ve also tried some other options such as moving the dialog, disabling and enabling it again, removing the checkboxes and adding them again etc. but nothing has worked so far. The only way I got it all to work (and why I know the toggling logic as such is working) has been to actually fully close the dialog and then open it right away again with the changes applies. However, this does seem very unsatisfactory and prone to errors/bugs; when one clicks too fast, it crashes and even if one clicks slowly, the disappearing and reappearing of the dialog is not pleasant to the eyes.

If anyone has any ideas on how to refresh the dialog to get it to actually show the changes to the checkbox values, I would be very grateful. Thank you.

[brian_p_dts]

Can you post your code? 

[similartoacoolperson]

Thank you for replying. Sure, here's a generic version of the code. I'm also attaching a screenshot of how the dialog looks with some testdata. I hope this is useful.

// The arrays 'participants' and 'workshops' are declared elsewhere

// Declare arrays to store the state of options for participants and workshops
optionsParticipants = [];
optionsWorkshops = [];

// Define the labels for participant options as "Option 1" to "Option 6"
var participantOptionLabels = ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5", "Option 6"];

// Define the labels for workshop options as "Option 1" to "Option 5"
var workshopOptionLabels = ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"];

// Initialize participant options array with a default checked state
for (var i = 0; i < participantOptionLabels.length; i++) {
    optionsParticipants[i] = [];
    for (var j = 0; j < participants.length; j++) {
        optionsParticipants[i][j] = true;
    }
}

// Initialize workshop options array with a default checked state
for (var i = 0; i < workshopOptionLabels.length; i++) {
    optionsWorkshops[i] = [];
    for (var j = 0; j < workshops.length; j++) {
        optionsWorkshops[i][j] = true;
    }
}

// Function to display the dialog window with options for workshops and participants
function showDialog() {
    // Create the main dialog window
    dlg = new Window('dialog', 'Workshop and Participant Options');
    dlg.orientation = 'column';
    dlg.alignChildren = 'fill';

    // Create a panel for the workshop section
    var workshopPanel = dlg.add('panel', undefined, 'Workshops');
    workshopPanel.alignChildren = 'fill';
    workshopPanel.margins = [10, 10, 10, 10];
    workshopPanel.preferredSize.width = 450;

    // Create a scrollable area for workshop options
    var workshopScrollGroup = workshopPanel.add('group', undefined);
    workshopScrollGroup.orientation = 'row';
    workshopScrollGroup.alignment = ['fill', 'fill'];
    workshopScrollGroup.margins = 10;
    workshopScrollGroup.maximumSize.height = 200;

    // Add a panel inside the scrollable area for workshop options
    var workshopScrollablePanel = workshopScrollGroup.add('panel');
    workshopScrollablePanel.orientation = 'column';
    workshopScrollablePanel.alignChildren = ['fill', 'top'];
    workshopScrollablePanel.spacing = 5;
    workshopScrollablePanel.preferredSize.width = 450;

    // Loop through each workshop and add options for them
    for (var i = 0; i < workshops.length; i++) {
        var workshopGroup = workshopScrollablePanel.add('group', undefined);
        workshopGroup.orientation = 'row';
        workshopGroup.alignment = 'left';

        // Display the date or label for each workshop
        var workshopDateText = workshopGroup.add('statictext', undefined, workshops[i].dateForInDesignOptions);
        workshopDateText.preferredSize.width = 150;

        // Add checkboxes for each option related to the workshop
        for (var j = 0; j < workshopOptionLabels.length; j++) {
            var workshopCheckbox = workshopGroup.add('checkbox', undefined, workshopOptionLabels[j]);
            workshopCheckbox.value = optionsWorkshops[j][i];

            // Store the state of the checkbox in the workshop options array
            (function(i, j) {
                workshopCheckbox.onClick = function () {
                    optionsWorkshops[j][i] = workshopCheckbox.value;
                };
            })(i, j);
        }

        // Add a separator line between workshop entries
        if (i < workshops.length - 1) {
            var separator = workshopScrollablePanel.add('panel', undefined, '');
            separator.alignment = 'fill';
            separator.minimumSize.height = 1;
            separator.maximumSize.height = 1;
            separator.graphics.foregroundColor = separator.graphics.newPen(separator.graphics.PenType.SOLID_COLOR, [0, 0, 0, 1], 1);
        }
    }

    // Add a scrollbar to the workshop scroll group
    var workshopScrollbar = workshopScrollGroup.add('scrollbar', undefined, 0, 0, 100);
    workshopScrollbar.alignment = ['right', 'fill'];
    workshopScrollbar.preferredSize.width = 20;

    // Link the scrollbar to the workshop scrollable panel
    workshopScrollbar.onChanging = function () {
        workshopScrollablePanel.location.y = -workshopScrollbar.value;
    };

    // Add a separator line between the workshop and participant sections
    var sectionSeparator = dlg.add('panel', undefined, '');
    sectionSeparator.alignment = 'fill';
    sectionSeparator.minimumSize.height = 1;
    sectionSeparator.maximumSize.height = 1;
    sectionSeparator.graphics.foregroundColor = sectionSeparator.graphics.newPen(sectionSeparator.graphics.PenType.SOLID_COLOR, [0, 0, 0, 1], 1);

    // Create a panel for the participant section
    var listPanel = dlg.add('panel', undefined, 'Participants');
    listPanel.alignChildren = 'fill';
    listPanel.margins = [10, 10, 10, 10];
    listPanel.preferredSize.width = 450;

    // Create a button group to allow toggling of participant checkboxes
    var buttonGroup = listPanel.add('group', undefined);
    buttonGroup.orientation = 'row';
    buttonGroup.alignment = 'center';

    // Add a button for each participant option to toggle its checkboxes
    for (var j = 0; j < participantOptionLabels.length; j++) {
        (function(j) {
            var button = buttonGroup.add('button', undefined, 'All ' + participantOptionLabels[j]);
            button.onClick = function () {
                toggleAllOptions(j);
            };
        })(j);
    }

    // Create a scrollable area for participant options
    var scrollGroup = listPanel.add('group', undefined);
    scrollGroup.orientation = 'row';
    scrollGroup.alignment = ['fill', 'fill'];
    scrollGroup.margins = 10;
    scrollGroup.maximumSize.height = 450;

    // Add a panel inside the scrollable area for participant options
    var scrollablePanel = scrollGroup.add('panel');
    scrollablePanel.orientation = 'column';
    scrollablePanel.alignChildren = ['fill', 'top'];
    scrollablePanel.spacing = 5;
    scrollablePanel.preferredSize.width = 450;

    // Loop through each participant and add options for them
    for (var i = 0; i < participants.length; i++) {
        var participantGroup = scrollablePanel.add('group', undefined);
        participantGroup.orientation = 'row';
        participantGroup.alignment = 'left';

        // Display the name or label for each participant
        var nameText = participantGroup.add('statictext', undefined, participants[i].name);
        nameText.preferredSize.width = 150;

        // Add checkboxes for each option related to the participant
        for (var j = 0; j < participantOptionLabels.length; j++) {
            var checkbox = participantGroup.add('checkbox', undefined, participantOptionLabels[j]);
            checkbox.value = optionsParticipants[j][i];

            // Store the state of the checkbox in the participant options array
            (function(i, j) {
                checkbox.onClick = function () {
                    optionsParticipants[j][i] = checkbox.value;
                };
            })(i, j);
        }

        // Add a separator line between participant entries
        if (i < participants.length - 1) {
            var separator = participantGroup.add('panel', undefined, '');
            separator.alignment = 'fill';
            separator.minimumSize.height = 1;
            separator.maximumSize.height = 1;
            separator.graphics.foregroundColor = separator.graphics.newPen(separator.graphics.PenType.SOLID_COLOR, [0, 0, 0, 1], 1);
        }
    }

    // Add a scrollbar to the participant scroll group
    var scrollbar = scrollGroup.add('scrollbar', undefined, 0, 0, 100);
    scrollbar.alignment = ['right', 'fill'];
    scrollbar.preferredSize.width = 20;

    // Link the scrollbar to the participant scrollable panel
    scrollbar.onChanging = function () {
        scrollablePanel.location.y = -scrollbar.value;
    };

    // Add OK and Cancel buttons for the dialog actions
    var actionButtonGroup = dlg.add('group', undefined);
    actionButtonGroup.alignment = 'center';
    actionButtonGroup.add('button', undefined, 'OK');
    actionButtonGroup.add('button', undefined, 'Cancel');

    // Show the dialog window
    var result = dlg.show();

    // Exit if the user clicks Cancel
    if (result !== 1) {
        exit();
    }
}

// Function to toggle the checkboxes for a specific participant option
function toggleAllOptions(optionIndex) {
    var checkedCount = 0;
    var uncheckedCount = 0;

    // Count how many checkboxes are checked or unchecked for the selected option
    for (var i = 0; i < participants.length; i++) {
        if (optionsParticipants[optionIndex][i]) {
            checkedCount++;
        } else {
            uncheckedCount++;
        }
    }

    // Determine whether to check or uncheck all based on the majority state
    var toggleState = checkedCount <= uncheckedCount;

    // Apply the determined state to all checkboxes for the selected option
    for (var i = 0; i < participants.length; i++) {
        var checkbox = scrollablePanel.children[i].children[1].children[optionIndex];
        checkbox.value = toggleState;
        optionsParticipants[optionIndex][i] = toggleState;
    }

    // Refresh the dialog layout to apply the changes
    dlg.layout.layout();
}

// Initialize and show the dialog
showDialog();

[m1b]

Hi @similartoacoolperson, as @brian_p_dts said it would be useful to see your code (or just make a small working demo at least). However in the meantime, try adding this to refresh the window:

w.layout.layout();

where `w` is your dialog window reference.

- Mark

[similartoacoolperson]

Thank you so much. I tried .layout() but it didn't work either. At least not with my current setup. I have posted my code and a screenshot of the dialog as a reply to another user who replied before you. I don't think I am supposed to post it all again directly here but I hope you can check out my code and screenshot in my other reply in this thread. Thank you.

[m1b]

Thanks for the code. I came across a couple of issues.

1. the `toggleAllOptions` function was out of scope and couldn't access the scrollablePanel. I moved it inside the showDialog function to fix it.

2. the index to the participants in the toggleAllOptions function was out by one (due to 1-based indexing) so I subtracted 1 from optionIndex when accessing the checkboxes.

3. I was getting an error on exit() but that might be just my VSCode pre-processor doing something. I fixed it for me anyway by returning the value from the showDialog function and handling it outside, which I prefer to do anyway.

- Mark

// The arrays 'participants' and 'workshops' are declared elsewhere

// Declare arrays to store the state of options for participants and workshops
optionsParticipants = [];
optionsWorkshops = [];

// Define the labels for participant options as "Option 1" to "Option 6"
var participantOptionLabels = ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5", "Option 6"];

// Define the labels for workshop options as "Option 1" to "Option 5"
var workshopOptionLabels = ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"];

// Initialize participant options array with a default checked state
for (var i = 0; i < participantOptionLabels.length; i++) {
    optionsParticipants[i] = [];
    for (var j = 0; j < participants.length; j++) {
        optionsParticipants[i][j] = true;
    }
}

// Initialize workshop options array with a default checked state
for (var i = 0; i < workshopOptionLabels.length; i++) {
    optionsWorkshops[i] = [];
    for (var j = 0; j < workshops.length; j++) {
        optionsWorkshops[i][j] = true;
    }
}

// Function to display the dialog window with options for workshops and participants
function showDialog() {
    // Create the main dialog window
    dlg = new Window('dialog', 'Workshop and Participant Options');
    dlg.orientation = 'column';
    dlg.alignChildren = 'fill';

    // Create a panel for the workshop section
    var workshopPanel = dlg.add('panel', undefined, 'Workshops');
    workshopPanel.alignChildren = 'fill';
    workshopPanel.margins = [10, 10, 10, 10];
    workshopPanel.preferredSize.width = 450;

    // Create a scrollable area for workshop options
    var workshopScrollGroup = workshopPanel.add('group', undefined);
    workshopScrollGroup.orientation = 'row';
    workshopScrollGroup.alignment = ['fill', 'fill'];
    workshopScrollGroup.margins = 10;
    workshopScrollGroup.maximumSize.height = 200;

    // Add a panel inside the scrollable area for workshop options
    var workshopScrollablePanel = workshopScrollGroup.add('panel');
    workshopScrollablePanel.orientation = 'column';
    workshopScrollablePanel.alignChildren = ['fill', 'top'];
    workshopScrollablePanel.spacing = 5;
    workshopScrollablePanel.preferredSize.width = 450;

    // Loop through each workshop and add options for them
    for (var i = 0; i < workshops.length; i++) {
        var workshopGroup = workshopScrollablePanel.add('group', undefined);
        workshopGroup.orientation = 'row';
        workshopGroup.alignment = 'left';

        // Display the date or label for each workshop
        var workshopDateText = workshopGroup.add('statictext', undefined, workshops[i].dateForInDesignOptions);
        workshopDateText.preferredSize.width = 150;

        // Add checkboxes for each option related to the workshop
        for (var j = 0; j < workshopOptionLabels.length; j++) {
            var workshopCheckbox = workshopGroup.add('checkbox', undefined, workshopOptionLabels[j]);
            workshopCheckbox.value = optionsWorkshops[j][i];

            // Store the state of the checkbox in the workshop options array
            (function (i, j) {
                workshopCheckbox.onClick = function () {
                    optionsWorkshops[j][i] = workshopCheckbox.value;
                };
            })(i, j);
        }

        // Add a separator line between workshop entries
        if (i < workshops.length - 1) {
            var separator = workshopScrollablePanel.add('panel', undefined, '');
            separator.alignment = 'fill';
            separator.minimumSize.height = 1;
            separator.maximumSize.height = 1;
            separator.graphics.foregroundColor = separator.graphics.newPen(separator.graphics.PenType.SOLID_COLOR, [0, 0, 0, 1], 1);
        }
    }

    // Add a scrollbar to the workshop scroll group
    var workshopScrollbar = workshopScrollGroup.add('scrollbar', undefined, 0, 0, 100);
    workshopScrollbar.alignment = ['right', 'fill'];
    workshopScrollbar.preferredSize.width = 20;

    // Link the scrollbar to the workshop scrollable panel
    workshopScrollbar.onChanging = function () {
        workshopScrollablePanel.location.y = -workshopScrollbar.value;
    };

    // Add a separator line between the workshop and participant sections
    var sectionSeparator = dlg.add('panel', undefined, '');
    sectionSeparator.alignment = 'fill';
    sectionSeparator.minimumSize.height = 1;
    sectionSeparator.maximumSize.height = 1;
    sectionSeparator.graphics.foregroundColor = sectionSeparator.graphics.newPen(sectionSeparator.graphics.PenType.SOLID_COLOR, [0, 0, 0, 1], 1);

    // Create a panel for the participant section
    var listPanel = dlg.add('panel', undefined, 'Participants');
    listPanel.alignChildren = 'fill';
    listPanel.margins = [10, 10, 10, 10];
    listPanel.preferredSize.width = 450;

    // Create a button group to allow toggling of participant checkboxes
    var buttonGroup = listPanel.add('group', undefined);
    buttonGroup.orientation = 'row';
    buttonGroup.alignment = 'center';

    // Add a button for each participant option to toggle its checkboxes
    for (var j = 0; j < participantOptionLabels.length; j++) {
        (function (j) {
            var button = buttonGroup.add('button', undefined, 'All ' + participantOptionLabels[j]);
            button.onClick = function () {
                toggleAllOptions(j);
            };
        })(j);
    }

    // Create a scrollable area for participant options
    var scrollGroup = listPanel.add('group', undefined);
    scrollGroup.orientation = 'row';
    scrollGroup.alignment = ['fill', 'fill'];
    scrollGroup.margins = 10;
    scrollGroup.maximumSize.height = 450;

    // Add a panel inside the scrollable area for participant options
    var scrollablePanel = scrollGroup.add('panel');
    scrollablePanel.orientation = 'column';
    scrollablePanel.alignChildren = ['fill', 'top'];
    scrollablePanel.spacing = 5;
    scrollablePanel.preferredSize.width = 450;

    // Loop through each participant and add options for them
    for (var i = 0; i < participants.length; i++) {
        var participantGroup = scrollablePanel.add('group', undefined);
        participantGroup.orientation = 'row';
        participantGroup.alignment = 'left';

        // Display the name or label for each participant
        var nameText = participantGroup.add('statictext', undefined, participants[i].name);
        nameText.preferredSize.width = 150;

        // Add checkboxes for each option related to the participant
        for (var j = 0; j < participantOptionLabels.length; j++) {
            var checkbox = participantGroup.add('checkbox', undefined, participantOptionLabels[j]);
            checkbox.value = optionsParticipants[j][i];

            // Store the state of the checkbox in the participant options array
            (function (i, j) {
                checkbox.onClick = function () {
                    optionsParticipants[j][i] = checkbox.value;
                };
            })(i, j);
        }

        // Add a separator line between participant entries
        if (i < participants.length - 1) {
            var separator = participantGroup.add('panel', undefined, '');
            separator.alignment = 'fill';
            separator.minimumSize.height = 1;
            separator.maximumSize.height = 1;
            separator.graphics.foregroundColor = separator.graphics.newPen(separator.graphics.PenType.SOLID_COLOR, [0, 0, 0, 1], 1);
        }
    }

    // Add a scrollbar to the participant scroll group
    var scrollbar = scrollGroup.add('scrollbar', undefined, 0, 0, 100);
    scrollbar.alignment = ['right', 'fill'];
    scrollbar.preferredSize.width = 20;

    // Link the scrollbar to the participant scrollable panel
    scrollbar.onChanging = function () {
        scrollablePanel.location.y = -scrollbar.value;
    };

    // Add OK and Cancel buttons for the dialog actions
    var actionButtonGroup = dlg.add('group', undefined);
    actionButtonGroup.alignment = 'center';
    actionButtonGroup.add('button', undefined, 'OK');
    actionButtonGroup.add('button', undefined, 'Cancel');

    // Show the dialog window
    return dlg.show();

    // Function to toggle the checkboxes for a specific participant option
    function toggleAllOptions(optionIndex) {
        var checkedCount = 0;
        var uncheckedCount = 0;

        // Count how many checkboxes are checked or unchecked for the selected option
        for (var i = 0; i < participants.length; i++) {
            if (optionsParticipants[optionIndex][i]) {
                checkedCount++;
            } else {
                uncheckedCount++;
            }
        }

        // Determine whether to check or uncheck all based on the majority state
        var toggleState = checkedCount <= uncheckedCount;

        // Apply the determined state to all checkboxes for the selected option
        for (var i = 0; i < participants.length; i++) {
            var checkbox = scrollablePanel.children[i].children[optionIndex+1];
            checkbox.value = toggleState;
            optionsParticipants[optionIndex][i] = toggleState;
        }

        // Refresh the dialog layout to apply the changes
        dlg.layout.layout();
    }
}

// Initialize and show the dialog
if (showDialog() === 2)
    // user cancelled
    return;

[similartoacoolperson]

Thank you so much for your time and effort. I have implemented your changes 1 and 2 in my code. I couldn't really do 3 because I kept getting errors by InDesign, so I guess I have to keep my OK/Cancel user selection and showing of the dialog that way in my context.

The problem has not been solved, unfortunately. I am sure your changes are important in general but the checkboxes still do not update for me when I click the buttons. Do I really need to change something about how I ‘show’ the dialog?

In case anyone still has time to work on this, here's my updated code:

// Declare the options arrays as global variables
optionsParticipants = [];  // For participant options
optionsWorkshops = [];  // For workshop options

// Define the participant option labels, including the updated 'Contact (vCard)'
var participantOptionLabels = ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5", "Option 6"];

// Define the workshop option labels
var workshopOptionLabels = ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"];

// Initialize the arrays to store user choices for participants (all checked initially)
for (var i = 0; i < participantOptionLabels.length; i++) {
    optionsParticipants[i] = [];
    for (var j = 0; j < participants.length; j++) {
        optionsParticipants[i][j] = true; // Set all to true for each participant
    }
}

// Initialize the arrays to store user choices for workshops (all checked initially)
for (var i = 0; i < workshopOptionLabels.length; i++) {
    optionsWorkshops[i] = [];
    for (var j = 0; j < workshops.length; j++) {
        optionsWorkshops[i][j] = true; // Set all to true for each workshop
    }
}

// Function to display the dialog window with options for workshops and participants
function showDialog() {
    // Create the main dialog window
    dlg = new Window('dialog', 'Workshop and Participant Options');
    dlg.orientation = 'column';
    dlg.alignChildren = 'fill';

    // Create a panel for the workshop section
    var workshopPanel = dlg.add('panel', undefined, 'Workshops');
    workshopPanel.alignChildren = 'fill';
    workshopPanel.margins = [10, 10, 10, 10];
    workshopPanel.preferredSize.width = 450;

    // Create a scrollable area for workshop options
    var workshopScrollGroup = workshopPanel.add('group', undefined);
    workshopScrollGroup.orientation = 'row';
    workshopScrollGroup.alignment = ['fill', 'fill'];
    workshopScrollGroup.margins = 10;
    workshopScrollGroup.maximumSize.height = 200;

    // Add a panel inside the scrollable area for workshop options
    var workshopScrollablePanel = workshopScrollGroup.add('panel');
    workshopScrollablePanel.orientation = 'column';
    workshopScrollablePanel.alignChildren = ['fill', 'top'];
    workshopScrollablePanel.spacing = 5;
    workshopScrollablePanel.preferredSize.width = 450;

    // Loop through each workshop and add options for them
    for (var i = 0; i < workshops.length; i++) {
        var workshopGroup = workshopScrollablePanel.add('group', undefined);
        workshopGroup.orientation = 'row';
        workshopGroup.alignment = 'left';

        // Display the date or label for each workshop
        var workshopDateText = workshopGroup.add('statictext', undefined, workshops[i].dateForInDesignOptions);
        workshopDateText.preferredSize.width = 150;

        // Add checkboxes for each option related to the workshop
        for (var j = 0; j < workshopOptionLabels.length; j++) {
            var workshopCheckbox = workshopGroup.add('checkbox', undefined, workshopOptionLabels[j]);
            workshopCheckbox.value = optionsWorkshops[j][i];

            // Store the state of the checkbox in the workshop options array
            (function(i, j) {
                workshopCheckbox.onClick = function () {
                    optionsWorkshops[j][i] = workshopCheckbox.value;
                };
            })(i, j);
        }

        // Add a separator line between workshop entries
        if (i < workshops.length - 1) {
            var separator = workshopScrollablePanel.add('panel', undefined, '');
            separator.alignment = 'fill';
            separator.minimumSize.height = 1;
            separator.maximumSize.height = 1;
            separator.graphics.foregroundColor = separator.graphics.newPen(separator.graphics.PenType.SOLID_COLOR, [0, 0, 0, 1], 1);
        }
    }

    // Add a scrollbar to the workshop scroll group
    var workshopScrollbar = workshopScrollGroup.add('scrollbar', undefined, 0, 0, 100);
    workshopScrollbar.alignment = ['right', 'fill'];
    workshopScrollbar.preferredSize.width = 20;

    // Link the scrollbar to the workshop scrollable panel
    workshopScrollbar.onChanging = function () {
        workshopScrollablePanel.location.y = -workshopScrollbar.value;
    };

    // Add a separator line between the workshop and participant sections
    var sectionSeparator = dlg.add('panel', undefined, '');
    sectionSeparator.alignment = 'fill';
    sectionSeparator.minimumSize.height = 1;
    sectionSeparator.maximumSize.height = 1;
    sectionSeparator.graphics.foregroundColor = sectionSeparator.graphics.newPen(sectionSeparator.graphics.PenType.SOLID_COLOR, [0, 0, 0, 1], 1);

    // Create a panel for the participant section
    var listPanel = dlg.add('panel', undefined, 'Participants');
    listPanel.alignChildren = 'fill';
    listPanel.margins = [10, 10, 10, 10];
    listPanel.preferredSize.width = 450;

    // Create a button group to allow toggling of participant checkboxes
    var buttonGroup = listPanel.add('group', undefined);
    buttonGroup.orientation = 'row';
    buttonGroup.alignment = 'center';

    // Add a button for each participant option to toggle its checkboxes
    for (var j = 0; j < participantOptionLabels.length; j++) {
        (function(j) {
            var button = buttonGroup.add('button', undefined, 'All ' + participantOptionLabels[j]);
            button.onClick = function () {
                toggleAllOptions(j);
            };
        })(j);
    }

    // Create a scrollable area for participant options
    var scrollGroup = listPanel.add('group', undefined);
    scrollGroup.orientation = 'row';
    scrollGroup.alignment = ['fill', 'fill'];
    scrollGroup.margins = 10;
    scrollGroup.maximumSize.height = 450;

    // Add a panel inside the scrollable area for participant options
    var scrollablePanel = scrollGroup.add('panel');
    scrollablePanel.orientation = 'column';
    scrollablePanel.alignChildren = ['fill', 'top'];
    scrollablePanel.spacing = 5;
    scrollablePanel.preferredSize.width = 450;

    // Loop through each participant and add options for them
    for (var i = 0; i < participants.length; i++) {
        var participantGroup = scrollablePanel.add('group', undefined);
        participantGroup.orientation = 'row';
        participantGroup.alignment = 'left';

        // Display the name or label for each participant
        var nameText = participantGroup.add('statictext', undefined, participants[i].name);
        nameText.preferredSize.width = 150;

        // Add checkboxes for each option related to the participant
        for (var j = 0; j < participantOptionLabels.length; j++) {
            var checkbox = participantGroup.add('checkbox', undefined, participantOptionLabels[j]);
            checkbox.value = optionsParticipants[j][i];

            // Store the state of the checkbox in the participant options array
            (function(i, j) {
                checkbox.onClick = function () {
                    optionsParticipants[j][i] = checkbox.value;
                };
            })(i, j);
        }

        // Add a separator line between participant entries
        if (i < participants.length - 1) {
            var separator = participantGroup.add('panel', undefined, '');
            separator.alignment = 'fill';
            separator.minimumSize.height = 1;
            separator.maximumSize.height = 1;
            separator.graphics.foregroundColor = separator.graphics.newPen(separator.graphics.PenType.SOLID_COLOR, [0, 0, 0, 1], 1);
        }
    }

    // Add a scrollbar to the participant scroll group
    var scrollbar = scrollGroup.add('scrollbar', undefined, 0, 0, 100);
    scrollbar.alignment = ['right', 'fill'];
    scrollbar.preferredSize.width = 20;

    // Link the scrollbar to the participant scrollable panel
    scrollbar.onChanging = function () {
        scrollablePanel.location.y = -scrollbar.value;
    };

    // Function to toggle the checkboxes for a specific participant option
    function toggleAllOptions(optionIndex) {
        var checkedCount = 0;
        var uncheckedCount = 0;

        // Count how many checkboxes are checked or unchecked for the selected option
        for (var i = 0; i < participants.length; i++) {
            if (optionsParticipants[optionIndex][i]) {
                checkedCount++;
            } else {
                uncheckedCount++;
            }
        }

        // Determine whether to check or uncheck all based on the majority state
        var toggleState = checkedCount <= uncheckedCount;

         // Apply the determined state to all checkboxes for the selected option
        for (var i = 0; i < participants.length; i++) {
            var checkbox = scrollablePanel.children[i].children[1].children[optionIndex - 1];  // Adjust index by subtracting 1
            checkbox.value = toggleState;
            optionsParticipants[optionIndex][i] = toggleState;
        }

        // Refresh the dialog layout to apply the changes
        dlg.layout.layout();
    }

    // Add OK and Cancel buttons for the dialog actions
    var actionButtonGroup = dlg.add('group', undefined);
    actionButtonGroup.alignment = 'center';
    actionButtonGroup.add('button', undefined, 'OK');
    actionButtonGroup.add('button', undefined, 'Cancel');

    // Show the dialog window
    var result = dlg.show();

    // Exit if the user clicks Cancel
    if (result !== 1) {
        exit();
    }
}

// Initialize and show the dialog
showDialog();

[m1b · Accepted solution]

Sorry I left out another change I made to this line:

var checkbox = scrollablePanel.children[i].children[optionIndex + 1];

Note that this line has optionIndex + 1 (sorry, my code was right before, but I explained it wrong as subtracting one!) 

- Mark

EDIT: sorry I'm going too fast and forgot to say what I changed! I removed one level of "children[1]" because it wasn't right.

[similartoacoolperson]

This works! Thank you SO much for all your time and effort and for explaining it all so well. I am incredibly grateful!

[m1b]

You're very welcome! All the best with your project.