Skip to main content
Sturm359
Sturm359
Inspiring
September 16, 2016
Answered

Repeating ScriptUI section doesn't work

  • September 16, 2016
  • 2 replies
  • 937 views

I'm fairly well-versed in Javascript and ExtendScript by now, including ScriptUI. However, there's one situation that eludes me, and that is when there is a repeating section in a ScriptUI dialog and how to handle dynamic controls. Here's a self-contained example that should run just fine in the ExtendScript Toolkit for InDesign CC 2015:

/**
 * Label is an object that represents a single label for a product.
 * 
 */
function Label(lSize, lQuantity, lInstructions, lContentType, lContents) {
    this.lSize = lSize; // String: The size of the label ("Brother 3x1", "Zebra 3x1", or "Zebra 6x4").
    this.lQuantity = lQuantity; // Number: Actual quantity of this label.
    this.lInstructions = lInstructions; // String: The instructions for this label.
    this.lContentType = lContentType; // String: "Text" = text-only label, "File" = file-based label (using pre-made artwork).
    this.lContents = lContents; // String or File: Depending on previous property, can be a String for a text-only label,
        // or a File object for a file-based label.
}
// Label groups, as an object.
function labelGroup (labelPanel, quantityInstGroup, quantityInstStatics, quantityInstFields, quantity,
        instructions, labelSizeGroup,
        rbBrother3x1, rbZebra3x1, rbZebra6x4,
        labelTypeGroup, labelTypeRadios, labelTypeFields,
        typeFileGroup, rbTypeText, rbTypeFile,
        textfield, filenameField, browsebutton, fileselected) {
    this.labelPanel = labelPanel;
    this.quantityInstGroup = quantityInstGroup;
    this.quantityInstStatics = quantityInstStatics;
    this.quantityInstFields = quantityInstFields;
    this.quantity = quantity;
    this.instructions = instructions;
    this.labelSizeGroup = labelSizeGroup;
    this.rbBrother3x1 = rbBrother3x1;
    this.rbZebra3x1 = rbZebra3x1;
    this.rbZebra6x4 = rbZebra6x4;
    this.labelTypeGroup = labelTypeGroup;
    this.labelTypeRadios = labelTypeRadios;
    this.labelTypeFields = labelTypeFields;
    this.typeFileGroup = typeFileGroup;
    this.rbTypeText = rbTypeText;
    this.rbTypeFile = rbTypeFile;
    this.textfield = textfield;
    this.filenameField = filenameField;
    this.browsebutton = browsebutton;
    this.fileselected = fileselected;
}
// Label dialog.
function getLabelInfo (labelArray, lastButton) {
    var totalNumLabels = 3;
    var wLabelTitle = "Label";
    wLabelTitle += totalNumLabels > 1 ? "s " : " ";
    wLabelTitle += "for item: " + "<Test Name>" + ".";
    var lastButtonText = lastButton ? "Begin Proofing" : "Next Product";
    var wLabel = new Window("dialog", wLabelTitle);
        var productNameText = wLabel.add("statictext", undefined, "<Test Name>");
            // productNameText.graphics.font = ScriptUI.newFont("Myriad Pro", "Bold", 20); // Font handling no longer works in CC+.
        var labelGroups = [];
        for (var index = 0; index < totalNumLabels; index++) {
            // For each label for this item, create a labelGroup object and add it to the array.
            var thisGroup = new labelGroup();
            thisGroup.labelPanel = wLabel.add("panel", /*[0, 0, 300, 75]*/ undefined, "Label " + (index + 1));
            thisGroup.labelPanel.orientation = "row";
                thisGroup.quantityInstGroup = thisGroup.labelPanel.add("group");
                thisGroup.quantityInstGroup.alignChildren = "top";
                    thisGroup.quantityInstStatics = thisGroup.quantityInstGroup.add("group");
                    thisGroup.quantityInstStatics.orientation = "column";
                    thisGroup.quantityInstStatics.alignChildren = "right";
                    // thisGroup.margins = [0, 3, 0, 0]; // [left, top, right, bottom].
                    thisGroup.quantityInstStatics.margins.top = 3;
                    thisGroup.quantityInstStatics.spacing = 15;
                    thisGroup.quantityInstStatics.add("statictext", undefined, "Quantity: ");
                    thisGroup.quantityInstStatics.add("statictext", undefined, "Instructions: ");
                thisGroup.quantityInstFields = thisGroup.quantityInstGroup.add("group");
                thisGroup.quantityInstFields.orientation = "column";
                thisGroup.quantityInstFields.alignChildren = "left";
                    thisGroup.quantity = thisGroup.quantityInstFields.add("edittext");
                    thisGroup.quantity.characters = 6;
                    thisGroup.instructions = thisGroup.quantityInstFields.add("edittext", [0, 0, 200, 55], "",
                        {multiline: true, scrolling: true, wantReturn: true});
            thisGroup.labelPanel.add("panel", [0, 0, 2, 100]); // Vertical divider line.
            thisGroup.labelSizeGroup = thisGroup.labelPanel.add("group");
            thisGroup.labelSizeGroup.orientation = "column";
            thisGroup.labelSizeGroup.alignChildren = "left";
                thisGroup.rbBrother3x1 = thisGroup.labelSizeGroup.add("radiobutton", undefined, "Brother 3x1");
                thisGroup.rbZebra3x1 = thisGroup.labelSizeGroup.add("radiobutton", undefined, "Zebra 3x1");
                thisGroup.rbZebra6x4 = thisGroup.labelSizeGroup.add("radiobutton", undefined, "Zebra 6x4");
                thisGroup.rbBrother3x1.value = true;
            thisGroup.labelPanel.add("panel", [0, 0, 2, 100]); // Vertical divider line.
            thisGroup.labelTypeGroup = thisGroup.labelPanel.add("group");
            thisGroup.labelTypeGroup.alignChildren = "top";
                thisGroup.labelTypeRadios = thisGroup.labelTypeGroup.add("group");
                thisGroup.labelTypeRadios.orientation = "column";
                thisGroup.labelTypeRadios.alignChildren = "left";
                thisGroup.labelTypeRadios.margins.top = 6;
                thisGroup.labelTypeRadios.spacing = 13;
                    thisGroup.rbTypeFile = thisGroup.labelTypeRadios.add("radiobutton", undefined, "File");
                    thisGroup.rbTypeText = thisGroup.labelTypeRadios.add("radiobutton", undefined, "Text");
                    thisGroup.rbTypeText.value = true;
                thisGroup.labelTypeFields = thisGroup.labelTypeGroup.add("group");
                thisGroup.labelTypeFields.orientation = "column";
                thisGroup.labelTypeFields.alignChildren = "left";
                    thisGroup.typeFileGroup = thisGroup.labelTypeFields.add("group");
                        thisGroup.filenameField = thisGroup.typeFileGroup.add("edittext", undefined, "---", {readonly: true});
                        thisGroup.filenameField.characters = 20;
                        thisGroup.browsebutton = thisGroup.typeFileGroup.add("button", undefined, "Browse");
                        thisGroup.browsebutton.onClick = function () {
                            thisGroup.fileselected = File.openDialog();
                            thisGroup.filenameField.text = thisGroup.fileselected.name;
                        };
                    thisGroup.textfield = thisGroup.labelTypeFields.add("edittext", [0, 0, 200, 55], "",
                            {multiline: true, scrolling: true, wantReturn: true});
            labelGroups.push(thisGroup);
        }
        var buttonGroup = wLabel.add("group");
            buttonGroup.alignment = "right";
            var cancelButton = buttonGroup.add("button", undefined, "Cancel");
            var okButton = buttonGroup.add("button", undefined, lastButtonText);
    function getLabelSize (rButtonGroup) {
        for (k = 0; k < rButtonGroup.children.length; k++) {
            if (rButtonGroup.children.value === true) {
                return rButtonGroup.children.text;
            }
        }
    }
    function getContents (currentGroup) {
        if (currentGroup.rbTypeText.value) {
            return currentGroup.textfield.text;
        }
        return currentGroup.fileselected;
    }
    if (wLabel.show() == 1) {
        // Assign data gathered from fields to product's object.
        var thisLabel;
        for (j = 0; j < labelGroups.length; j++) {
            thisLabel = new Label(
                getLabelSize(labelGroups.labelSizeGroup),
                parseInt(labelGroups.quantity.text.replaceAll(/\,/g, ''), 10),
                labelGroups.instructions.text,
                labelGroups.textradiobutton.value ? "Text" : "File",
                getContents(labelGroups)
                );
            labelArray.push(thisLabel);
        }
    } else {
        $.writeln("[getLabelInfo] Canceling the Label window.");
        return 7;
    }
    return 0;
}
var returnedValue = 0;
var labelArray = [];
returnedValue = getLabelInfo(labelArray, true);

This one has the repeating section appear 3 times, but in my main program, it could appear once or even 10 times. I won't know ahead of time, but I need the information to be stored with each section. The problem lies in selecting a file for a section using the "Browse" button. I'd like the filename to appear in the same section's edittext field next to the button, but that's not happening. What can I do make sure that *does* happen?

This topic has been closed for replies.
Correct answer Skemicle

I had the same question.. and while replying to this post i thought of an idea and tested it.. My idea worked so i will share =)

set the edittext field to a variable and push the variable name into an array. you may have to do the same with the Browse buttons and set each button array item to the corresponding edit text array item.. i just did a simple test as shown by this script:

var alledits = [];

with(new Window('dialog', "Multiple Editboxes Test")){

    for(c=0;c<3;c++){

        var edit = add('edittext', undefined, "Edit text box " + String(c+1))

        alledits.push(edit);

    }add('button',undefined,"OK")

    add('button',undefined,"Cancel")

    if(show()!=1){

        exit()

    }else{

        alert(alledits[0].text)

    }

}

2 replies

Loic.Aigon
Loic.Aigon
Legend
September 16, 2016

Hi,

May I suggest a more maintanable and variable approach ? You obviously need a UI component to be repeated. So you can have a component factory that will output the instances. Once that done, all you need is to attach the UI events to that instance and that can be done with IDs. I also use a library of mine to use event programming approach:

#include "EventHandler.jsinc"
var main = function(count) {
  var w = new Window ("dialog" );
  var pLabel, pnl;
  var dd = w.add('dropdownlist');
  var labelsGp = w.add('group');
  labelsGp.orientation = 'stack';
  w.preferredSize.width = 500;
  w.alignChildren = labelsGp.alignChildren = ["fill","fill"];
  var i = 0;
  while ( i<count ) {
  pLabel = "Label_"+(i+1 )
  pnl = new PANEL ( labelsGp, pLabel, i);
  pnl.visible = false;
  dd.add('item', pLabel );
  i++;
  }
  dd.onChange = function() {
  if ( !dd.selection ) return;
  EventManager.dispatchEvent ( "DISPLAY_PANEL", dd.selection.index );
  }
  w.show();
}
var PANEL = function(parent, label, id) {
  var p = parent.add ( "panel", undefined, label ),
  fileGp = p.add('group'),
  pathField = fileGp.add('edittext'),
  browseBtn = new BrowseBtn(fileGp, id);
  EventManager.addEventListener ( "DISPLAY_PANEL", function(id) {
  p.visible = p.id==id;
  });
  EventManager.addEventListener ( "FILE_SELECTED", function(data) {
  data.pId==p.id && pathField.text = data.file.fsName;
  });
  pathField.preferredSize.width = 300;
  p.id = id;
  return p;
}
var BrowseBtn = function(parent, pId) {
  var btn = parent.add( 'button', undefined, "…" );
  btn.onClick = function ( ) {
  var file = File.openDialog();
  if ( !file ) return;
  EventManager.dispatchEvent ( "FILE_SELECTED", {file:file, pId:pId} );
  }
  return btn;
}
main(10);

Then with a bit of abstraction you can add as many components you need and switch from one to another.

Event-Driven Programming with ExtendScript | Ozalto

HTH

Loic

Ozalto | Productivity Oriented - Loïc Aigon

    Sturm359
    Sturm359Author
    Inspiring
    September 19, 2016

    Sorry for taking so long in responding to your suggestions. I found them both to be helpful, but I'm afraid I need to award the "Correct Answer" to Skemicle​. His answer was easier for me to understand and I was able to implement the change he suggested with little to no difficulty. Skemicle, thank you. I don't know why arrays work in the loop and objects don't, but now that I know they make a difference in such cases, I'll be sure to keep that in mind.

    Loic.Aigon​, I really wanted to go with your answer. I definitely can appreciate modular code that is broken down into smaller, easier-to-follow tasks and can be re-used more than once in the main program. However, I am still apparently so much of a n00b that I was having difficulty following the logic of your code. In fact, I think there may be a syntax error or two in it, just from reading it. I could be entirely wrong, though, of course. Also, I've never used event handlers before--even in a Java program I wrote for work--so as much as I wanted to use your answer, I just really need to understand what I'd be getting into first. After all, if bugs were found, I'd need to maintain the code, so I'd rather grock it fully first. Perhaps if you walked me through the code execution, step by step, that may help me to understand it (and event handlers, even) better.

    Again, thank you both for your rapid responses to my question! You're both awesome!

    Also, here's the final executable code that now seems to work properly:

    /**
     * Label is an object that represents a single label for a product.
     * 
     */
    function Label(lSize, lQuantity, lInstructions, lContentType, lContents) {
        this.lSize = lSize; // String: The size of the label ("Brother 3x1", "Zebra 3x1", or "Zebra 6x4").
        this.lQuantity = lQuantity; // Number: Actual quantity of this label.
        this.lInstructions = lInstructions; // String: The instructions for this label.
        this.lContentType = lContentType; // String: "Text" = text-only label, "File" = file-based label (using pre-made artwork).
        this.lContents = lContents; // String or File: Depending on previous property, can be a String for a text-only label,
            // or a File object for a file-based label.
    }
    // Label groups, as an object.
    function labelGroup (labelPanel, quantityInstGroup, quantityInstStatics, quantityInstFields,
            quantity, instructions, labelSizeGroup,
            rbBrother3x1, rbZebra3x1, rbZebra6x4,
            labelTypeGroup, labelTypeRadios, labelTypeFields,
            typeFileGroup, rbTypeText, rbTypeFile,
            textfield, filenameField, browsebutton, fileselected) {
        this.labelPanel = labelPanel;
        this.quantityInstGroup = quantityInstGroup;
        this.quantityInstStatics = quantityInstStatics;
        this.quantityInstFields = quantityInstFields;
        this.quantity = quantity;
        this.instructions = instructions;
        this.labelSizeGroup = labelSizeGroup;
        this.rbBrother3x1 = rbBrother3x1;
        this.rbZebra3x1 = rbZebra3x1;
        this.rbZebra6x4 = rbZebra6x4;
        this.labelTypeGroup = labelTypeGroup;
        this.labelTypeRadios = labelTypeRadios;
        this.labelTypeFields = labelTypeFields;
        this.typeFileGroup = typeFileGroup;
        this.rbTypeText = rbTypeText;
        this.rbTypeFile = rbTypeFile;
        this.textfield = textfield;
        this.filenameField = filenameField;
        this.browsebutton = browsebutton;
        this.fileselected = fileselected;
    }
    // Label dialog - Choosing a file for the label.
    function fileLabel (fnFields, fnFiles) {
        return function () {
            var thisFile = File.openDialog();
            fnFields[this.label].text = thisFile.fsName;
            fnFiles[this.label] = thisFile;
            // thisGroup.fileselected = thisFile;
        };
    }
    // Label dialog.
    function getLabelInfo (labelArray, lastButton) {
        var totalNumLabels = 3;
        var wLabelTitle = "Label";
        wLabelTitle += totalNumLabels > 1 ? "s " : " ";
        wLabelTitle += "for item: " + "<Test Name>" + ".";
        var lastButtonText = lastButton ? "Begin Proofing" : "Next Product";
        var wLabel = new Window("dialog", wLabelTitle);
            var productNameText = wLabel.add("statictext", undefined, "<Test Name>");
                // productNameText.graphics.font = ScriptUI.newFont("Myriad Pro", "Bold", 20); // Font handling no longer works in CC+.
            var labelGroups = [];
            var fnFields = [];
            var fnFiles = [];
            var thisField;
            // var thisFile;
            for (var index = 0; index < totalNumLabels; index++) {
                // For each label for this item, create a labelGroup object and add it to the array.
                var thisGroup = new labelGroup();
                thisGroup.labelPanel = wLabel.add("panel", /*[0, 0, 300, 75]*/ undefined, "Label " + (index + 1));
                thisGroup.labelPanel.orientation = "row";
                    thisGroup.quantityInstGroup = thisGroup.labelPanel.add("group");
                    thisGroup.quantityInstGroup.alignChildren = "top";
                        thisGroup.quantityInstStatics = thisGroup.quantityInstGroup.add("group");
                        thisGroup.quantityInstStatics.orientation = "column";
                        thisGroup.quantityInstStatics.alignChildren = "right";
                        // thisGroup.quantityInstStatics.margins = [0, 3, 0, 0]; // [left, top, right, bottom].
                        thisGroup.quantityInstStatics.margins.top = 3;
                        thisGroup.quantityInstStatics.spacing = 15;
                        thisGroup.quantityInstStatics.add("statictext", undefined, "Quantity: ");
                        thisGroup.quantityInstStatics.add("statictext", undefined, "Instructions: ");
                    thisGroup.quantityInstFields = thisGroup.quantityInstGroup.add("group");
                    thisGroup.quantityInstFields.orientation = "column";
                    thisGroup.quantityInstFields.alignChildren = "left";
                        thisGroup.quantity = thisGroup.quantityInstFields.add("edittext");
                        thisGroup.quantity.characters = 6;
                        thisGroup.instructions = thisGroup.quantityInstFields.add("edittext", [0, 0, 200, 55], "",
                            {multiline: true, scrolling: true, wantReturn: true});
                thisGroup.labelPanel.add("panel", [0, 0, 2, 100]); // Vertical divider line.
                thisGroup.labelSizeGroup = thisGroup.labelPanel.add("group");
                thisGroup.labelSizeGroup.orientation = "column";
                thisGroup.labelSizeGroup.alignChildren = "left";
                    thisGroup.rbBrother3x1 = thisGroup.labelSizeGroup.add("radiobutton", undefined, "Brother 3x1");
                    thisGroup.rbZebra3x1 = thisGroup.labelSizeGroup.add("radiobutton", undefined, "Zebra 3x1");
                    thisGroup.rbZebra6x4 = thisGroup.labelSizeGroup.add("radiobutton", undefined, "Zebra 6x4");
                    thisGroup.rbBrother3x1.value = true;
                thisGroup.labelPanel.add("panel", [0, 0, 2, 100]); // Vertical divider line.
                thisGroup.labelTypeGroup = thisGroup.labelPanel.add("group");
                thisGroup.labelTypeGroup.alignChildren = "top";
                    thisGroup.labelTypeRadios = thisGroup.labelTypeGroup.add("group");
                    thisGroup.labelTypeRadios.orientation = "column";
                    thisGroup.labelTypeRadios.alignChildren = "left";
                    thisGroup.labelTypeRadios.margins.top = 6;
                    thisGroup.labelTypeRadios.spacing = 13;
                        thisGroup.rbTypeFile = thisGroup.labelTypeRadios.add("radiobutton", undefined, "File");
                        thisGroup.rbTypeText = thisGroup.labelTypeRadios.add("radiobutton", undefined, "Text");
                        thisGroup.rbTypeText.value = true;
                    thisGroup.labelTypeFields = thisGroup.labelTypeGroup.add("group");
                    thisGroup.labelTypeFields.orientation = "column";
                    thisGroup.labelTypeFields.alignChildren = "left";
                        thisGroup.typeFileGroup = thisGroup.labelTypeFields.add("group");
                            thisField = thisGroup.typeFileGroup.add("edittext", undefined, "---", {readonly: true});
                            thisField.characters = 20;
                            thisField.label = index;
                            fnFields[index] = thisField;
                            thisGroup.browsebutton = thisGroup.typeFileGroup.add("button", undefined, "Browse");
                            thisGroup.browsebutton.label = index;
                            thisGroup.browsebutton.onClick = fileLabel(fnFields, fnFiles);
                        thisGroup.textfield = thisGroup.labelTypeFields.add("edittext", [0, 0, 200, 55], "",
                                {multiline: true, scrolling: true, wantReturn: true});
                labelGroups.push(thisGroup);
            }
            var buttonGroup = wLabel.add("group");
                buttonGroup.alignment = "right";
                var cancelButton = buttonGroup.add("button", undefined, "Cancel", {name: "cancel"});
                var okButton = buttonGroup.add("button", undefined, lastButtonText, {name: "ok"});
        function getLabelSize (rButtonGroup) {
            for (k = 0; k < rButtonGroup.children.length; k++) {
                if (rButtonGroup.children.value === true) {
                    return rButtonGroup.children.text;
                }
            }
        }
        function getContents (currentGroup, ind) {
            if (currentGroup.rbTypeText.value) {
                return currentGroup.textfield.text;
            }
            return fnFiles[ind];
        }
        if (wLabel.show() == 1) {
            // Assign data gathered from fields to product's object.
            var thisLabel;
            var qty;
            for (j = 0; j < labelGroups.length; j++) {
                qty = labelGroups.quantity.text;
                thisLabel = new Label(
                    getLabelSize(labelGroups.labelSizeGroup),
                    parseInt(qty.replace(/\,/g, ''), 10),
                    labelGroups.instructions.text,
                    labelGroups.rbTypeText.value ? "Text" : "File",
                    getContents(labelGroups, j)
                    );
                labelArray.push(thisLabel);
            }
            
            for (var l = 0; l < labelArray.length; l++) {
                thisLabel = labelArray;
                $.writeln("[label sample output] Label " + (l+1) + " Size: " + thisLabel.lSize);
                $.writeln("[label sample output] Label " + (l+1) + " Quantity: " + thisLabel.lQuantity);
                $.writeln("[label sample output] Label " + (l+1) + " Instructions: " + thisLabel.lInstructions);
                $.writeln("[label sample output] Label " + (l+1) + " Content Type: " + thisLabel.lContentType);
                $.writeln("[label sample output] Label " + (l+1) + " Contents: " + thisLabel.lContents);
                $.writeln("[label sample output]");
            }
        } else {
            $.writeln("[getLabelInfo] Canceling the Label window.");
            return 7;
        }
        return 0;
    }
    var returnedValue = 0;
    var labelArray = [];
    returnedValue = getLabelInfo(labelArray, true);
    Loic.Aigon
    Loic.Aigon
    Legend
    September 19, 2016

    Hi Sturm359​,

    No problem. I didn't pretend to tell you what to do. I just offered what is IMHO a smoother approach when it comes to complex UIs. Those events I call are not native events but a object that dispatch pseudo events to itself and listen for those events. The underlaying idea is that you can dispatch an event of yours at some point from any place. Then if the event is listened somewhere else, you can react to it.

    Here I use the PANEL function as a factory. I create as many instance a I need with a minimal set of code instructions. At this stage evrey single instance listens for an event. So all of the instances will react to the event if thrown. So I include an id property to ensure only the relevant instance react.

    In this case, I want the instance o f id n (where n stands for the upper selector list index ) to  be displayed and every single others hidden. Given that you say you are used to those approaches, you should be able to do the maths.

    Once again, it's just a proposal and you may disagree the possible benefits. However, I will be curious to know the bugs you are talking about.

    Loic

    Skemicle
    SkemicleCorrect answer
    Inspiring
    September 16, 2016

    I had the same question.. and while replying to this post i thought of an idea and tested it.. My idea worked so i will share =)

    set the edittext field to a variable and push the variable name into an array. you may have to do the same with the Browse buttons and set each button array item to the corresponding edit text array item.. i just did a simple test as shown by this script:

    var alledits = [];

    with(new Window('dialog', "Multiple Editboxes Test")){

        for(c=0;c<3;c++){

            var edit = add('edittext', undefined, "Edit text box " + String(c+1))

            alledits.push(edit);

        }add('button',undefined,"OK")

        add('button',undefined,"Cancel")

        if(show()!=1){

            exit()

        }else{

            alert(alledits[0].text)

        }

    }

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices