Home > HOT Posts!, InDesign Scripts > Custom ScriptUI Text Insert Menu

Custom ScriptUI Text Insert Menu

Few days ago on Adobe’s InDesign scripting forum I found question how to create custom menu to insert predefined text items into ScriptUI text box. I started to research and found really easy and good way you achieve this handy “menu”. All we need is dropdown and short script for controlling insert behavior.

First, let’s see how InDesign shows menu like this:

As we can see, it’s not dropdown, it’s like menu, but unfortunately ScriptUI doesn’t have ‘Menu’ component. What we can do is to use dropdown menu, and squeeze it so we can just see dropdown arrow. First, let’s create Array of elements we are going to use in dropdown. Every element will hold two or three sub elements: first is text we are going to see in drop down (we can put “sep” to insert separator), second is value we want to insert into text box, and third is optional if we want to use icon.

var myItems = Array(["  ----Select Item----  ",""], ["Item 1","\\i1","y"], ["Item 2","\\i2","y"], ["Item 3","\\i3"], ["sep",""], ["Item 4","\\i4","y"], ["Item 5","\\i5"], ["Item 6","\\i6","y"], ["sep",""], ["Item 7","\\i7"], ["Item 8","\\i8"], ["Item 9","\\i9"], ["Item 10","\\i10","y"]);

Good, now, let’s create simple window, with edit text box and a dropdown:

var myWin = new Window('dialog','Custom Insert Menu');
var editText = myWin.add('edittext');
var myDrop = myWin.add('dropdownlist');
myWin.orientation = 'row';
myWin.spacing = 0;
editText.preferredSize = [250,25];
editText.active=true;

To populate dropdown from Array we just create loop. Also, while we add items to dropdown, we check third element of Array and if exists, we attach icon to item.

for(var i = 0; i < myItems.length; i++){
  if(myItems[i][0] == "sep"){
    myDrop.add('separator');
  }else{
    myDrop.add('item',myItems[i][0]);
    if(myItems[i][2])
    myDrop.items[i].image = File('/d/info.png');
    else
    myDrop.items[i].image = File('/d/empty.png');
  }
}

Great, now, we squeeze dropdown to minimal size, select first item in dropdown, and main thing is to add ‘onChange’ event.

myDrop.preferredSize = [15,25];
myDrop.selection = 0;
myDrop.onChange = function(){
  editText.textselection += myItems[myDrop.selection.index][1];
  myDrop.selection = 0;
  editText.active=true;
}

So, what we are doing here in ‘onChange’ event? First, we pull value we want to insert from Array. Then we change dropdown selection back to first default item. Why? Because if we want to use same item again, event is not fired up, because item is already selected, so we have to reset it. And at the end, we bring focus back to text box. You probably noticed that we are using textselection instead of text. Why? What if we want to insert text right after the cursor in text box? Using editText.text += would add text to the end of actual string, not to the current cursor position, but with editText.textselection += we insert text right after the cursor.

All we have to do now is to show dialog, and we are done.

myWin.center();
myWin.show();

And here is the result:

Yeah, that’s it!

Have fun!😀

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: