Scripting: creating of dialog elements

[Lordrhavin]

I can create dialog elements like this:
var dlg = new Window ("dialog", "Title");
dlg.add(...);

Can I do this somehow like this:

var dlg = new Window ("dialog", "Title");

var element = .....;
*some magic*
dlg.add(element);
?

[Eugene Tyson]

You mean something like this

// Create a dialog window
var dlg = new Window("dialog", "Title");

// Create an element dynamically
var element = dlg.add("button", undefined, "Click Me");

// Add event listener to the button
element.onClick = function() {
    alert("Button clicked!");
};

// Show the dialog window
dlg.show();

[Lordrhavin]

No, I mean something like I asked.

[Eugene Tyson]

I can't figure out what you're trying to do - so without a clear understanding we'll be stuck in a loop.

[sneha30692552dvkj]

Hey hi, 

it is dynamically creating dialog elements and add them to a dialog window using the add() method after creating the dialog window is it.

[Robert at ID-Tasker]

If you mean if you can separate commands when building dialog before you show it - yes.

[Lordrhavin]

No, I mean something like I asked: separating creaton of the dialog element and actually adding it to its parent. Like you can for example do in browsers javascript:

var e = createElement(...);
/* something awesome */
parent.append(e);

[Manan Joshi]

Seems not possible because the Window element does not have any other method apart from the add method to add controls to it and that does not take any control object as an argument. Also when I tried to create an object of Button I got an error that it does not have a constructor

-Manan

[Eugene Tyson]

Would creating elements separately work?

Just as an example

// Create a dialog window
var dlg = new Window("dialog", "Title");

// Define a function to create elements
function createElement(type, properties) {
    var element = dlg.add(type, undefined, properties.text);
    // Add any additional properties you need
    if (properties.onClick) {
        element.onClick = properties.onClick;
    }
    // Add more properties as needed
    return element;
}

// Create an element dynamically
var buttonProperties = {
    text: "Click Me",
    onClick: function() {
        alert("Button clicked!");
    }
};
var button = createElement("button", buttonProperties);

// Show the dialog window
dlg.show();

[rob day]

Hi @Lordrhavin , Not sure if this is what you are looking for, but there is the built-in InDesign dialog class, which lets you add dialog objects. The dialog object API is here:

https://www.indesignjs.de/extendscriptAPI/indesign-latest/#DialogColumn.html#d1e594046

This example creates a dropdown with document swatches:

makeDialog();
var cs;
function makeDialog(){
    var d = app.dialogs.add({name:"Choose a Swatch", canCancel:true});
    var dcol = d.dialogColumns.add();
    var drow = dcol.dialogRows.add();
    drow.staticTexts.add({staticLabel:"Swatches:"});
    cs = drow.dropdowns.add({stringList:app.activeDocument.swatches.everyItem().name, selectedIndex:3, minWidth:80});
    if(d.show()){
        cs = app.activeDocument.swatches.everyItem().getElements()[cs.selectedIndex];
        main();
        d.destroy();
    }
}

function main(){
    alert("\rChosen Paragraph Style: " + cs.name);

}

Could also be written like this:

makeDialog();
var cs;
function makeDialog(){
    var d = app.dialogs.add({name:"Choose a Swatch", canCancel:true});
    with(d){
        with(d.dialogColumns.add()){
            staticTexts.add({staticLabel:"Swatches:"});
        }
        with(dialogColumns.add()){
            cs = dropdowns.add({stringList:app.activeDocument.swatches.everyItem().name, selectedIndex:3, minWidth:80});
        } 
        if(d.show()){
            cs = app.activeDocument.swatches.everyItem().getElements()[cs.selectedIndex];
            main();
            d.destroy();
        }
    }
}

function main(){
    alert("\rChosen Paragraph Style: " + cs.name);

}

[Manan Joshi]

Hi @rob day and @Eugene Tyson I suppose what @Lordrhavin is asking is to create the widgets without using the add method of the dialog or window. So you create something like new Button("My Button") at a point in code and then at some other point add this button to the window/dialog etc.

So the idea is to seperate the creation of widgets and their placement within the container

-Manan

[Robert at ID-Tasker]

Hi @rob day and @Eugene Tyson I suppose what @Lordrhavin is asking is to create the widgets without using the add method of the dialog or window. So you create something like new Button("My Button") at a point in code and then at some other point add this button to the window/dialog etc.

So the idea is to seperate the creation of widgets and their placement within the container

-Manan

By @Manan Joshi

But Button without adding it to the Dialog doesn't make sense?

If you know how it should look like - and where it should be - why not add it when needed?

And if you don't know where it should be or how it should look like - why to "create" it in advance?

[Manan Joshi]

It does make some sense to me. Like say you have libraries which take a widget as an argument to the methods. Now it won't make so much sense in JS but the idea has merit according to me.

-Manan

[Robert at ID-Tasker]

It does make some sense to me. Like say you have libraries which take a widget as an argument to the methods. Now it won't make so much sense in JS but the idea has merit according to me.

-Manan

By @Manan Joshi

It's above my paygrade.

[rob day]

So the idea is to seperate the creation of widgets and their placement within the container

Hi @Manan Joshi , The reason I pointed to the dialog class is there are a number of dialog objects that are ready made, which can make the coding simpler because they don’t have to be constructed—angleComobox, angleEditbox, checkboxControl, integerCombobox, integerEditbox, etc. You could create those objects with ScriptUI, but if the dialog needs fall with in the InDesign dialog class and its objects, the coding is easier using dialog().

[Manan Joshi]

Hi @rob day I also looked into the dialog class when I first responded to this post. However, I think it did not exactly match the OP's ask. Anyhow, I am not the creator of the post. I would like @Lordrhavin to respond to the ideas we all gave and maybe respond with the actual use case.

-Manan

[Lordrhavin]

Im not at the computer running Indesign currently and not even inside the building, so I cant post the actual code. The design I preferred would create all controls in function, put them in apropriate controll classes and add or remove them from the dialog if they are needed. I thought this is complertely obvious from:

var dlg = new Window ("dialog", "Title");

var element = .....;  //<- creation of element
*some magic*
dlg.add(element);  //<- putting element into parent.

I can do it the other way around, but that would be more code dublication and less encapsulation, because most of the creation functions wouldnt need to know anything about the parent dialog.

[rob day]

I don’t think it is possible because most of the ScriptUI objects don’t have constructors. You can construct a new Window object, but not a new checkbox object—this throws a checkbox does not have a constuctor error

var d = new Window("dialog"); 
var cb = new checkbox() 

The first parameter of the ScriptUI add() method is the UI element type, so you have to do this:

var d = new Window("dialog"); 
var cb =  d.add("checkbox")

The InDesign dialog() class uses a different approach, which in the end requires less code if you can build your dialog with the provided objects.

There is checkboxControls, which is a collection. The collection’s add() method’s single parameter is the properties of a checkboxControl (there is no type property):

var d = app.dialogs.add({name:"Dialog", canCancel:true});
var dc = d.dialogColumns.add()
var cb = dc.checkboxControls.add({checkedState:true});

Not sure why you would do it but this works:

var dlg = new Window ("dialog", "Checkbox");
var element = "checkbox";
dlg.add(element);
dlg.show() 

[Lordrhavin]

Yeah, thats not an element, thats a string 😄

Cant do element.value = true f.e.

[rob day]

thats not an element, thats a string

But it is a constant, not any string will work—this throws an error

var dlg = new Window ("dialog", "Checbox");
dlg.add("bigcheckbox");
//error: UI element type 'bigcheckbox' is unknown or invalid in this context
dlg.show() 

[Manan Joshi]

@Lordrhavin so basically the crux is that this is not possible. You will have to use the add method to create the widgets and that is the only way it seems.

-Manan

[John D Herzog]

It is possible with UXP scripting since you add the elements to the parent with: parent.appendChild(child);.

[Manan Joshi]

@John D Herzog the code OP is trying to use and asking about is ScriptUI. So UXP would be digressing from the original ask.

-Manan

[John D Herzog]

So instead of giving another option, we just need to say no you cannot and be done? I know they were using ScriptUI code, but no where did I read that they were completely committed to it. All I read was that they wanted to make a dialog how they wanted to make it.

[Manan Joshi]

You are welcome to give your opinion. I was just pointing that the OP did not ask for an alternative as per my reading of the ask and since we have had such a long discussion on the topic it showed that the OP was invested in this approach. But as I said it's an open forum and that involves people interacting with each other. Hence, I added my opinion to your post. If you did not like that then I apologise.

-Manan