Difference between classes in ExtendScript and UXP

InDesign
,
1

I am investigating how to convert our existing code base from ExtendScript to JavaScript to be used in UXP. The first piece of code I tried to convert is an Alert dialog, making use of the Window class in ExtendScript.

I added the code

const { Window } = require('indesign');

To my ExtendScript code to have access to the Windows class. But when I want to create a Windows object, using new Window(… I receive an error message.

Does the Window class (and all other classes) in UXP the same as the Window class in ExtendScript?

Hereunder the full code of our Alert Class:

const { Window } = require('indesign');

var Alert = {};

Alert.YES = 1;
Alert.NO = 2;
Alert.OK = 4;
Alert.CANCEL = 8;

Alert.show = function (text, title, flags, closeHandler, defaultButton, yesLabel, noLabel, cancelLabel, okLabel, async) {
    text = AS3JS.Utils.getDefaultValue(text, "");
    title = AS3JS.Utils.getDefaultValue(title, "");
    flags = AS3JS.Utils.getDefaultValue(flags, Alert.OK);
    closeHandler = AS3JS.Utils.getDefaultValue(closeHandler, null);
    defaultButton = AS3JS.Utils.getDefaultValue(defaultButton, Alert.OK);
    yesLabel = AS3JS.Utils.getDefaultValue(yesLabel, "Yes");
    noLabel = AS3JS.Utils.getDefaultValue(noLabel, "No");
    cancelLabel = AS3JS.Utils.getDefaultValue(cancelLabel, "Cancel");
    okLabel = AS3JS.Utils.getDefaultValue(okLabel, "OK");
    async = AS3JS.Utils.getDefaultValue(async, false);

    var yesButton = null;
    var noButton = null;
    var okButton = null;
    var cancelButton = null;

    var answer = Alert.CANCEL;

    var window = new Window(async ? "palette" : "dialog", title, undefined, { closeButton: false });

    var textGroup = window.add("group");
    var theText = textGroup.add("statictext", undefined, text, { multiline: true });
    theText.preferredSize.width = 400;
    theText.minimumSize.height = 80;
    theText.maximumSize.height = 600;

    var groupButtons = window.add("group");
    if (flags & Alert.YES) {
        yesButton = groupButtons.add("button", undefined, yesLabel, { name: "yes" });
        yesButton.onClick = function () {
        	answer = Alert.YES;
        	window.close();
        	if (async) {
        		if (closeHandler !== null) {
        			closeHandler({ detail: answer });
        		}
        	}
        }
    }
    if (flags & Alert.NO) {
        noButton = groupButtons.add("button", undefined, noLabel, { name: "no" });
        noButton.onClick = function () {
        	answer = Alert.NO;
        	window.close();
        	if (async) {
        		if (closeHandler !== null) {
        			closeHandler({ detail: answer });
        		}
        	}
        }
    }
    if (flags & Alert.OK) {
        okButton = groupButtons.add("button", undefined, okLabel, { name: "ok" });
        okButton.onClick = function () {
        	answer = Alert.OK;
        	window.close();
        	if (async) {
        		if (closeHandler !== null) {
        			closeHandler({ detail: answer });
        		}
        	}
        }
    }
    if (flags & Alert.CANCEL) {
        cancelButton = groupButtons.add("button", undefined, cancelLabel, { name: "cancel" });
        cancelButton.onClick = function () {
        	answer = Alert.CANCEL;
        	window.close();
        	if (async) {
        		if (closeHandler !== null) {
        			closeHandler({ detail: answer });
        		}
        	}
        }
    }
    switch (defaultButton) {
    	case Alert.YES:
    		if (yesButton != null) {
    			window.defaultElement = yesButton;
    		}
    		break;

    	case Alert.NO:
    		if (noButton != null) {
    			window.defaultElement = noButton;
    		}
    		break;

    	case Alert.OK:
    		if (okButton != null) {
    			window.defaultElement = okButton;
    		}
    		break;

    	case Alert.CANCEL:
    		if (cancelButton != null) {
    			window.defaultElement = cancelButton;
    		}
    		break;
    }
    if (cancelButton != null) {
    	window.cancelElement = cancelButton;
    }
	
	window.show();
	if (async == false) {
		if (closeHandler !== null) {
			closeHandler({ detail: answer });
		}
	}
	return answer;
}

if (false) {
	var result = Alert.show("More text \rAre you sure you want \rto remove\rthe labels from \rthe current \rselected boxes or text?", "Remove labels", Alert.YES | Alert.NO, null, Alert.YES, "Ja", "Nee", "Annuleer", "Okidoki");
	$.writeln("result " + result);

	result = Alert.show("More text \rAre you sure you want \rto remove\rthe labels from \rthe current \rselected boxes or text?", "Remove labels", Alert.YES | Alert.NO | Alert.CANCEL | Alert.OK, null, Alert.NO, "Ja", "Nee", "Annuleer", "Okidoki");
	$.writeln("result " + result);

}

module.exports = {
	Alert
}
1 Like
2

(I’ve quickly reformatted your post for readability. You can use three backticks to format code blocs like this:)

```js
// JavaScript Code
console.log(‘Hello world’)
```

which results in this:

// JavaScript Code
console.log(‘Hello world’)
3

From reading the code, it seems you are trying to write a ScriptUI in UXP. But it does not exist, and you need an alternative.

The html-based panel/dialog supported by UXP, or InDesign’s app.dialogs are possible candidates. Here is an example of alert in app.dialogs.