Adding a scrollbar to the panel

[Shulipa Bernad]

Hello everybody!
I'm trying to create a dialog box to display all the items in an array, however,
I need to add a scroll bar to the "pn_rows" panel of my script when it reaches a number of 10 lines, so I can prevent the dialog box from gaining a gigantic proportion in its height.
Please any help is appreciated. thank you

var dlg = new Window ("dialog");
var pn_main = dlg.add ("panel {orientation: 'column'}");
pn_main.spacing =0; pn_main.margins =0;

svc =  pn_main.add("group"); svc.spacing=0;
svc.margins = [0,5,0,0]; dimH=[0,0,100,20];
svc.add("statictext", dimH, " SERVIÇO");
svc.add("statictext", dimH, "TAMANHO");
svc.add("statictext", dimH, "QUANT.");
svc.add("statictext", dimH, "VALOR");
svc.graphics.backgroundColor =  dlg.graphics.newBrush(  dlg.graphics.BrushType.SOLID_COLOR,[0.24172973632812,0.42996215820312,0.66275024414062], 1);
svc.graphics.foregroundColor = svc.graphics.newPen (dlg.graphics.PenType.SOLID_COLOR, [0.92941284179688,0.92941284179688,0.92941284179688], 1);
for(i = 0; i < svc.children.length; i++) svc.children[i].graphics.font = ScriptUI.newFont ("Arial", 'BOLD', 13);

pn_rows = pn_main.add("panel", undefined, undefined, {name: "pn_rows"}); pn_rows.text = ""; 
pn_rows.orientation = "column";     
pn_rows.spacing =0;  pn_rows.margins = 0; 

servico = [
    "REVELAÇÃO:40X50:2:R$ 25.00", 
    "REVELAÇÃO:70x80:5:R$ 90.00", 
    "MOLDURA:20X30:1:R$ 5.00", 
    "REVELAÇÃO:40X50:2:R$ 25.00", 
    "REVELAÇÃO:70x80:5:R$ 90.00", 
    "MOLDURA:20X30:1:R$ 5.00", 
    "REVELAÇÃO:40X50:2:R$ 25.00", 
    "REVELAÇÃO:70x80:5:R$ 90.00", 
    "MOLDURA:20X30:1:R$ 5.00", 
    "REVELAÇÃO:40X50:2:R$ 25.00", 
    "REVELAÇÃO:70x80:5:R$ 90.00", 
    "MOLDURA:20X30:1:R$ 5.00", 
];

alert(servico.length);

for (var i=0;i< servico.length;i++){
  serv = servico[i];
  try{
       serv1 = serv.split(":")[0];
       serv2 = serv.split(":")[1];
       serv3 = serv.split(":")[2];
       serv4 = serv.split(":")[3];
      }
  catch(e){}
  addServico(pn_rows, serv1, serv2, serv3, serv4); 
}

dlg.show ();

function addServico(pn_rows, row1, row2, row3, row4) {
    group  =  pn_rows.add("group"); group .spacing=0;
    group.margins = [0,0,0,0]; dimH=[0,0,100,20];
    group.add("statictext", dimH, row1);
    group.add("statictext", dimH, row2);
    group.add("statictext", dimH, row3);
    group.add("statictext", dimH, row4);

    var bg = [i]; 
    bgColor = [0.3647058823529412, 0.3647058823529412, 0.3647058823529412];
    if(bg&1){group.graphics.backgroundColor =  dlg.graphics.newBrush( dlg.graphics.BrushType.SOLID_COLOR, bgColor, 1);} 

    group.index = pn_rows.children.length - 1;
    dlg.layout.layout (true);
}

[Mike Bro · Accepted solution]

Hello @Shulipa Bernad,

See the post below for guidance...

https://community.adobe.com/t5/indesign-discussions/scrollable-panel-group-in-scriptui/td-p/10967644

Regards,

Mike

[Shulipa Bernad]

@Mike Bro  thanks for the link, there I found the solution! I will share the result here.

var dlg = new Window("dialog" , "Scroll test");
var servico = [
    "REVELAÇÃO:40X50:2:R$ 25.00", 
    "REVELAÇÃO:70x80:5:R$ 90.00", 
    "MOLDURA:20X30:1:R$ 5.00", 
    "REVELAÇÃO:40X50:2:R$ 25.00", 
    "REVELAÇÃO:70x80:5:R$ 90.00", 
    "MOLDURA:20X30:1:R$ 5.00", 
    "REVELAÇÃO:40X50:2:R$ 25.00", 
    "REVELAÇÃO:70x80:5:R$ 90.00", 
    "MOLDURA:20X30:1:R$ 5.00", 
    "REVELAÇÃO:40X50:2:R$ 25.00", 
    "REVELAÇÃO:70x80:5:R$ 90.00", 
    "MOLDURA:20X30:1:R$ 5.00", 
];

gmain = dlg.add("group", undefined, {name: "gmain"}); 
gmain.orientation = "column"; gmain.alignChildren = ["left","top"]; 
gmain.spacing = 0;  gmain.margins = 0; 

svc =  gmain.add("group"); svc.spacing=0;
svc.margins = [0,5,0,0]; dimH=[0,0,100,20];
svc.add("statictext", dimH, "   SERVIÇO");
svc.add("statictext", dimH, "TAMANHO");
svc.add("statictext", dimH, "QUANT.");
svc.add("statictext", dimH, "VALOR");
svc.graphics.backgroundColor =  dlg.graphics.newBrush(  dlg.graphics.BrushType.SOLID_COLOR,[0.24172973632812,0.42996215820312,0.66275024414062], 1);
svc.graphics.foregroundColor = svc.graphics.newPen (dlg.graphics.PenType.SOLID_COLOR, [0.92941284179688,0.92941284179688,0.92941284179688], 1);
for(i = 0; i < svc.children.length; i++) svc.children[i].graphics.font = ScriptUI.newFont ("Arial", 'BOLD', 13);

var pn_main = gmain.add("panel" , undefined , "");
pn_main.size = [420,203];

var pn_rows = pn_main.add("group");
pn_rows.orientation = "column"; pn_rows.alignment = "left";
pn_rows.spacing =0;  pn_rows.margins = 0; 
pn_rows.maximumSize.height = servico.length*100


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

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


for (var i=0;i< servico.length;i++){
  serv = servico[i];
  try{
       serv1 = serv.split(":")[0];
       serv2 = serv.split(":")[1];
       serv3 = serv.split(":")[2];
       serv4 = serv.split(":")[3];
      }
  catch(e){}
  addServico(pn_rows, serv1, serv2, serv3, serv4); 
}

dlg.onShow = function() {
    scrollBar.size = [13,pn_main.size.height];
    scrollBar.location = [pn_main.size.width-20, 0];
    scrollBar.maxvalue = pn_rows.size.height-pn_main.size.height+20;
    };

dlg.show();

function addServico(pn_rows, row1, row2, row3, row4) {
    group  =  pn_rows.add("group"); group .spacing=0;
    group.margins = [0,0,0,0]; dimH=[0,0,95,20];
    group.add("statictext", dimH, row1);
    group.add("statictext", dimH, row2);
    group.add("statictext", dimH, row3);
    group.add("statictext", dimH, row4);

    var bg = [i]; 
    bgColor = [0.3647058823529412, 0.3647058823529412, 0.3647058823529412];
    if(bg&1){group.graphics.backgroundColor =  dlg.graphics.newBrush( dlg.graphics.BrushType.SOLID_COLOR, bgColor, 1);} 
}