Skip to main content
Sakari Niittyma
Sakari Niittyma
Inspiring
October 2, 2014
Answered

ScriptUI: How to update Listbox values? (CC2014)

  • October 2, 2014
  • 1 reply
  • 5683 views

Is there way to update listbox element that filled with JS array elements. If I push more elements to the array, how I can re-render it in ScriptUI? Is there way to do this.

I know there is way just to add elements to listbox like in Peter Kahrel's PDF. But this isn't so dynamic:

var w = new Window ("dialog");


var myList = w.add ("listbox", undefined, ["one", "two", "three"]);


var b = w.add ("button", undefined, "Add");


b.onClick = function () {myList.add ("item", "zero", 0)}


w.show ();

How about if I wan't to update listbox when I have changed my arrays, like below:

// Create example array


var testArr = ['item1', 'item2']


$.writeln(testArr.length);




startGUI();


function startGUI() {


    


    // Window


    var win = new Window( "palette", script_name, undefined, { resizeable:true } );


    win.orientation = "column";


    win.alignChildren = ["fill", "fill"];


    


    // Listbox


    var myListbox = win.add ("listbox", undefined, testArr,  


        {  


        numberOfColumns: 1,  


        showHeaders: true,  


        columnTitles: ['Name']


    });




    // Add Item To Array


    var addItem = win.add("button", undefined, "Add Item");


    addItem.onClick = function() {   


        testArr.push ('item3');


        $.writeln(testArr.length);


    }  




    // Quit BTN


    win.quitBtn = win.add("button", undefined, "Close");


    win.quitBtn.onClick = function() {   


        win.close();   


    }




    win.show();


}

Maybe there is some update funtion on ScriptUI. I tried to search solution without success. Any help?

    This topic has been closed for replies.
    Correct answer CarlosCanto
    sorry, I meant, I remove the Listbox itself, not the items.

    Uhm, this may sounds stupid question CarlosCanto . But how did you usually remove and create listbox?


    I updated your own script to show how I removed the listbox

    I added a group to host the listbox, the purpose of the group is to be used as a placeholder( to add the new listbox in the right place) and to easily get the listbox to be removed

    // listboxEditFromJSArray.jsx - Sakari Niittymaa 
    

    // https://forums.adobe.com/message/6785515 
    

    

    //#target illustrator 
    

    

    // Create example array 
    

    var testArr = ['item1', 'item2', 'item3']; 
    

    

    startGUI(); 
    

    function startGUI() { 
    

         
    

        // Main Window 
    

        var win = new Window( "palette", "Test Listbox", undefined, { resizeable:true } ); 
    

        win.orientation = "column"; 
    

        win.alignChildren = ["fill", "fill"]; 
    

         
    

        // Listbox Group
    

        var grpListbox = win.add('group');
    

        grpListbox.alignChildren = ['fill', 'fill'];
    

       
    

        var myListbox = addListBox (grpListbox, testArr); 
    

    

    

        // add ListBox
    

      function addListBox(container, testArr) {
    

            var listbox = container.add("listbox", undefined, testArr,   
    

                {   
    

                numberOfColumns: 1,   
    

                showHeaders: true,   
    

                columnTitles: ['Name'] 
    

            });
    

           
    

            return listbox;
    

      }
    

    

    

    

        // BTN: Add Items To Array 
    

        var addItem = win.add("button", undefined, "Add Item"); 
    

        addItem.onClick = function() { 
    

            testArr.push ('item' + (testArr.length + 1)); 
    

            grpListbox.remove(grpListbox.children[0]);
    

            myListbox = addListBox (grpListbox, testArr); 
    

            win.layout.layout(true);
    

            //updateListboxArray(myListbox); 
    

            //$.writeln (testArr.length + "  " + myListbox.items.length); 
    

        } 
    

    

        // BTN: Remove Selected 
    

        var removeSelectedItems = win.add("button", undefined, "Remove Selected"); 
    

        removeSelectedItems.onClick = function() { 
    

            // Remove selected listbox item from array 
    

            testArr.splice( myListbox.selection.index, 1 ); 
    

            updateListboxArray(myListbox); 
    

        } 
    

    

        // BTN: Clear Listbox 
    

        var removeAllItems = win.add("button", undefined, "Clear Listbox"); 
    

        removeAllItems.onClick = function() { 
    

            // Clear the array 
    

            testArr = []; 
    

            updateListboxArray(myListbox); 
    

        } 
    

    

        // Update listbox items 
    

        function updateListboxArray(listbox) { 
    

           
    

            // Clear listbox first 
    

            listbox.removeAll(); 
    

           
    

            // Create new listbox items from array 
    

            var i = 0; 
    

            while (listbox.items.length < testArr.length) { 
    

                listbox.add ("item", testArr); 
    

                i++; 
    

            } 
    

        } 
    

       
    

           
    

    

        // Quit BTN 
    

        win.quitBtn = win.add("button", undefined, "Close"); 
    

        win.quitBtn.onClick = function() {   
    

            win.close();   
    

        } 
    

    

        // Window Settings 
    

        win.onResizing = function () { this.layout.resize(); }; 
    

        win.onShow = function () { win.layout.resize(); }; 
    

        win.center();     
    

        win.show(); 
    

    }

    1 reply

    Larry G. Schneider
    Community Expert
    Larry G. SchneiderCommunity Expert
    Community Expert
    October 2, 2014

    Do you have this?

    ScriptUI for dummies | Peter Kahrel

    Sakari Niittyma
    Sakari NiittymaAuthor
    Inspiring
    October 2, 2014

    Yes I have that PDF. Best one for ScriptUI studies I have read it, but I do not find solution to make eventlistener for array of list. Maybe I'm too newbie in this

    Anyway I tried some basic solution, but this isn't what I have looking for. Because now I need to always add manually items to list with ScriptUI "add" function. Just wondering if there is some dynamic way to check if array has been changed and then update list based on array and with that avoid to take care of listbox commands. Maybe I was looking some "listbox.update()" function or something 


    #target illustrator
    

    

    // Create example array 
    

    var testArr = ['item1', 'item2'] 
    

    //$.writeln(testArr.length); 
    

    

    startGUI(); 
    

    function startGUI() { 
    

         
    

        // Window 
    

        var win = new Window( "palette", "Test Listbox", undefined, { resizeable:true } ); 
    

        win.orientation = "column"; 
    

        win.alignChildren = ["fill", "fill"]; 
    

         
    

        // Listbox 
    

        var myListbox = win.add ("listbox", undefined, testArr,   
    

            {   
    

            numberOfColumns: 1,   
    

            showHeaders: true,   
    

            columnTitles: ['Name'] 
    

        }); 
    

    

        // Add Item To Array 
    

        var addItem = win.add("button", undefined, "Add Item"); 
    

        addItem.onClick = function() {   
    

            testArr.push ('item' + (testArr.length + 1));
    

            myListbox.add ("item", testArr[testArr.length - 1]);
    

            $.writeln(testArr);
    

        }   
    

    

        // Quit BTN 
    

        win.quitBtn = win.add("button", undefined, "Close"); 
    

        win.quitBtn.onClick = function() {   
    

            win.close();   
    

        } 
    

    

        win.onResizing = function () { this.layout.resize(); };
    

        win.onShow = function () { win.layout.resize(); };
    

        win.center();    
    

        win.show(); 
    

    }


    Anyway. I guess I can handle this with that example solution. Just trying to learn alternative ways and to be a better "scripter" Thanks your link anyway.

    PS. There was a error on that first example. Sorry about that This one should work now.

    Sakari Niittyma
    Sakari NiittymaAuthor
    Inspiring
    October 2, 2014

    Hmm. But I still have problem if I update only one value in array It doesn't update those values automatically. Hmm. Maybe trying to figure out this tomorrow now it feels like I have brainfreeze

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices