Dynamically add and remove ScriptUI elements

Report · Apr 02, 2016

Hello. I'm looking for a way to add and remove elements like groups on click.

The idea is to generate them instead of toggling .visible option on and off.

Though after searching through manuals I'm still unsure how to do this.

Report · Apr 02, 2016

You wanna make sure you have an empty container like a group to act as a placeholder. This will make adding and removing elements easier to manage. This sample may help you...

{
    function SCRIPTNAME(thisObj){
          function SCRIPTNAME_buildUI(thisObj){
              var pal = (thisObj instanceof Panel) ? thisObj : new Window("palette", "SCRIPTNAME", undefined, {resizeable:true});
              if (pal != null){
                    var res ="group {orientation:'column', alignment:['fill','fill'], alignChildren:['fill','fill'],\
                              group1: Group{orientation:'row', alignment:['fill','top'], alignChildren:['fill','top'],\
                                  addButton: Button{text:'ADD'},\
                                  removeButton: Button{text:'REMOVE'},\
                              },\
                              group2: Group{orientation:'column', alignment:['fill','fill'], alignChildren:['fill','fill'],\
                              },\
                    }";


                    pal.grp = pal.add(res);


                    ///CONTROL VARIABLES
                    var group1 = pal.grp.group1;
                    var addButton = group1.addButton;
                    var removeButton = group1.removeButton;
                    var group2 = pal.grp.group2;
                   
                    ///ADD NEW CONTENT TO GROUP2
                    addButton.onClick = function(){
                        var g = group2.add('panel', undefined, "myPanel");    //Add a group
                        g.orientation = "row";
                        g.add('button', undefined, "button1");    //Add a button to that group
                        g.add('button', undefined, "button2");    //Add another button to that group
                        updateUILayout(group2);    //Update UI
                    }
             
                    ///REMOVE CONTENT FROM GROUP2
                    removeButton.onClick = function(){
                        var kids = group2.children;
                        var numKids = kids.length;
                        if(numKids > 0){    //Verify that at least one child exists
                              group2.remove(kids[numKids-1]);    //Remove last child in the container
                        }
                        updateUILayout(group2);    //Update UI
                    }
                   
                    ///UPDATE UI EASILY TO REFLECT ADD/REMOVE CHANGES
                    function updateUILayout(container){
                        container.layout.layout(true);    //Update the container
                        pal.layout.layout(true);    //Then update the main UI layout
                    }
              }


              pal.layout.layout(true);
              pal.grp.minimumSize = pal.grp.size;
              pal.layout.resize();
              pal.onResizing = pal.onResize = function () {this.layout.resize();}
                   
              return pal;
          }
         
          var SCRIPTNAMEPal = SCRIPTNAME_buildUI(thisObj);
          if (SCRIPTNAMEPal != null){
              if (SCRIPTNAMEPal instanceof Window){
                    SCRIPTNAMEPal.center();
                    SCRIPTNAMEPal.show();
              }
          }
    }


    SCRIPTNAME(this);
}

Report · Jul 15, 2016

David! this is awesome!!

I tried adding dynamic elements to my UI just as you explained above, where I am having problems is assigning a variable to each button to give each one a different instruction... Could you please provide me with some guidance so every time I press the ADD button, it adds a new button with a different var name?

Thanks as always!!!

Fabio

Report · Jul 15, 2016

I haven't messed with creating a unique variable with every click, but you can certainly assign the onClick during the button creation.

addButton.onClick = function(){
  var g = group2.add('panel', undefined, "myPanel");    //Add a group
  g.orientation = "row";
  var buttonA = g.add('button', undefined, "button1");    //Add a button to that group
  buttonA.onClick = function(){
       //Do something
  }
  var buttonB = g.add('button', undefined, "button2");    //Add another button to that group
  buttonB.onClick = function(){
       //Do something
  }
  updateUILayout(group2);    //Update UI
}

You could assign the buttons after creation as well, but looping through the main group checking for the .children attribute. That would give you a count to then dive into each sub group to then access each button(s). During that loop maybe you could define the variables using an iterator suffix maybe.

I just found this link that might help:

JavaScript: Dynamically Creating Variables for Loops - Stack Overflow

Report · Jan 25, 2018

hi this is my script if help you let me know

/////////////////////////////////////////////////////////////////////////////////////////

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

var maingroup = win.add ("group {orientation: 'row'}");

var k,nm,wer,sfs; /// length of Array "nm" like "num_but"

var arrayOFpanel =new Array;

var arrayOFbutton =new Array;

var num_but=8;

var to_removeandadd_one_time_in_regin=[]

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

ArrayToPutButtonAtSpecificPanel=fun_OF_ArrayToPutButtonAtSpecificPanel();

for( k=0; k<num_but; k++){

to_removeandadd_one_time_in_regin=true;

nm=ArrayToPutButtonAtSpecificPanel[0];

fun_add_to_Window();

}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

win.onResizing = function () {

for (var w = 0; w <=num_but; w++) {

var er=((num_but+(2-w))*40);

to_call_at_removeandadd_specific_width (er,(er-20),w,ArrayToPutButtonAtSpecificPanel)

}

win.layout.layout ( true);

}

win.show ();

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function fun_OF_ArrayToPutButtonAtSpecificPanel() {

var numbut=num_but-1;

var array=[];

var ArrayToPutButtonAtSpecificPanel=new Array;

qq=numbut

for (var q= 0; q <=qq; q++) {

array=[];

for (var i = 0; i <=numbut; i++) {

if (i>numbut-q) {

for (var t = 0; t <q; t++) {

array=array;i++;}i--;

}else {

array=i

}

ArrayToPutButtonAtSpecificPanel=array

}

return ArrayToPutButtonAtSpecificPanel;

}

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function fun_add_to_Window(){

arrayOFpanel = maingroup.add ("group {orientation: 'column'}");

arrayOFbutton = arrayOFpanel[nm].add ("button", undefined,k+1);

arrayOFbutton.size = [50,50];

arrayOFbutton.alignment = ['left', 'top'];

arrayOFpanel.alignment = ['left', 'top'];

maingroup.margins = [0,0,0,0];

maingroup.spacing = [0,0,0,0];

win.spacing = [0,0,0,0];

arrayOFpanel.spacing = [0,0,0,0];

arrayOFpanel.margins = [0,0,0,0];

arrayOFbutton.margins = [0,0,0,0];

arrayOFpanel.spacing = [0,0,0,0];

}

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function removeandadd(){

for( k=0; k<num_but; k++){

maingroup.remove(arrayOFpanel);

fun_add_to_Window(); }

}

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function to_call_at_removeandadd_specific_width (wid1,wid2,dd,mm){

if (win.size[0]<wid1&&win.size[0]>wid2){

if (to_removeandadd_one_time_in_regin[dd]==true){

nm=mm;

removeandadd();

for (var i = 0; i < to_removeandadd_one_time_in_regin.length; i++) {

if (i==dd) {

to_removeandadd_one_time_in_regin=false;

} else {

to_removeandadd_one_time_in_regin=true;

}

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////