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

Scripting: creating of dialog elements

Participant ,
Apr 03, 2024 Apr 03, 2024

Copy link to clipboard

Copied

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

TOPICS
How to , Scripting

Views

863

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
Community Expert ,
Apr 03, 2024 Apr 03, 2024

Copy link to clipboard

Copied

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

Votes

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
Participant ,
Apr 03, 2024 Apr 03, 2024

Copy link to clipboard

Copied

No, I mean something like I asked.

Votes

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
Community Expert ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied

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

Votes

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
Explorer ,
Apr 03, 2024 Apr 03, 2024

Copy link to clipboard

Copied

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.

Votes

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
Community Expert ,
Apr 03, 2024 Apr 03, 2024

Copy link to clipboard

Copied

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

 

Votes

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
Participant ,
Apr 03, 2024 Apr 03, 2024

Copy link to clipboard

Copied

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

Votes

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
Community Expert ,
Apr 03, 2024 Apr 03, 2024

Copy link to clipboard

Copied

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

Votes

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
Community Expert ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied

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

 

Votes

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
Community Expert ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied

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

}

 

 

 

 

Screen Shot 34.png

 

Votes

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
Community Expert ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied

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

Votes

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
Community Expert ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied

quote

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?

 

Votes

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
Community Expert ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied

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

Votes

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
Community Expert ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied

quote

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.

 

Votes

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
Community Expert ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied

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

 

Votes

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
Community Expert ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied

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

Votes

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
Participant ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied

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.

Votes

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
Community Expert ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied

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

 

 

 

 

Votes

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
Participant ,
Apr 05, 2024 Apr 05, 2024

Copy link to clipboard

Copied

Yeah, thats not an element, thats a string 😄

Cant do element.value = true f.e.

Votes

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
Community Expert ,
Apr 05, 2024 Apr 05, 2024

Copy link to clipboard

Copied

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

 

 

 

Votes

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
Community Expert ,
Apr 07, 2024 Apr 07, 2024

Copy link to clipboard

Copied

@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

Votes

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
Engaged ,
Apr 18, 2024 Apr 18, 2024

Copy link to clipboard

Copied

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

Votes

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
Community Expert ,
Apr 18, 2024 Apr 18, 2024

Copy link to clipboard

Copied

@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

Votes

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
Engaged ,
Apr 19, 2024 Apr 19, 2024

Copy link to clipboard

Copied

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.

Votes

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
Community Expert ,
Apr 21, 2024 Apr 21, 2024

Copy link to clipboard

Copied

LATEST

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

Votes

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