Script UI help for InDesign

Report · Jan 12, 2024

Hi

This is the first script I have written for UI. I am stuck at two places.

I have a drop down which shows all the paragraph styles available in my document.

There is a static text at the left side of the dropdown which acts as a label.

There is another statictext on the right side of the dropdown which I want to populate with the selected option from the dropdown.

Issue 1: How to populate it with the selected text.

Issue 1: How to bring that static text at the right side, below the dropdown and above the buttons.

//Get handle to active document
var myDoc=app.activeDocument;

//Get list of para styles defined in the document and store the arrow in a variable
var paraNames = myDoc.paragraphStyles.everyItem().name;

//Create a window object
var myWindow = new Window("dialog","List of Paragraph Styles");

//Change the orientation of Window from column to row. Column is DEFAULT
//Row shows side by side.
//myWindow.orientation = "row";

//Create two groups. One for the dropdown and the other for buttons
myInfoGroup = myWindow.add("group");
myButtonGroup = myWindow.add("group");

//Add items to groups
myInfoGroup.add("statictext",undefined,"List of Paragraph styles");

//Add dropdown List
var myDropdown = myInfoGroup.add("dropdownlist",undefined,paraNames);

myInfoGroup.add("statictext",undefined,"Selected item");

//default display of the dropdown
myDropdown.selection=0;


//Add buttons to myButtonGroup
var btnOK = myButtonGroup.add("button",undefined,"OK");
var btnCancel = myButtonGroup.add("button",undefined,"Cancel");


btnOK.onClick = function(){
alert("do some processing");	
};
btnCancel.onClick = function(){
	myWindow.close(0);
};

//Show the window
myWindow.show();

Report · Jan 12, 2024

Ok I somehow managed to populate the selected style to the text label. But it is not wide enough to show full text.

Here is the updated code.

//Get handle to active document
var myDoc=app.activeDocument;
var mySelection="Selected text";
//Get list of para styles defined in the document and store the arrow in a variable
var paraNames = myDoc.paragraphStyles.everyItem().name;

//Create a window object
var myWindow = new Window("dialog","List of Paragraph Styles");

//Change the orientation of Window from column to row. Column is DEFAULT
//Row shows side by side.
//myWindow.orientation = "row";

//Create two groups. One for the dropdown and the other for buttons
myInfoGroup = myWindow.add("group");
myButtonGroup = myWindow.add("group");

//Add items to groups
myInfoGroup.add("statictext",undefined,"List of Paragraph styles");

//Add dropdown List
var myDropdown = myInfoGroup.add("dropdownlist",undefined,paraNames);

myText = myInfoGroup.add("statictext",undefined,mySelection);

//default display of the dropdown
myDropdown.selection=0;


//Add buttons to myButtonGroup
var btnOK = myButtonGroup.add("button",undefined,"OK");
var btnCancel = myButtonGroup.add("button",undefined,"Cancel");


btnOK.onClick = function(){
alert("do some processing");	
};

btnCancel.onClick = function(){
	myWindow.close(0);
};

myDropdown.onChange = function(){
	mySelection = myDropdown.selection.text;
	myText.text = mySelection;
};

//Show the window
myWindow.show();

Report · Jan 12, 2024

Hi @shahidr100

Make more room to your StaticText:

// ...
myText = myInfoGroup.add("statictext",undefined,mySelection);
myText.preferredSize = [200,-1];
// ...

Best,

Marc

Report · Jan 12, 2024

@Marc Autret Thanks for the code. And how to bring it to the next line ?

Report · Jan 12, 2024

@Marc Autret Thanks for the code. And how to bring it to the next line ?

Probably sth like:
myInfoGroup.orientation = 'column';

Best,

Marc

Report · Jan 13, 2024

@Marc Autret Thanks for the reply. I have managed to bring the text label to the next line by creating another group but now I am facing another issue.

The drop down list is popluated with the paragraph styles. I will select the paragraph style and when I click on OK button, it will convert that paragraph style to curves throughout the document. The convert the curves routine is working by itself if I hardcode the name of the style but when I usi GUI the script is not working. Here is the updated code:

//Get handle to active document
var myDoc=app.activeDocument;
var mySelection="Selected text";
//Get list of para styles defined in the document and store the arrow in a variable
var paraNames = myDoc.paragraphStyles.everyItem().name;

//Create a window object
var myWindow = new Window("dialog","List of Paragraph Styles");

//Change the orientation of Window from column to row. Column is DEFAULT
//Row shows side by side.
//myWindow.orientation = "row";

//Create two groups. One for the dropdown and the other for buttons
myInfoGroup = myWindow.add("group");
mySelectedGroup = myWindow.add("group");
myButtonGroup = myWindow.add("group");

//Add items to groups
myInfoGroup.add("statictext",undefined,"List of Paragraph styles");

//Add dropdown List
var myDropdown = myInfoGroup.add("dropdownlist",undefined,paraNames);

myText = mySelectedGroup.add("statictext",undefined,mySelection);
myText.characters=30;

//default display of the dropdown
myDropdown.selection=0;


//Add buttons to myButtonGroup
var btnOK = myButtonGroup.add("button",undefined,"OK");
var btnCancel = myButtonGroup.add("button",undefined,"Cancel");

btnOK.onClick = function(){
//alert(mySelection);	
app.findGrepPreferences = null;
app.findGrepPreferences.findWhat = "^[^\\r]+\\r?";
app.findGrepPreferences.appliedParagraphStyle = mySelection;
list = app.activeDocument.findGrep();  

if ( list.length < 0 ) 
{
	alert( 'style ' + mySelection.name + ' not found' );  
	app.findGrepPreferences = null;
}
else{
	for(i=0;i<list.length;i++){
		list[i].createOutlines();
	}
}
app.findGrepPreferences = null;

};

btnCancel.onClick = function(){
	myWindow.close(0);
};

myDropdown.onChange = function(){
	mySelection = myDropdown.selection.text;
	myText.text = mySelection;
};

//Show the window
myWindow.show();

Report · Jan 13, 2024

Hi @shahidr100 , I don’t think you need the text field on the right in order to get the selected style. Here‘s an example using the InDesign dialog class rather than scriptUI:

var ps, ft;
var theDialog = app.dialogs.add({name:"Paragraph Style to Outline", canCancel:true});
with(theDialog){
    with(dialogColumns.add()){
        with(dialogColumns.add()){
            //the static text for the list
            staticTexts.add({staticLabel:"Choose a Style:"});
        }
    with(dialogColumns.add()){
        //the drop downlist populated with paragraph style names
        ps = dropdowns.add({stringList:app.activeDocument.paragraphStyles.everyItem().name, selectedIndex:0, minWidth:80});
    } 
}
if(theDialog.show() == true){
    //sets ps to the selected paragraph style object
    ps = app.activeDocument.paragraphStyles.item(ps.selectedIndex);
    app.findGrepPreferences = app.changeGrepPreferences = app.findChangeGrepOptions = null;
    app.findGrepPreferences.appliedParagraphStyle = ps;
    //the found texts with the style applied
    ft = app.activeDocument.findGrep();
    for (var i = 0; i < ft.length; i++){
        try {ft[i].createOutlines()}catch(e) {}  
    };
    theDialog.destroy();
    alert("Selected Style: " + ps.name);
    }
} 
 
 
Keep in mind outlining does not work with bulleted lists, underlines, etc.
 

Report · Jan 13, 2024

@rob day Thanks a ton for the code. It worked, however, I would like to know why my code is not working. I have made some alterations but still no change. Strange thing is that the code is working fine if I do not use GUI and copy paste the btnOK code in a separate file as an individual script.

//Get handle to active document
var myDoc=app.activeDocument;
var mySelection;

//Get list of para styles defined in the document and store the arrow in a variable
var paraNames = myDoc.paragraphStyles.everyItem().name;

//Create a window object
var myWindow = new Window("dialog","List of Paragraph Styles");

//Create two groups. One for the dropdown and the other for buttons
myInfoGroup = myWindow.add("group");
mySelectedGroup = myWindow.add("group");
myButtonGroup = myWindow.add("group");

//Add items to groups
myInfoGroup.add("statictext",undefined,"List of Paragraph styles");
var myDropdown = myInfoGroup.add("dropdownlist",undefined,paraNames);
myText = mySelectedGroup.add("statictext",undefined,mySelection);
myText.characters=30;

//default display of the dropdown
myDropdown.selection=0;


//Add buttons to myButtonGroup
var btnOK = myButtonGroup.add("button",undefined,"OK");
var btnCancel = myButtonGroup.add("button",undefined,"Cancel");


btnOK.onClick = function(){Convert2Curves();}

btnCancel.onClick = function(){
	myWindow.close(0);
};

myDropdown.onChange = function(){
	mySelection = myDropdown.selection.text;
	myText.text = mySelection;
};

//Create a function named Convert2Curves
function Convert2Curves(){
	alert("inside the fucntion");
	app.findGrepPreferences = null;
	app.findGrepPreferences.findWhat = "^[^\\r]+\\r?";
	app.findGrepPreferences.appliedParagraphStyle = mySelection.trim();
	list = myDoc.findGrep();  

if ( list.length < 0 ) {
	alert( 'style ' + mySelection.name + ' not found' );  
	app.findGrepPreferences = null;
}
else{
	for(i=0;i<list.length;i++){
		list[i].createOutlines();
	}
}
//app.findGrepPreferences = null;
}
//Show the window
myWindow.show();

Report · Jan 13, 2024

You are trying to run the Convert2Curves() function while the dialog is open, and mySelection is returning a string not the paragraph style object.

I don’t use scriptUI that much because the built in dialog class takes less code for simple dialogs like yours, but this should work:

showDialog()

//declare mySelection outside of show dialog 
var mySelection;
function showDialog(){

    //Get handle to active document
    var myDoc=app.activeDocument;

    //Get list of para styles defined in the document and store the arrow in a variable
    var paraNames = myDoc.paragraphStyles.everyItem().name;

    //Create a window object
    var myWindow = new Window("dialog","List of Paragraph Styles");

    //Create two groups. One for the dropdown and the other for buttons
    myInfoGroup = myWindow.add("group");
    mySelectedGroup = myWindow.add("group");
    myButtonGroup = myWindow.add("group");

    //Add items to groups
    myInfoGroup.add("statictext",undefined,"List of Paragraph styles");
    var myDropdown = myInfoGroup.add("dropdownlist",undefined,paraNames);
    myText = mySelectedGroup.add("statictext",undefined,mySelection);
    myText.characters=30;

    //default display of the dropdown
    myDropdown.selection=0;

    //Add buttons to myButtonGroup
    var btnOK = myButtonGroup.add("button",undefined,"OK");
    myButtonGroup.add("button",undefined,"Cancel");

    myDropdown.onChange = function(){
	    mySelection = myDropdown.selection.text;
	    myText.text = mySelection;
    };

    btnOK.onClick = function(){
        myWindow.close(); 
    }
    var res = myWindow.show() 
    if (res == 2){
        return;
    }
    //after the dialog is closed run the function
    Convert2Curves()
}




//Create a function named Convert2Curves
function Convert2Curves(){
	//alert("inside the fucntion");
    var myDoc = app.activeDocument;
    //mySelection is a string and the grep needs the paragraph style object, so get item by name
    var ps = myDoc.paragraphStyles.itemByName(mySelection)
	app.findGrepPreferences = null;
    //you shouldn‘t need a .findWhat:
	//app.findGrepPreferences.findWhat = "^[^\\r]+\\r?";
	app.findGrepPreferences.appliedParagraphStyle = ps
	list = myDoc.findGrep();  

    if ( list.length < 0 ) {
	    alert( 'style ' + mySelection.name + ' not found' );  
	    app.findGrepPreferences = null;
    }
    else{
	    for(i=0;i<list.length;i++){
		    list[i].createOutlines();
	    }
    }
    //app.findGrepPreferences = null;
}

Report · Jan 13, 2024

Also a string name for .appliedParagraphStyle should work, so you can do this:

function Convert2Curves(){
    var myDoc = app.activeDocument;
	app.findGrepPreferences = app.changeGrepPreferences = app.findChangeGrepOptions = null;
    // mySelection.toString() also works 
	app.findGrepPreferences.appliedParagraphStyle = mySelection.toString()
	list = myDoc.findGrep();  

    if ( list.length < 0 ) {
	    alert( 'style ' + mySelection.name + ' not found' );  
	    app.findGrepPreferences = null;
    }
    else{
	    for(i=0;i<list.length;i++){
		    list[i].createOutlines();
	    }
    }
}

Report · Jan 13, 2024

@rob day Thank you so much. I did not know that the Indesign has builtin dialog class.

I will try the code which you have given and also try to correct my code so that I can learn.

Thanks once again.

Report · Jan 13, 2024

This thread might help with scriptUI vs InDesign’s dialog class:

https://community.adobe.com/t5/indesign-discussions/indesign-scripting-1-window-v-dialog/td-p/143519...

Report · Jan 14, 2024

@rob day Thank you so much Rob.

Adobe Community

Script UI help for InDesign

2 Correct answers