Scrollable panel group in scriptUI

[lfcorullon]

Any suggestions on how to make this work properly?

The code like it is, the maxvlue of scrollbar shows nothing and my array of items (which has 50 elements) shows up to #40. (PS: if I change my array's length to 30, for example, all items are shown, but there is still blank space at the bottom).

Any help will be appreciated.

var array = new Array (50);
var w = new Window("dialog" , "Scroll test");
w.maximumSize.height = 300;
var p = w.add("panel" , undefined , "Scroll group");
p.margins.top = 20;
p.maximumSize.height = w.maximumSize.height-30;
var g = p.add("group");
g.orientation = "column";
g.alignChildren = "left";
g.alignment = ["fill","bottom"];

for (var i=0; i<array.length; i++) {
    g.add("statictext" , undefined , "Item " + (i+1));
    }

var scrollBar = p.add("scrollbar");
scrollBar.stepdelta = 10;
scrollBar.maximumSize.height = g.maximumSize.height;

scrollBar.onChanging = function () {
    g.location.y = -1 * this.value;
    }

w.onShow = function() {
    scrollBar.size.height = p.size.height-10;
    scrollBar.size.width = 22;
    scrollBar.location = [p.size.width-22, 0];
//~     scrollBar.maxvalue = g.size.height - p.size.height + 15;
    scrollBar.maxvalue = g.size.height + 15;
    };

w.show();

[SychevKA · Accepted solution]

Hello!
try this code:

var array = new Array (100);
var w = new Window("dialog" , "Scroll test");
var p = w.add("panel" , undefined , "Scroll group");
p.size = [100,500];

var g = p.add("group");
g.orientation = "column";
g.alignment = "left";
g.maximumSize.height = array.length*100

for (var i=0; i<array.length; i++) {
    g.add("statictext" , undefined , "Item " + (i+1));
    }

var scrollBar = p.add("scrollbar");
scrollBar.stepdelta = 10;
scrollBar.maximumSize.height = p.maximumSize.height;


scrollBar.onChanging = function () {
    g.location.y = -1 * this.value;
    }

w.onShow = function() {
    scrollBar.size = [20,p.size.height];
    scrollBar.location = [p.size.width-20, 0];
    scrollBar.maxvalue = g.size.height-p.size.height+20;
    };

w.show();

[lfcorullon]

Great! Thanks!!!

I used a workaround, before your answer, setting the scrollGroup maximumSize.height to 9999. It worked too.

[lfcorullon]

Hello, all.

I'm stucked again on scrollable panel thing.

But now my panel is interactive. The user can add/remove rows and I want a scrollbar to navigate thru the panel when its height is, for example, > 300. Is it possible?

//=============================================================
//  Script by Luis Felipe Corullón
//  Contato: lf@corullon.com.br
//  Site: http://scripts.corullon.com.br
//=============================================================

app.doScript(main, ScriptLanguage.javascript);

function main() {
    myW();
    }
//=========
function myW() {
	var w = new Window("dialog" , "Script by LFCorullón");
	w.alignChildren = "left";
	var g = w.add("group");
	g.orientation = "column";
	
	var p1 = g.add("panel");
	p1.orientation = "column";
	p1.alignment = "fill";
	p1.alignChildren = "right";
	p1.margins.top = 10;
	p1.maximumSize.height = 250;
//=========
	var gGroup = p1.add("group");
	gGroup.orientation = "column";
	gGroup.alignChildren = "right";
	
	var g2 = gGroup.add("group");
	g2.orientation = "row";
	g2.alignChildren = "center";
	var dParaStyle_sel = g2.add("dropdownlist" , [0,0,100,22] , ["1" , "2" , "3"]);
	var dParaStyle_msp = g2.add("dropdownlist" , [0,0,110,22] , ["1" , "2" , "3"]);
	dParaStyle_msp.selection = 0;
	var dParaStyle_btns = g2.add("group");
	dParaStyle_btns.spacing = 5;
	var dParaStyle_plus = dParaStyle_btns.add("button" , [0,0,20,20] , "+");
	dParaStyle_plus.onClick = function () {
		addRow(gGroup , ["1" , "2" , "3"]);
		}
//=========
	function addRow(group , array) {
		gg = group.add("group");
		gg.alignChildren = "top";
		gg.ps = gg.add("dropdownlist" , [0,0,100,22] , ["1" , "2" , "3"]);
		gg.msp = gg.add("dropdownlist" , [0,0,110,22] , ["1" , "2" , "3"]);
		gg.msp.selection = 0;
		gg.btns = gg.add("group");
		gg.btns.spacing = 5;
		gg.btns.minus = gg.btns.add("button" , [0,0,20,20] , "-");
		gg.btns.minus.onClick = remRow;
		w.layout.layout(true);
		}
//=========
	function remRow() {
		this.parent.parent.parent.remove(this.parent.parent);
		w.layout.layout(true);
		}
//=========
	var btns = w.add("group");
	btns.orientation = "row";
	btns.alignment = "right";
	btns.add("button" , undefined , "OK");
	btns.add("button" , undefined , "Cancel");
//=========
//=========
	if (w.show() != 2) {
		alert(gGroup.children.length);
	    }
	}
//=========
//=========

Thanks in advance!

[Peter Kahrel]

A good alternative to a scrollabe panel is a multi-column list. Scrolling is handles automatically. Much easier to code.

Peter

[lfcorullon]

Thank you all for trying to help.

[tmmls]

Very nice result. Would you mind sharing the code of the scrollable part? 

[ludovicb66806331]

Very nice result. Would you mind sharing the code of the scrollable part? 

[lfcorullon]

//=============================================================
//  Script by Luis Felipe Corullón
//  Contato: lf@corullon.com.br
//  Site: http://scripts.corullon.com.br
//  +55 (51) 9-9685.7565
//  Version: 20230418_1458_GMT-3
//=============================================================

var doc = app.activeDocument;
var msp = doc.masterSpreads.everyItem().name;
var ps = doc.paragraphStyles.everyItem().name;
var data;

msp.unshift("Master to apply");

var w = new Window("dialog" , "Script by LFCorullón");
w.alignChildren = "left";
var g = w.add("group");
g.orientation = "column";

var pFix = g.add("panel" , undefined , "Scrollable");
pFix.orientation = "row";
pFix.alignment = "fill";
pFix.alignChildren = "right";
pFix.margins.top = 20;
pFix.maximumSize.height = 200;

var p1 = pFix.add("group");
p1.orientation = "column";
p1.alignment = "fill";
p1.alignChildren = "right";
p1.margins.bottom = 20;
p1.maximumSize.height = 999999;

var gParaStyle = p1.add("group");
gParaStyle.orientation = "column";
gParaStyle.alignChildren = "right";

var g2 = gParaStyle.add("group");
g2.orientation = "row";
g2.alignChildren = "center";
var dParaStyle = g2.add("checkbox" , undefined , "Paragraph style");
var dParaStyle_sel = g2.add("dropdownlist" , [0,0,100,22] , ps);
var dParaStyle_msp = g2.add("dropdownlist" , [0,0,120,22] , msp);
dParaStyle.value = dParaStyle_sel.enabled = dParaStyle_msp.enabled = false;
dParaStyle_msp.selection = 0;
dParaStyle_msp.helpTip = "\"Master to apply\" option will apply the [None] master page";
var dParaStyle_btns = g2.add("group");
dParaStyle_btns.spacing = 5;
var dParaStyle_plus = dParaStyle_btns.add("button" , [0,0,20,20] , "+");
dParaStyle_plus.enabled = false;
dParaStyle_plus.onClick = function () {
	addRow(gParaStyle , "Paragraph style" , ps , this);
	}

var scrollBar = pFix.add("scrollbar");
scrollBar.size = [14 , 190];
scrollBar.stepdelta = scrollBar.jumpdelta = 10;
scrollBar.value = 0;
scrollBar.minvalue = 0;
scrollBar.maxvalue = 0;

scrollBar.onChanging = function () {
	p1.location.y = -1 * this.value;
	}

dParaStyle.onClick = function () {
	if (this.value == true) {
		dParaStyle_sel.enabled = dParaStyle_msp.enabled = dParaStyle_plus.enabled = true;
		dParaStyle_sel.enabled = dParaStyle_plus.enabled = true;
		}
	else {
		dParaStyle_sel.enabled = dParaStyle_msp.enabled = dParaStyle_plus.enabled = false;
		if (gParaStyle.children.length > 1) {
			for (var i=gParaStyle.children.length-1; i>=1; i--) {
				gParaStyle.remove(gParaStyle.children[i]);
				w.layout.layout(true);
				
				p1.size.height = (gParaStyle.children.length)*32;
				scrollBar.location = [pFix.size.width-18 , 0];
				scrollBar.minvalue = -20;
				scrollBar.maxvalue = p1.size.height - pFix.size.height + 20;
				}
			}
		dParaStyle_sel.selection = null;
		}
	}
//========================================================================================
//========================================================================================
function addRow(group , style , array , btn) {
	gg = group.add("group");
	gg.alignChildren = "top";
	gg.check = gg.add("statictext" , undefined , style);
	gg.ps = gg.add("dropdownlist" , [0,0,100,22] , array);
	gg.msp = gg.add("dropdownlist" , [0,0,120,22] , msp);
	gg.msp.selection = 0;
	gg.msp.helpTip = "\"Master to apply\" option will apply the [None] master page";
	gg.btns = gg.add("group");
	gg.btns.spacing = 5;
	gg.btns.minus = gg.btns.add("button" , [0,0,20,20] , "-");
	gg.btns.minus.onClick = remRow;
	w.maximumSize.width = wW;
	w.center();
	
	n = gParaStyle.children.length + 1;
	v = p1.location.y;
	
	w.layout.layout(true);
	
	p1.size.height = (gParaStyle.children.length)*32;
	scrollBar.location = [pFix.size.width-18 , 0];
	scrollBar.minvalue = -20;
	scrollBar.maxvalue = p1.size.height - pFix.size.height + 20;
	
	p1.location.y = v;
	}
//========================================================================================
//========================================================================================
function remRow() {
	this.parent.parent.parent.remove(this.parent.parent);
	w.maximumSize.width = wW;
	w.center();
	
	n = gParaStyle.children.length + 1;
	v = p1.location.y;
	
	w.layout.layout(true);
	p1.size.height = (gParaStyle.children.length)*32;
	scrollBar.location = [pFix.size.width-18 , 0];
	scrollBar.minvalue = -20;
	scrollBar.maxvalue = p1.size.height - pFix.size.height + 20;
	scrollBar.value -= 32;
	p1.location.y = v;
	
	if (p1.size.height > pFix.size.height && p1.bounds.bottom < pFix.bounds.bottom-20) {
		scrollBar.location = [pFix.size.width-18 , 0];
		scrollBar.maxvalue = p1.size.height - pFix.size.height + 20;
		p1.location.y = (v+32);
		}
	if (p1.size.height <= pFix.size.height-20) {
		scrollBar.location = [pFix.size.width-18 , 0];
		scrollBar.maxvalue = p1.size.height - pFix.size.height + 20;
		p1.location.y = 20;
		}
	}
//========================================================================================
//========================================================================================
//========================================================================================
//========================================================================================
w.onShow = function () {
	wW = w.frameBounds.width;
	p1.maximumSize.height = (gParaStyle.children.length)*1000;
	scrollBar.location = [pFix.size.width-18 , 0];
	}
//========================================================================================
//========================================================================================	
//========================================================================================
//========================================================================================
if (w.show() != 2) {
	var ps_selections = [];
	if (dParaStyle.value == true) {
	   for (var i=0; i<gParaStyle.children.length; i++) {
		  var ps_name = gParaStyle.children[i].children[1].selection.text;
		  var ps_msp = gParaStyle.children[i].children[2].selection.text;
		  ps_selections.push([ps_name , ps_msp]);
		  }
	   }
   
	data = ps_selections;
	}
else exit();
//========================================================================================
//========================================================================================

[ludovicb66806331]

Thanks a lot!