Copy link to clipboard
Copied
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?
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
Copy link to clipboard
Copied
Do you have this?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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...
Copy link to clipboard
Copied
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();
Copy link to clipboard
Copied
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!
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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();
}
Copy link to clipboard
Copied
I updated your own script to show how I removed the listbox
Heya, thanks Carlos for your help! This helps me a lot!