ScriptUI: How to update Listbox values? (CC2014)

[Sakari_Niittyma]

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?

[Larry G. Schneider]

Do you have this?

ScriptUI for dummies | Peter Kahrel

[Sakari_Niittyma]

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]

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

[CarlosCanto]

Hi, there's no update() function that I know of, I have managed to "update" the list by removing the list and adding a new one.

[Sakari_Niittyma]

Yes Carlos, I tried with that way. Just made custom function to update listbox items. It's fairly simple to edit list, but at beginning I think something else. Here is one simple solution for the get list items from JS array and edit those... So always clear the list and then re-create it from original array.

// 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 
    var myListbox = win.add ("listbox", undefined, testArr,   
        {   
        numberOfColumns: 1,   
        showHeaders: true,   
        columnTitles: ['Name'] 
    });

    // BTN: Add Items To Array 
    var addItem = win.add("button", undefined, "Add Item"); 
    addItem.onClick = function() {
        testArr.push ('item' + (testArr.length + 1));
        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(); 
}

Please, let me know if there is better way to do this kind listbox updates...

[CarlosCanto]

sorry, I meant, I remove the Listbox itself, not the items. Then I create a new Listbox, since it takes an array only at the creation stage. I do this when the new array is completely different from the original array.

on your sample script, do you use the array for other purposes? or just to be able to add/delete from the Listbox?

if the latter, to remove the selected item I use

myListbox.remove (myListbox.selection.index);

to remove all (you don't need this if you go with removing the Listbox itself)

myListbox.removeAll();

[Sakari_Niittyma]

on your sample script, do you use the array for other purposes? or just to be able to add/delete from the Listbox?

I have items that have something like ID, name, value, group... In my purpose I need to update some of those values per item like name, group or value. ID will stay same as it was when it generated. I guess that completely new Listbox could be better way, because then I just need to re-create it from array. If you have more some tricks or samples, they're very welcome Thanks for your advice anyway Carlos!

[Sakari_Niittyma]

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?

[CarlosCanto · Accepted solution]

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(); 
} 

[Sakari_Niittyma]

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

Heya, thanks Carlos for your help! This helps me a lot!