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

Scrollable panel group in scriptUI

Enthusiast ,
Mar 06, 2020 Mar 06, 2020

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
5.1K
Translate
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
...
Translate
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;


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

Great! Thanks!!!

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

Translate
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

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!

Translate
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

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

 

Peter

Translate
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

Thank you all for trying to help.

 

Translate
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

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

Translate
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

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

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

Thanks a lot!

Translate
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 Beginner ,
Jul 30, 2024 Jul 30, 2024
LATEST

Thanks a lot!

Translate
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