Scroll Area for UI in JSX Script

[marcel_7120]

 

Hello, I have run into an issue with scrollbars in Illustrator JSX Sxripting. The left image shows a previous version of my code where everything worked perfectly. The list of files was displayed correctly, Scrollable and cropped to fit the intended area.

The right picture shows the current version of my code. Whenever I load a large number of files, they extend beyond the bounds of the ScrollView and stretch the UI beyond my computer screen. I drew in a yellow line to show where the list should be cropped.

I have asked ChatGPT multiple times for a solution but to no avail. I would greatly appreciate it if someone could take a look at the provided code snippet and help me identify what’s wrong.

 // Scrollable area for file checkboxes
    var scrollGroup = dialog.add('group');
    scrollGroup.orientation = 'row';
    scrollGroup.alignChildren = 'top';
    scrollGroup.size = [400, 300]; // Fixed size for scrollable area

    var contentGroup = scrollGroup.add('group');
    contentGroup.orientation = 'column';
    contentGroup.alignChildren = 'left';
    contentGroup.size = [380, files.length * 30]; // Dynamic height based on files

    var scrollbar = scrollGroup.add('scrollbar', undefined, 0, 0, Math.max(0, files.length * 30 - 300));
    scrollbar.size = [20, 300];
    scrollbar.onChanging = function () {
        contentGroup.location = [0, -Math.round(scrollbar.value)];
    };

    var checkboxes = [];
    for (var i = 0; i < files.length; i++) {
        var fileGroup = contentGroup.add('group');
        fileGroup.orientation = 'row';
        fileGroup.alignChildren = ['fill', 'center'];

        var fileLabel = fileGroup.add('statictext', undefined, truncateFileName(files[i].name, 35));
        fileLabel.size = [280, 20];

        var checkbox = fileGroup.add('checkbox', undefined, '');
        checkbox.value = selectAllCheckbox.value;
        checkboxes.push(checkbox);
        fileGroups.push(fileGroup);
    }

    selectAllCheckbox.onClick = function () {
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].value = selectAllCheckbox.value;
        }
    };

    var buttonGroup = dialog.add('group');
    buttonGroup.orientation = 'row';
    var confirmButton = buttonGroup.add('button', undefined, 'Confirm', { name: 'ok' });
    var cancelButton = buttonGroup.add('button', undefined, 'Cancel', { name: 'cancel' });

    confirmButton.enabled = false;
    loadPreviewButton.enabled = false;

    function truncateFileName(fileName, maxLength) {
        if (fileName.length > maxLength) {
            return fileName.substring(0, maxLength - 3) + '...';
        }
        return fileName;
    }

    function updateFileList() {
        while (contentGroup.children.length > 0) {
            contentGroup.remove(contentGroup.children[0]);
        }
        checkboxes.length = 0;
        fileGroups.length = 0;

        if (files.length > 0) {
            contentGroup.size = [380, files.length * 30];
            scrollbar.maxvalue = Math.max(0, files.length * 30 - 300);

            for (var i = 0; i < files.length; i++) {
                var fileGroup = contentGroup.add('group');
                fileGroup.orientation = 'row';
                fileGroup.alignChildren = ['fill', 'center'];

                var fileLabel = fileGroup.add('statictext', undefined, truncateFileName(files[i].name, 35));
                fileLabel.size = [280, 20];

                var checkbox = fileGroup.add('checkbox', undefined, '');
                checkbox.value = selectAllCheckbox.value;
                checkboxes.push(checkbox);
                fileGroups.push(fileGroup);
            }

            confirmButton.enabled = true;
            loadPreviewButton.enabled = true;
        } else {
            confirmButton.enabled = false;
            loadPreviewButton.enabled = false;
        }

        dialog.layout.layout(true);
    }

[m1b]

Hi @marcel_7120 I don't have an answer for you—I would love to know the answer myself—but to make it easier for the scripters to try this out, here is a simplified, runable script that shows the problem:

(function () {

    // make a sample list
    var list = [];
    for (var i = 0; i < 100; i++)
        list.push('Sample ' + i);

    var dialog = new Window("dialog", '', undefined, { closeButton: false });

    // Scrollable area for file checkboxes
    var scrollGroup = dialog.add('group');
    scrollGroup.orientation = 'row';
    scrollGroup.alignChildren = 'top';
    scrollGroup.size = [200, 200]; // Fixed size for scrollable area

    var contentGroup = scrollGroup.add('group');
    contentGroup.orientation = 'column';
    contentGroup.alignChildren = 'left';
    contentGroup.size = [170, list.length * 30]; // Dynamic height based on files

    var scrollbar = scrollGroup.add('scrollbar', undefined, 0, 0, Math.max(0, list.length * 30 - 300));
    scrollbar.size = [20, 300];
    scrollbar.onChanging = function () {
        contentGroup.location = [0, -Math.round(scrollbar.value)];
    };

    for (var i = 0; i < list.length; i++) {
        contentGroup.add('statictext', undefined, list[i]);
    }

    var buttonGroup = dialog.add('group');
    buttonGroup.orientation = 'row';
    var confirmButton = buttonGroup.add('button', undefined, 'Confirm', { name: 'ok' });
    var cancelButton = buttonGroup.add('button', undefined, 'Cancel', { name: 'cancel' });

    confirmButton.enabled = false;

    dialog.show();

})();

When I run this the scrolling works fine, but the contentGroup isn't large enough and only shows down to about "Sample 40". Can anyone confirm a similar experience? I am on MacOS 15.1.1, tested in Illustrator 29.0 and Indesign 20.0.1.

- Mark

P.S. @Peter Kahrel if you had time, I would value your opinion.

[Sergey Osokin]

Maybe it's the same problem I noticed with script, where a lot of elements are generated vertically. This was in June of this year on different versions of Illustrator. I tested on a 27" iMac and a 15" Macbook to see the pattern.

If you run the same script on a small monitor, some elements just don't generate visually, and the scrollbar doesn't help, it scrolls down the cropped version of the panel. At the same time, there is access to the "lost" red elements in the code, they exist. Somehow the ScriptUI dialog checks the user's screen size and just doesn't output some of the elements that don't fit into some vertical screen boundary.

[Peter Kahrel]

@marcel_7120 -- You say that you had a previous version that worked as expected. Does that one still work? What did you change? Was that in an earlier version of Illustrator?

The script that @m1b posted produces the same results over here in InDesign (I don't have Illustrator installed). Not sure why. I have a very vague recollection that there was a limit to the list of scrollable lists/panels done the way you do them (bug or designed, who knows?) But if @marcel_7120 had working code earlier then maybe I don't remember it correctly.

Keep in mind that, sadly, ScriptUI loses some functionality with almost every new version of InDesign. I guess that it's the same with Illustrator.

[m1b]

Thanks Peter. Yes it is true that ScriptUI loses functionality (possibily due to compatibility) with every app upgrade. In Indesign there are other options, but here in Illustrator there is only CEP, which is a big jump in complexity.

@marcel_7120 another option would be for you to use a ListBox with multi-selection allowed. I have done that before and it's quite usable, although not quite the same as the checkboxes.