UXP (IDJS) AddEventListener to Dropdown in Dialog

[DanielMedia]

Hi everyone,

this is my first post on the forums, welcome!

I've been tinkering with the new UXP javascript in InDesign for the last few days and have a question about events.

I have a simple dialog box with a dropdown. When user selects a value in this dropdown I would like to do something else. I've tested all documented events but cannot get by handler being called.

Here's my code:

myDialog();

function myDialog() {
    var myDialog = app.dialogs.add();

    with (myDialog) {
        with (dialogColumns.add()) {
            with (dialogColumns.add()) {
                with (dialogRows.add()) {
                    var dropdown = staticTexts.add({ staticLabel: "Dropdown:", minWidth: 100 });
                    var fieldSelection = dropdowns.add({
                        stringList: ["Description", "Title", "Page"],
                        selectedIndex: 0
                    });

                }
            }
        }
    }

    console.log('Right before attaching the EventListener.');
    dropdown.addEventListener('beforePlace', 'onDropdownChange');
    dropdown.addEventListener('afterPlace', 'onDropdownChange');
    dropdown.addEventListener('afterLinksChanged', 'onDropdownChange');
    dropdown.addEventListener('afterNew', 'onDropdownChange');
    dropdown.addEventListener('beforeDelete', 'onDropdownChange');
    dropdown.addEventListener('afterDelete', 'onDropdownChange');
    dropdown.addEventListener('beforeUpdate', 'onDropdownChange');
    dropdown.addEventListener('afterUpdate', 'onDropdownChange');
    dropdown.addEventListener('beforeEmbed', 'onDropdownChange');
    dropdown.addEventListener('afterEmbed', 'onDropdownChange');
    dropdown.addEventListener('beforeUnembed', 'onDropdownChange');
    dropdown.addEventListener('afterUnembed', 'onDropdownChange');
    dropdown.addEventListener('beforeMove', 'onDropdownChange');
    dropdown.addEventListener('afterMove', 'onDropdownChange');
    dropdown.addEventListener('onInvoke', 'onDropdownChange');
    dropdown.addEventListener('beforeInvoke', 'onDropdownChange');
    dropdown.addEventListener('afterInvoke', 'onDropdownChange');
    dropdown.addEventListener('beforeDisplay', 'onDropdownChange');
    dropdown.addEventListener('beforeQuit', 'onDropdownChange');
    dropdown.addEventListener('afterQuit', 'onDropdownChange');
    dropdown.addEventListener('afterContextChanged', 'onDropdownChange');
    dropdown.addEventListener('afterSelectionChanged', 'onDropdownChange');
    dropdown.addEventListener('afterSelectionAttributeChanged', 'onDropdownChange');
    dropdown.addEventListener('beforeDeactivate', 'onDropdownChange');
    dropdown.addEventListener('afterActivate', 'onDropdownChange');
    dropdown.addEventListener('afterOpen', 'onDropdownChange');
    dropdown.addEventListener('beforeClose', 'onDropdownChange');
    dropdown.addEventListener('afterClose', 'onDropdownChange');

    if (myDialog.show() == false) {
        myDialog.destroy();
        return;
    }
}

function onDropdownChange(e) {
    console.log('Dropdown has changed.');
}

Code is in /Users/<my-username>/Library/Preferences/Adobe InDesign/Version 18.0/de_DE/Scripts/Scripts Panel/my-scripts/dialog.idjs

I'm tailing the log files in Terminal from /Users/<my-username>/Library/Caches/UXPLogs to see the console.log() output.

My InDesign version is 18.0 on OSX 12.6.1

[Loic.Aigon]

Hi,

I think we were encouraged to use the dialogs object for UIs in the original docs (mostly alerts) but if you look at the Github repo, dialogs are made of "html" :

https://github.com/AdobeDocs/uxp-indesign/blob/main/src/pages/reference/uxp-scripting-samples/Dialog...

Out of UXP, dialogs while somehow practical were always pretty limited in terms of user interactions. So you were basically closing the dialog and go fetching every single value you needed from your UI components (select…). Any more advanced UI would then require ScriptUI.

So I would suggest to discard dialogs object and prefer the html way as the samples expose, you will probably get more control over the UI.

HTH

Loic

[DanielMedia]

Hi Loic,

I was looking at the UXD samples that come with InDesign. The github repo is a game changer, much more up to date with the capabilities of modern JS. I'll check it out, thank you!

Best,
Daniel