Home > InDesign Scripts > Add icon to dropdown/listbox items

Add icon to dropdown/listbox items

Have you ever wanted to add a dropdown/listbox item but with icon beside? This is not really possible with native InDesign dialog manager, but it can be done with ScriptUI! It’s really easy to achieve this great little feature. So, let’s take a short look how to do this. :)

Creation method is almost the same for dropdown and for listbox. All we have to do is to assign ‘.image();’ property to list item that we want to have an icon. Icon can be imported through ‘ScriptUI.newImage();’ or we can use just ‘File();’. We can import image to variable, or we can import it directly into list item. Image size can be up to 255 × 255 px. We are going to create Array that we are going to use in this example. One ‘Array’ element has two items. First item is name, and second is just file name.

var myList = Array(['Design Float','designfloat'], ['Digg','digg'], ['Email','email'], ['Evernote','evernote'], ['Facebook','facebook'], ['Flickr','flickr'], ['Google','google'], ['Google Voice','google_voice'], ['Google Talk','googletalk'], ['Last.fm','lastfm'], ['MySpace','myspace'], ['Picasa','picasa'], ['Skype','skype'], ['Twitter','twitter'], ['Vimeo','vimeo'], ['Wordpress','wordpress'], ['YouTube','youtube']);

Good, now, let’s create ScriptUI window:

var win = new Window('dialog','IndiSnip ListItem Icons Example');

First, we are going to add empty dropdown element to our dialog:

var myDropDown = win.add ('dropdownlist');

Good, now, all we have to do is to populate dropdown with array we prepared:

for(var i = 0; i < myList.length; i++){
    myDropDown.add('item',myList[i][0]);
    if(myList[i][1]){
        myDropDown.items[i].image = ScriptUI.newImage('/c/!myIcons/'+myList[i][1]+'.png');
    }
}
myDropDown.selection = 0;
myDropDown.itemSize = [350,20];

In second row, we add item to dropdown, and in third we are assigning image to currently added item. All we have to do now is to show the form to see the results:

win.center();
win.show();

And here is the result:

Just to mention one more thing. If we want to assign icon to already populated listbox, we have to target list item index like this:

myDropDown.items[0].image = ScriptUI.newImage('/c/!myIcons/youtube.png');

We can retrieve info about selected item like this:

var myListIndex = myDropDown.selection.index;
var myListText = myDropDown.selection.text;
var myListIcon = myDropDown.selection.image;

Now, let’s take a look how to achieve this with listbox. We are going to use same Array and window we created and we are going to add listbox to the dialog. We are going to define two columns also.

var myListBox = win.add ('ListBox', undefined, undefined, {numberOfColumns: 2, showHeaders: true, columnTitles: ['Publish service', 'Description']});
myListBox.bounds = [0,0,350,150];

Remember, listbox item is little bit different that dropdown item if we have more than one column. If we DO have more than one column, then we access columns through ‘.subItems[]’ property. Good, now, let’s populate it.

for(var i = 0; i < myList.length-1; i++){
    myListBox.add('item',myList[i][0]);
    myListBox.items[i].subItems[0].text = "Add " + myList[i][0] + " as publish service";
    if(myList[i][1]){
            myListBox.items[i].image = ScriptUI.newImage('/c/!myIcons/'+myList[i][1]+'.png');
    }
}
myListBox.selection = 0;
myListBox.itemSize = [undefined,25];

Like with dropdown, in second line we add item, in third we assign text to second column, and in fourth we assign icon. In this example icon is placed in first column, but it can be also added in second column. All we have to do is to alter fourth line like this:

myListBox.items[i].subItems[0].image = ScriptUI.newImage('/c/!myIcons/'+myList[i][1]+'.png');

Notice that ‘.subItems[]’ index starts from 0 for second column. All we have to do now is to show dialog and see what we have done :)

win.center();
win.show();

And here is the result:

Also, we can assign icon to already populated listbox, or change icon if we want. It’s pretty easy to do. Here is the code for picture change:

myListBox.items[0].image = ScriptUI.newImage('/c/!myIcons/youtube.png');

Or maybe we want to assign in second column icon also, we can do it like this:

myListBox.items[0].subItems[0].image = ScriptUI.newImage('/c/!myIcons/youtube.png');

For treeview is pretty much the same like listbox. Only thing is that icon can’t be bigger that 16 × 16 px. Here is sample:

Yeah, that’s it!

Have fun! :D

About these ads
  1. Jernej
    October 18, 2010 at 23:43

    Is it possible to add shortcut key for listbox items, i mean for items inside list, so when keystroke or combination is pressed, item is selected.
    thnx

    • October 19, 2010 at 00:17

      Good question! Never tried something similar. What you can do, probably, is to add eventListener to window to catch keys that are pressed, and depending on combination, select item from listbox.

      Hope that helps :)

      -=-
      Marijan (tomaxxi)

      • Jernej
        October 21, 2010 at 02:26

        Im not very familiar with Eventhandlers yet, but i’ll try to search solution in this direction. Thanks anyway. I find this blog very usefull. Once I’ll have more time I’ll create my own.

  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

Follow

Get every new post delivered to your Inbox.

Join 36 other followers

%d bloggers like this: