Scrollbar and Tab position in Photoshop script UI

[Asuvath]

Hi,
I am creating the UI for the photoshop through Javascript (see below screenshot). I am dynamically add the storename on the UI, it may be "n" numbe of store. So I would like to add the scrollbar on that panel.

I have attached my script, can you please help me to get it done.

Thanks
Asuvath

[c.pfaffenbichler]

I don’t understand your description, please explain again. 

And your Script does not seem to have been attached. 

[Asuvath]

Hi @c.pfaffenbichler ,
Thanks for checking. Sorry for unclear.

I would like to add the scrollbar in scriptUI in Photoshop.
I am attached my script, but I not sure where is it gone. I here placed my code,

var i = 0;

// DIALOG

// ======

var dialog = new Window("dialog");

dialog.text = "";

dialog.orientation = "column";

dialog.alignChildren = ["center","top"];

dialog.spacing = 35;

dialog.margins = [16,24,16,25];

// GROUP1

// ======

var group1 = dialog.add("group", undefined, {name: "group1"});

group1.orientation = "row";

group1.alignChildren = ["left","center"];

group1.spacing = 50;

group1.margins = 0;

var myStrPnl = dialog.add("panel", undefined, undefined, {name: "myDocSetupGrp"});

myStrPnl.text = "";

myStrPnl.orientation = "row";

myStrPnl.alignChildren = ["left","top"];

myStrPnl.spacing = 10;

myStrPnl.margins = [10,10,10,10];

myStrPnl.alignment = ["fill","top"];

myStrPnl.preferredSize.height = 200;

myStrPnl.preferredSize.width = 200;

myStrPnl.maximumSize.height = 200;

var group2 = myStrPnl.add("group", undefined, {name: "group2"});

group2.orientation = "column";

group2.alignChildren = ["left","center"];

group2.width = 200;

group2.spacing = 10;

var group3 = group2.add("group", undefined, {name: "group3"});

group3.orientation = "row";

// GROUP10

// =======

var group10 = dialog.add("group", undefined, {name: "group10"});

group10.orientation = "row";

group10.alignChildren = ["center","center"];

group10.spacing = 50;

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

var button2 = group10.add("button", undefined, undefined, {name: "button2"});

button2.text = "OK";

button2.helpTip = "This is ok button";

button2.preferredSize.width = 100;

var button3 = group10.add("button", undefined, undefined, {name: "button3"});

button3.text = "Cancel";

button3.preferredSize.width = 100;

var rslt = add_row();

// scrollbar

var sbar = myStrPnl.add ("scrollbar"); //added

sbar.preferredSize.width = 20;

sbar.preferredSize.height = 200;

sbar.onChanging = function () {

group2.location.y = -5 * this.value;

}

dialog.show();

function add_row(){

group2.add("statictext" , undefined , "Item " + (i+1));

if(i == 0){

group3.add("statictext" , undefined , "Item ");

var button1_add = group3.add("button", undefined, undefined, {name: "button1_add"});

button1_add.text = "Add";

button1_add.onClick = add_btn;

}

i++;

dialog.layout.layout (true);

}

function add_btn () {

add_row();

}

My expectation is I would like to get it real scrollbar like the "bar" will increase or decrease while add or remove the "Item". Currently this code that bar size is same in all time.

Additionally the script is not working for scroll the mouse up and down, instead of that we need to forcely click the bar and pull down to view the items.

Can you please do the needful to get the below,

1. The bar size will be increased when the items are added and the bar size will be reduced when the items are removed like scrollbar nature.

2. While scroll the mouse bar will be move up and down.

Thanks
Asuvath

[r-bin · Accepted solution]

Try

1)

// scrollbar
var sbar = myStrPnl.add ("scrollbar"); //added
sbar.preferredSize.width = 20;
sbar.preferredSize.height = 200;

sbar.maxvalue = 1;
sbar.minvalue = 1;

....

function add_btn () {
add_row();
sbar.maxvalue = i;
}

2)

sbar.onChanging = sbar.onChange = function () {
group2.location.y = -5 * this.value;
}

[Asuvath]

Hi @r-bin ,

Thanks for the response. 
Your suggestions works, but my expectation is to get it, like recent scroll bar (less amount for entries the bar size will be large, and more amount for entries the bar size will be decrease).

Additionally while mover the scroll ball in mouse the bar will be move up and down like what we currently used in other application.

Can you please advise to get it that?

Thanks
Asuvath

[r-bin]

I tested this code in CS6. Everything works as it should and as stated in the documentation. The scrollbar button is reduced in size and scrolled with the mouse. In each new version, there are changes in the interface, both visual and event handling. Usually the higher the version, the worse it gets. For example, I tested this code in CC2020. Nothing works there at all. I can’t say how it works on your version, and I can’t offer anything else.