Indesign scripting: 1) window v. dialog

[Matt276783077obu]

Hi,

I am working on a script with a basic-ish UI, for Indesign 17, hoping to port it to v 18 (and beyond) eventually.

I was working with the documentation from the scripting sdk for v 17.4, which creates ui's using app.dialogs, eg:

var myDialog = app.dialogs.add({name:"Simple Dialog"});

But I also found this wonderful ui builder tool: https://scriptui.joonas.me/, but it uses "Window"s, eg:

var myWindow = new Window ("dialog", title);

From what I can tell so far, they are distinct in the object model (window, dialog) and have different properties etc. (For example I tried to use an "integerEditbox" in a Window as declared above and it is not recognized) 

Is one prefereable to the other, for ease of use &/or future-proofing/Adobe-support? 

[rob day · Accepted solution]

For example I tried to use an "integerEditbox" in a Window as declared above and it is not recognized

Hi @Matt276783077obu , I think InDesign’s built-in dialog class is easier to use than the ScriptUI classes, but ScriptUI can build more complex dialogs. The integerEditbox object is part of the built-in dialog class, so you can’t use it with a ScriptUI window.

If you can work within the limits of the dialog class the code can be less complex—integerEditbox forces the user to enter an integer without any extra code. Or, the measurementEditbox lets you set any measurement unit and the return value will be converted to points for your main script.

[rob day]

I use this a s a template for all the dialog class objects:

//result variables
var pdfDropdown, colorDropdown, foodDropdown, foodList, angleCombo, integerCombo, realCombo, percentCombo, measureCombo, 
    enablePanel, ckBox, colRadio, pageRadio, spreadRadio,  
    realEdit, intEdit, percentEdit, measureEdit, angleEdit, textEditField, pageWidth;

//check for a doc
if (app.documents.length > 0) {
    app.scriptPreferences.measurementUnit = MeasurementUnits.POINTS;
    var doc = app.activeDocument;
    pageWidth = doc.documentPreferences.pageWidth
    makeDialog();
} else {alert("Please open a document and try again.")}

/**
* Make the  dialog 
* @ return void
*/

function makeDialog(){
    
    //the dialog name
    var theDialog = app.dialogs.add({name:"Dialog Components", canCancel:true});
    with(theDialog){
        with(dialogColumns.add()){
            //Panel Dropdowns and Combos
            with(dialogRows.add()){
                    staticTexts.add({staticLabel:"Panel 1 Dropdowns", staticAlignment:StaticAlignmentOptions.LEFT_ALIGN, minWidth: 150});
            }
            with(borderPanels.add()){
                with(dialogColumns.add()){
                    staticTexts.add({staticLabel:"PDF Drop Down:"});
                    staticTexts.add({staticLabel:"Swatches Drop Down:"});
                    staticTexts.add({staticLabel:"String Drop Down:"});
                    staticTexts.add({staticLabel:"Angle Combo:"});
                    staticTexts.add({staticLabel:"Integer Combo:"});
                    staticTexts.add({staticLabel:"Real Combo:"});
                    staticTexts.add({staticLabel:"Percent Combo:"});
                    staticTexts.add({staticLabel:"Measurement Combo:"});
                }
                with(dialogColumns.add()){

                    pdfDropdown = dropdowns.add({stringList:app.pdfExportPresets.everyItem().name, selectedIndex:3, minWidth:80});
                    colorDropdown = dropdowns.add({stringList:app.swatches.everyItem().name, selectedIndex:2, minWidth:80});


                    foodList = ["Mustard", "Relish", "Ketchup"];
                    foodDropdown = dropdowns.add({stringList:foodList, selectedIndex:0, minWidth:80});
                    angleCombo = angleComboboxes.add({stringList:["0", "90", "180"], editValue:0, maximumValue:360, minimumValue:0, smallNudge:1, largeNudge:10, minWidth:50});
                    integerCombo = integerComboboxes.add({stringList:["1", "2", "3"], editValue:0, maximumValue:100, minimumValue:0, smallNudge:1, largeNudge:10, minWidth:50});
                    realCombo = realComboboxes.add({stringList:[".1", ".2", ".3"], editValue:0, maximumValue:1, minimumValue:0, smallNudge:.01, largeNudge:.1, minWidth:50});
                    percentCombo = percentComboboxes.add({stringList:["10", "15", "20"], editValue:10, maximumValue:100, minimumValue:0, smallNudge:1, largeNudge:10, minWidth:50});
                    measureCombo = measurementComboboxes.add({stringList:[pageWidth.toString(), "600", "800", "1200", "1800"], editUnits:MeasurementUnits.PIXELS, editValue:pageWidth});
                }
            }
            //Panel 2 Enabling
            with(dialogRows.add()){
                    staticTexts.add({staticLabel:"Panel 2 Enabling", staticAlignment:StaticAlignmentOptions.LEFT_ALIGN, minWidth: 150});
            }
            enablePanel = enablingGroups.add({checkedState:false, minWidth:150})
            with(enablePanel){
                with(dialogColumns.add()){
                    staticTexts.add({staticLabel:"Check Box"});
                    staticTexts.add({staticLabel:"Columns"});
                    staticTexts.add({staticLabel:"Pages"});
                    staticTexts.add({staticLabel:"Spreads"});
                }
                with(dialogColumns.add()){
                    ckBox = checkboxControls.add({checkedState:false, minWidth:150});
                    with(radiobuttonGroups.add()){
                        colRadio = radiobuttonControls.add({checkedState:true});
                        pageRadio = radiobuttonControls.add({checkedState:true});
                        spreadRadio = radiobuttonControls.add({checkedState:true});
                    }
                }
            }
            //Panel 3 Editable
            with(dialogRows.add()){
                    staticTexts.add({staticLabel:"Panel 3 Edit Boxes", staticAlignment:StaticAlignmentOptions.LEFT_ALIGN, minWidth: 150});
            }
            with(borderPanels.add()){
                with(dialogColumns.add()){
                    staticTexts.add({staticLabel:"Real Edit:"});
                    staticTexts.add({staticLabel:"Integer Edit:"});
                    staticTexts.add({staticLabel:"Percent Edit:"});
                    staticTexts.add({staticLabel:"Measurement Edit:"});
                    staticTexts.add({staticLabel:"Angle Edit:"});
                    staticTexts.add({staticLabel:"Text Edit:"});
                }
                with(dialogColumns.add()){
                    realEdit = realEditboxes.add({editValue:0, maximumValue:10, minimumValue:0, smallNudge:.01, largeNudge:.1, minWidth:50});
                    intEdit = integerEditboxes.add({editValue:1, maximumValue:100, minimumValue:0, smallNudge:1, largeNudge:10, minWidth:50});
                    percentEdit = percentEditboxes.add({editValue:15, maximumValue:100, minimumValue:0, smallNudge:1, largeNudge:10, minWidth:50});
                    measureEdit = measurementEditboxes.add({editUnits:MeasurementUnits.MILLIMETERS, editValue:0, maximumValue:1000, minimumValue:0, smallNudge:1, largeNudge:10, minWidth:90});
                    angleEdit = angleEditboxes.add({editValue:0, maximumValue:360, minimumValue:0, smallNudge:1, largeNudge:10, minWidth:50});
                    textEditField = textEditboxes.add({editContents:"Hello World!", minWidth:150});
                }
            } 
        }
    }
	
    //the dialog results
    var res = theDialog.show();
    if(res == true){
        pdfDropdown = app.pdfExportPresets.item(pdfDropdown.selectedIndex);
        colorDropdown = app.swatches.item(colorDropdown.selectedIndex);
        foodDropdown = foodList[foodDropdown.selectedIndex];
        angleCombo = angleCombo.editValue; 
        integerCombo = integerCombo.editValue;
        realCombo = realCombo.editValue;
        percentCombo = percentCombo.editValue;
        measureCombo = measureCombo.editValue;//returns points
        
        enablePanel = enablePanel.checkedState
        ckBox = ckBox.checkedState;
        colRadio = colRadio.checkedState
        pageRadio = pageRadio.checkedState
        spreadRadio = spreadRadio.checkedState
        
        realEdit = realEdit.editValue;
        intEdit = intEdit.editValue;
        percentEdit = percentEdit.editValue;
        measureEdit = measureEdit.editValue;//returns points
        angleEdit = angleEdit.editValue; 
        textEditField = textEditField.editContents

        main()
	}else{
        theDialog.destroy();
    }
}


/**
* Script.
* @ return void 
*/

function main(){
    
    //the returned dialog values
    alert("\nPDF Preset = " + pdfDropdown.name +"\nColor = " + colorDropdown.name +"\nFood = " + foodDropdown +
    "\ncombo angle= " + angleCombo + "\ncombo integer= " + integerCombo +"\ncombo real= " + realCombo + 
    "\ncombo percent= " + percentCombo + "\ncombo measurement= "+ measureCombo + 
    "\nenable panel= "+ enablePanel + "\ncheck box= "+ ckBox +"\ncolumn radio= "+ colRadio + "\npage radio= "+ pageRadio + "\nspread radio= "+ spreadRadio +
    "\nreal edit = " + realEdit + "\ninteger edit = " + intEdit + "\npercent edit = " + percentEdit +"\nmeasure edit= "+ measureEdit +
    "\nangle edit= "+ angleEdit +"\ntext edit= "+ textEditField)
    //reset
    app.scriptPreferences.measurementUnit = AutoEnum.AUTO_VALUE;
}

 

The output values returned to the main script

[Matt276783077obu]

Hi Rob, thanks for the thoughtful response. I ended up using a Window in this case b/c that drag and drop builder is so handy, and my UI layout ended up a little complex. Also I have to do some qualitative reponse validation beyond unit type anyways.

But  your response makes a lot of sense and your template is terrific and will come in handy in other cases I am sure. 🙂

Thanks again for taking the time!