Inspiring

Question

Scripting: creating of dialog elements

Forum|Forum|2 years ago
April 3, 2024
4 replies
2775 views

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);
?

rob day

Community Expert

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);

}

M

Manan Joshi

Community Expert

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

Legend

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?

M

Manan Joshi

Community Expert

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

E

Eugene Tyson

Community Expert

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();

Robert at ID-Tasker

Legend

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

LordrhavinAuthor

Inspiring

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&colon;

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

E

Eugene Tyson

Community Expert

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();

LordrhavinAuthor

Inspiring

No, I mean something like I asked.

E

Eugene Tyson

Community Expert

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded