Illustrator Script: help needed – value of "edittext" (entered text) not returning

[Nils M. Barner]

I am currently working on a dialog box again.

Question 1:
For the first time ever, I want to enter and use a value from an input field.
But something seems to be wrong, or my thoughts are somehow wrong...

Question 2:
It would be really cool if you could click on the individual items in the list and they would then appear in the corresponding order at the bottom of the text field or the result would also be transferred.

Question 3:
Does it make any difference whether the designations such as “statictext” are in single or double quotation marks?

Here is a simple version of the script...

#target illustrator

if (app.documents.length > 0) {

    var docRef = app.activeDocument,
        title = "my Window",
        myDataBase = [
            ["DE","EN","FR"],
            ["eins","zwei","drei"],
            ["one","two","three"],
            ["un","deux","trois"]
            ];

    var myOutput = createSelectBox(myDataBase);
    alert("myOutput: "+myOutput);

} else {
    alert("Bitte öffnen Sie eine Datei um das Script zu benutzen.");
}


// create dialog box
function createSelectBox(thisDataBase) {

    var g,p,w;
    
    var btnOk,
        btnCancel,
        DropItemNames,
        listDropItems;
    
    //// data panel
    w = new Window("dialog", title);
    w.alignChildren = "top";
    p = w.add("panel", undefined, "Daten");  //// group with border
    g = p.add("group");  //// group without border
    g.alignChildren = "fill";
    
    var myPanel1 = p.add ('group {orientation: "column", alignChildren: ["fill","fill"]}');
        myPanel1.spacing = 5;
        
    var myText1 = myPanel1.add ('group {orientation: "column", alignChildren: ["fill","fill"]}');
        myText1.add ('statictext', undefined, 'Folgende Sprachen sind in dieser Datei enthalten:', {multiline: true});
    
    var myList1 = myPanel1.add ("listbox", undefined, undefined, {readonly: true});
        myList1.preferredSize = [400,150];
        for (var i = 0; i < thisDataBase.length; i++) {
            myList1.add ("item", thisDataBase[0][i])
        }
    
    //// input panel
    p = w.add("panel", undefined, "Sprachauswahl");
    g = p.add("group");
    g.alignChildren = "fill";
    
    var myPanel2 = p.add ('group {orientation: "column", alignChildren: ["fill","fill"]}');
        myPanel2.spacing = 5;
        myPanel2.preferredSize = [400,100];
    
    var myText2 = myPanel2.add ('group {orientation: "column", alignChildren: ["fill","fill"]}');
        myText2.add ('statictext', undefined, 'Bitte alle gewünschten Sprachen (Komma getrennt!) in der zu verwendendenten Reihenfolge hier eingeben (Beispiel: DE,EN,FR):', {multiline: true});
    
    var myInputText = myPanel2.add ('group {orientation: "column", alignChildren: ["fill","fill"]}');
        myInputText.add ('edittext', undefined, "Enter");
        myInputText.characters = 50;
        myInputText.active = true;

    //// button group
    g = w.add("group");
    g.alignment = "center";
    g.alignChildren = "fill";
    btnOk = g.add("button", undefined, "OK");
    btnCancel = g.add("button", undefined, "Cancel");
    btnOk.onClick = function() { w.close(1); };
    btnCancel.onClick = function() { w.close(0); };
    
    if(w.show() == 1){
      //  BoxProcess();
        return myInputText.text;
    }
    
    function BoxProcess(){
    }
}

[RobOctopus]

I am not a fan of the method outlined above for adding elements to scriptUI, someone more familiar can explain why they do or do not work. The method that the https://scriptui.joonas.me/ exports is easier to understand whats happenning.

I removed the lines refering to myInputText and added this instead and it works as intended

/*
Commented out code block to replace with other definition method
var myInputText = myPanel2.add ('group {orientation: "column", alignChildren: ["fill","fill"]}');
        myInputText.add ('edittext', undefined, "Enter");
        myInputText.characters = 50;
        myInputText.active = true;
        //myInputText.text = "test"
        //added a line to specifically edit the text contents, it remained as "enter" but would return the text contents of the line "test"
*/
    var myInputText = myPanel2.add('edittext {properties: {name: "myInputText"}}'); 
        myInputText.text = "Enter"; 

[Nils M. Barner]

Hi RobOctopus,

thanks for refering to https://scriptui.joonas.me

for those who want to get more familiar... here's a pdf file of the "dialog box bible" from my dear colleague Peter Kahrel: 

[jduncan · Accepted solution]

Question 1: You were referencing the group instead of the `edittext`...

var myInputTextGroup = myPanel2.add(
  'group {orientation: "column", alignChildren: ["fill","fill"]}'
);
myInputText = myInputTextGroup.add("edittext", undefined, "Enter");
myInputText.characters = 50;
myInputText.active = true;

 Question 2: Yes you can add the selected list box item during the `onChange` event like below. I prefer acting only on double-clicks which I have included an example of below as well.

Single-click

// works anytime the listbox selection is changed (single-click)
myList1.onChange = function () {
  if (!this.selection) return;
  myInputText.text = myInputText.text + " " + this.selection.text;
};

Double-click

// works anytime a listbox selection is double-clicked
myList1.onDoubleClick = function () {
  if (!this.selection) return;
  myInputText.text = myInputText.text + " " + this.selection.text;
};

Not exactly sure how you want the text added to the `edittext` so I just have the selection appended to the current value with a space separating each value.

You'll need some error checking for duplicate value, no value, etc. but hopefully, this points you in the right direction...

Question 3: No

[Nils M. Barner]

Hi jduncan,

thank you so much for your great answers!

Q1: Yesssss! This did the job! (it's always the small things 😉

Q2: worked perfectly. I did choose the double click one as well.

BTW(!) Is it possible to double click the whole line in the list instead of only on the characters?

Q3: Thanks! Thats what I thought as well.

Here's the final Script. I rewrote the whole dialog box part, added an input cleaner, encoding converter and alerts to show some steps:

#target illustrator

if (app.documents.length > 0) {
    
    
////// first things first and basic checks

    var docRef = app.activeDocument,
        title = "my Window",
        myDataBase = [
            ["DE","EN","FR"],
            ["eins","zwei","drei"],
            ["one","two","three"],
            ["un","deux","trois"]
            ];    
    
    var myLanguages;
    var myL_array = [];

    
// main Script
    createSelectBox(myDataBase);
alert("myL_array: "+myL_array);
alert("myL_array.length: "+myL_array.length);
alert("myL_array[0]: "+myL_array[0]);


    
} else {
    alert(enCoding("Bitte öffnen Sie eine Datei um das Script zu benutzen."));
}


// create dialog box
function createSelectBox(thisDataBase) {

// ====== DIALOG WINDOW
    
    var dialog = new Window("dialog"); 
        dialog.text = "Sprachen kombinieren"; 
        dialog.orientation = "column"; 
        dialog.alignChildren = ["left","top"]; 
        dialog.spacing = 12; 
        dialog.margins = 16; 

// ====== SECTION 1
    
    var panel1 = dialog.add("panel", undefined, undefined, {name: "panel1"});
        panel1.text = "Daten"; 
        panel1.orientation = "column"; 
        panel1.alignChildren = ["left","top"]; 
        panel1.spacing = 10; 
        panel1.margins = 16; 

    var statictext1 = panel1.add("statictext", undefined, undefined, {name: "statictext1", multiline: true}); 
        statictext1.text = enCoding("Folgende Sprachen sind in dieser Datei enthalten:"); 
        statictext1.preferredSize.width = 400;

    var listbox1_array = [];
    for (var i = 0; i < thisDataBase.length; i++) {
        var thisLanguage = thisDataBase[0][i];
        listbox1_array.push(thisLanguage); //// add language to list
    }    
    var listbox1 = panel1.add("listbox", undefined, undefined, {name: "listbox1", items: listbox1_array, numberOfColumns: 2}); 
        listbox1.preferredSize.width = 400; 
        listbox1.preferredSize.height = 150;
        // works anytime a listbox selection is double-clicked
        listbox1.onDoubleClick = function () {
          if (!this.selection) return;
            if (edittext1.text.length == 0){
                edittext1.text = edittext1.text + this.selection.text;
            }else{
                edittext1.text = edittext1.text + "," + this.selection.text;
            }
        }

// ====== SECTION 2
    
    var panel2 = dialog.add("panel", undefined, undefined, {name: "panel2"}); 
        panel2.text = "Sprachenauswahl"; 
        panel2.orientation = "column"; 
        panel2.alignChildren = ["left","top"]; 
        panel2.spacing = 10; 
        panel2.margins = 16; 

    var statictext2 = panel2.add("group", undefined , {name: "statictext2"}); 
        statictext2.getText = function() { var t=[]; for ( var n=0; n<statictext2.children.length; n++ ) { var text = statictext2.children[n].text || ''; if ( text === '' ) text = ' '; t.push( text ); } return t.join('\n'); }; 
        statictext2.preferredSize.width = 400; 
        statictext2.orientation = "column"; 
        statictext2.alignChildren = ["left","center"]; 
        statictext2.spacing = 0; 

        statictext2.add("statictext", undefined, enCoding("Bitte alle benötigten Sprachen (mit Komma getrennt) in")); 
        statictext2.add("statictext", undefined, enCoding("gewünschter Reihenfolge hier eingeben (Beispiel: DE,EN,FR):")); 

    var edittext1 = panel2.add('edittext {properties: {name: "edittext1"}}'); 
        edittext1.helpTip = enCoding("Bitte kommagetrennt und ohne Leerzeichen eingeben!\nBeispiel: DE,EN,FR"); 
        edittext1.preferredSize.width = 400;
        //dialog.onShow = function () { edittext1.active = true; } //// callback just in case active does not to work as expected
        edittext1.active = true;

// ====== BUTTON GROUP
    
    var group1 = dialog.add("group", undefined, {name: "group1"}); 
        group1.orientation = "row"; 
        group1.alignChildren = ["left","center"]; 
        group1.spacing = 12; 
        group1.margins = 0; 
        group1.alignment = ["right","top"]; 

    var buttonOK = group1.add("button", undefined, undefined, {name: "buttonOK"}); 
        buttonOK.text = "OK";
        buttonOK.onClick = function() { 
            myLanguages = edittext1.text;
            if (myLanguages != '' && myLanguages.length >= 2){
                dialog.close();
                createFinalText();
            }else{
                alert(enCoding("Es muss mindestens ein (1) zweistelliger Sprachcode eingegeben werden!"));
            }
        }

    var buttonCancel = group1.add("button", undefined, undefined, {name: "buttonCancel"}); 
        buttonCancel.text = "Abbrechen";
        buttonCancel.onClick = function() { dialog.close(); }

    dialog.show();
}

function createFinalText() {
    alert("myLanguages(before): "+myLanguages);
    cleanMyInput(myLanguages);
    alert("myLanguages(after): "+myLanguages);
}

function cleanMyInput(myData) {
    myData = myData.replace(/\s+/g, '').replace(";", ",").replace(".", ",").replace("/", ","); //// replace common separaters
    myL_array = myData.split(','); //// split by character to array
}

////// basic functions


// convert any umlaut
function enCoding(s) {
	s = s.replace(/ä/g, '\u00E4'); 
	s = s.replace(/Ä/g, '\u00C4'); 
	s = s.replace(/ö/g, '\u00F6'); 
	s = s.replace(/Ö/g, '\u004F'); 
	s = s.replace(/ü/g, '\u00FC'); 
	s = s.replace(/Ü/g, '\u0055'); 
	s = s.replace(/©/g, '\u00A9');	 
	return s;	 
}

[jduncan · Accepted solution]

@Nils M. Barner, the trick I use to make the entire line clickable (or most of it) is to enable `showHeaders`, then adjust the first column width to take up as much of the available line width (without causing a scrollbar) like below.

var listbox1 = panel1.add("listbox", undefined, undefined,
  {
    name: "listbox1",
    items: listbox1_array,
    showHeaders: true, // show listbox columns title bar
    numberOfColumns: 1,
    columnTitles: ["Column Title"], // you can leave this blank if you don't want the text
    columnWidths: [350] // this could be close to 400 but I would test on Mac and PC
}); 

[Nils M. Barner]

@jduncan  great tip! Thank you so much! from the design perspectiv this is not beautiful but if I'll use the txt above as column title this will do the job 😉