• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

UXP (IDJS) AddEventListener to Dropdown in Dialog

New Here ,
Nov 01, 2022 Nov 01, 2022

Copy link to clipboard

Copied

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

TOPICS
UXP Scripting

Views

85

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Valorous Hero ,
Nov 02, 2022 Nov 02, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 02, 2022 Nov 02, 2022

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines