• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Scrollable panel group in scriptUI

Enthusiast ,
Mar 06, 2020 Mar 06, 2020

Copy link to clipboard

Copied

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

 

TOPICS
Scripting

Views

3.7K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Participant , Mar 10, 2020 Mar 10, 2020

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;


sc
...

Votes

Translate

Translate
Participant ,
Mar 10, 2020 Mar 10, 2020

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Mar 10, 2020 Mar 10, 2020

Copy link to clipboard

Copied

Great! Thanks!!!

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jun 17, 2020 Jun 17, 2020

Copy link to clipboard

Copied

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 18, 2020 Jun 18, 2020

Copy link to clipboard

Copied

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

 

Peter

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jun 21, 2020 Jun 21, 2020

Copy link to clipboard

Copied

Thank you all for trying to help.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 22, 2021 Feb 22, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 18, 2023 Apr 18, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Apr 18, 2023 Apr 18, 2023

Copy link to clipboard

Copied

//=============================================================
//  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();
//========================================================================================
//========================================================================================

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 19, 2023 Apr 19, 2023

Copy link to clipboard

Copied

LATEST

Thanks a lot!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines