Refresh InDesign Dialog via ExtendScript to Toggle Checkboxes?

Question

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 but that doesn't seem to do anything.

Besides .update() on the dialog, I have also tried 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.

Edit: Here’s a generic version of my code and also a screenshot that shows the dialog with some testdata.

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

Screenshot that shows the dialog

Answer 1

I found some help on the Adobe forums where this could be solved. It was basically an issue of referring to the checkboxes correctly, with the right level (needed to be ajusted once the structure of it all changed a bit) and index (needed to be +1).

You can find the thread with the solution here: https://community.adobe.com/t5/indesign-discussions/refresh-indesign-dialog-via-extendscript-to-toggle-checkboxes/m-p/14809933#M585729