Creative Communities of the World Forums

The peer to peer support community for media production professionals.

Activity Forums Adobe After Effects Dockable GUI issues – load dropdownlist from array

  • Dockable GUI issues – load dropdownlist from array

    Posted by Jeroen Rommelaars on November 21, 2017 at 12:55 pm

    Hey guys,

    Im working on my first dockable GUI panel but im running into issues.
    Im building this mainly by sticking pieces of code from the web together, with a more than basic understanding of javascript, but nothing special.

    I decided to load my dockable window using a resource string, as I read that was the best option if you want to create a dockable window. Fine, but terribly documented and hardly anything to be found online. Just my luck ☺

    Anyways, what im trying to do is load a dropdownlist into my window, which is filled with the names of all the layers from a comp called ‘master’.
    I think I can figure it out in regular scripting, but this resource string is really making it hard for me. Does anyone know how to tackle this?

    If not, can anyone point me in the right direction of creating a dockable window without the use of a recourse string?

    My code at the moment looks like this:

    var masterComp;
    for (var i = 1; i <= app.project.numItems; i ++) {
    if ((app.project.item(i) instanceof CompItem) && (app.project.item(i).name === 'master')) {
    masterComp = app.project.item(i);
    break;
    }
    }
    var myList = new Array();

    // UI Code
    {
    function myScript(thisObj) {
    function myScript_buildUI(thisObj){
    var myPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "My window name", undefined,{resizeable:true});

    for(var i=1; i <= masterComp.numLayers; i++){
    myList[myList.length] = masterComp.layer(i).name;
    }

    res = "group{orientation:'row',\
    groupOne: Group {orientation:'column',\
    masterButton: Button{text:'Master'},\
    layerButton1: Button{text:'First Name'},\
    layerButton2: Button{text:'Last Name'},\
    layerButton3: Button{text:'Gender'},\
    layerButton4: Button{text:'Phonenumber'},\
    layerButton5: Button{text:'Email'},\
    layerButton6: Button{text:'Work'},\
    layerButton7: Button{text:'Streetname'},\
    layerButton8: Button{text:'Housenumber'},\
    layerButton9: Button{text:'City'},\
    layerButton10: Button{text:'Subs'},\
    DDL: DropDownList {items:'+myList+'},\,\
    },\
    }";

    myPanel.grp = myPanel.add(res);

    myPanel.layout.layout(true);

    // return window
    return myPanel;
    }
    var myScriptPal = myScript_buildUI(thisObj);
    if((myScriptPal != null)&&(myScriptPal instanceof Window)){
    myScriptPal.center();
    myScriptPal.show();
    }

    }
    myScript(this);
    }

    I removed a couple of pages of functions that are linked to the buttons, but i hope you get the idea.

    The main culprit is this line: DDL: DropDownList {items:’+myList+’},\
    I tried many different approaches, but all end up in errors, or no dropdownlist at all.

    It appears that “myList” is filled with the proper names of the layers, since it gives an array of names when i do something like alert(myList);

    Even our ITers are like….i dont really want to dive into this mess – but im hoping someone can point me into the right direction ????

    Cheers guys!

    Jeroen Rommelaars replied 8 years, 5 months ago 3 Members · 4 Replies
  • 4 Replies
  • Walter Soyka

    November 21, 2017 at 6:28 pm

    Here’s a start:

    var masterComp;
    for (var i = 1; i <= app.project.numItems; i ++) {
    if ((app.project.item(i) instanceof CompItem) && (app.project.item(i).name === 'master')) {
    masterComp = app.project.item(i);
    break;
    }
    }
    var myList = new Array();

    // UI Code
    {
    function myScript(thisObj) {
    function myScript_buildUI(thisObj){
    var myPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "My window name", undefined,{resizeable:true});

    for(var i=1; i <= masterComp.numLayers; i++){
    myList[myList.length] = masterComp.layer(i).name;
    }

    res =
    "group { \
    orientation:'row',\
    groupOne: Group { \
    orientation:'column',\
    masterButton: Button{text:'Master'},\
    layerButton1: Button{text:'First Name'},\
    layerButton2: Button{text:'Last Name'},\
    layerButton3: Button{text:'Gender'},\
    layerButton4: Button{text:'Phonenumber'},\
    layerButton5: Button{text:'Email'},\
    layerButton6: Button{text:'Work'},\
    layerButton7: Button{text:'Streetname'},\
    layerButton8: Button{text:'Housenumber'},\
    layerButton9: Button{text:'City'},\
    layerButton10: Button{text:'Subs'},\
    }, \
    }";
    //

    myPanel.grp = myPanel.add(res);
    myPanel.grp.groupOne.add("dropdownlist", undefined, myList);

    myPanel.layout.layout(true);

    // return window
    return myPanel;
    }
    var myScriptPal = myScript_buildUI(thisObj);
    if((myScriptPal != null)&&(myScriptPal instanceof Window)){
    myScriptPal.center();
    myScriptPal.show();
    }

    }
    myScript(this);
    }

    Walter Soyka
    Designer & Mad Scientist at Keen Live [link]
    Motion Graphics, Widescreen Events, Presentation Design, and Consulting
    @keenlive   |   RenderBreak [blog]   |   Profile [LinkedIn]

  • Jeroen Rommelaars

    November 22, 2017 at 9:05 am

    Wow, walter,….it was that easy, huh! Thanks so much!
    I actually tried your method before, but I think i got the myPanel.grp.groupOne wrong and triend only groupOne instead. duh,…

    Anyways, this works so now i can continue the tinkering! Great!

    What im trying to achieve in the long run is the following:
    I work with a company who creates automated personalised video. We alter after effects files and send them to our custom render farm to render out millions of videos automatically. The preparation of those after effects files for automated use however can take a bit of time…not much, but still 1-3 days. Im trying to semi-automate the process with a plugin. I now have a gui panel that can link layers to master layers with the push of a button. The next step was to populate a dropdownlist with the actual layers in my master comp (where the personalised variables are present) and link them through a dropdown….and from there on it needs to get more and more automated/fluid.

    But, as said, this works – so i can continue breaking my mind on extendscript 😉

  • Clif Mitchell

    November 22, 2017 at 11:23 pm

    Hey Jeroen

    Sorry I don’t have more time to put in this, but I’ve got it close. The correct number of items are showing up in the drop down (Plus one placeholder item, which could be removed after populating). Just haven’t troubleshot why the names aren’t showing up.


    {
    function myScript(thisObj) {
    function myScript_buildUI(thisObj){
    var myPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "My window name", undefined,{resizeable:true});

    res = "group{orientation:'row',\
    groupOne: Group {orientation:'column',\
    masterButton: Button{text:'Master'},\
    layerButton1: Button{text:'First Name'},\
    layerButton2: Button{text:'Last Name'},\
    layerButton3: Button{text:'Gender'},\
    layerButton4: Button{text:'Phonenumber'},\
    layerButton5: Button{text:'Email'},\
    layerButton6: Button{text:'Work'},\
    layerButton7: Button{text:'Streetname'},\
    layerButton8: Button{text:'Housenumber'},\
    layerButton9: Button{text:'City'},\
    layerButton10: Button{text:'Subs'},\
    DDL: DropDownList {properties:{items:[' ']}},\
    },\
    }";

    myPanel.grp = myPanel.add(res);

    var masterComp;
    for (var i = 1; i <= app.project.numItems; i ++) {
    if ((app.project.item(i) instanceof CompItem) && (app.project.item(i).name === 'master')) {
    masterComp = app.project.item(i);
    break;
    }
    }
    var myList = new Array();

    for(var i=1; i <= masterComp.numLayers; i++){
    myList[myList.length] = masterComp.layer(i).name; // Leaving this in for your future use.
    var newitem = myPanel.grp.groupOne.DDL.add('Item', undefined, masterComp.layer(i).name );
    }

    myPanel.layout.layout(true);

    // return window
    return myPanel;
    }

    var myScriptPal = myScript_buildUI(thisObj);
    if((myScriptPal != null)&&(myScriptPal instanceof Window)){
    myScriptPal.center();
    myScriptPal.show();
    }

    }
    myScript(this);
    }

  • Jeroen Rommelaars

    November 24, 2017 at 9:41 am

    Thanks Cliff, thats also a great approach for only using the resource string.
    Both methodes work great! I have all the info I needed to continue and ive been adding some code since. Im finally beginning the feel like this project is getting somewhere ????

    Damn you weird ass Extendscript 😛

We use anonymous cookies to give you the best experience we can.
Our Privacy policy | GDPR Policy