Getting both listbox text and value in server handler - google-apps-script

Question

I have the following code where I try to fill a listbox with the addItem(text,value) method to store both a text and an index and I would like to retriebe both when the listbox is clicked.
As a default e.parameter.listObject returns the text. Is there anyway to retriebe also the value?
The code is as follows:
function doGet() {
var app = UiApp.createApplication().setTitle('New app');
var listHandler = app.createServerKeyHandler('listSelect');
var lb = app.createListBox(true).setId('lbColour').setName('lbColour').setVisibleItemCount(10).addClickHandler(listHandler);
lb.addItem("RED","100");
lb.addItem("GREEN","010");
lb.addItem("BLUE","001");
// Create a vertical panel and add the grid to the panel
var panel = app.createVerticalPanel();
panel.setId('mainPanel');
panel.add(lb);
panel.add(app.createLabel('Colour Code:'));
panel.add(app.createTextBox().setName('colourCode').setId('colourCode'));
panel.add(app.createLabel('Colour Name:'));
panel.add(app.createTextBox().setName('colourName').setId('colourName'));
app.add(panel);
return app;
}
function listSelect(e){
var app = UiApp.getActiveApplication();
app.getElementById('colourName').setText(e.parameter.lbColour);
app.getElementById('colourCode').setText(e.parameter['lbColour_Value']);
return(app);
}
Thanks to the below answers this will be the corrected code for the above one.
Note that as stated we can store the key at the text property using a valid separator, I used here "|" which is not as usual to find in an string as ",".
Also note that the main to problems on the original code for this to work was that the lisbox cannot be created as a multiselect, that is:
We shall use "createListBox()" instead of "createListBox(true)"
The server handler shall be created using "createServerHandler" instead of "creteServerKeyHandler".
The final code should look like this:
function doGet() {
var app = UiApp.createApplication().setTitle('New app');
var listHandler = app.createServerHandler('listSelect');
var lb = app.createListBox().setId('lbColour').setName('lbColour').setVisibleItemCount(10).addClickHandler(listHandler);
lb.addItem("RED","RED|100");
lb.addItem("GREEN","GREEN|010");
lb.addItem("BLUE","BLUE|001");
// Create a vertical panel and add the grid to the panel
var panel = app.createVerticalPanel();
panel.setId('mainPanel');
panel.add(lb);
panel.add(app.createLabel('Colour Code:'));
panel.add(app.createTextBox().setName('colourCode').setId('colourCode'));
panel.add(app.createLabel('Colour Name:'));
panel.add(app.createTextBox().setName('colourName').setId('colourName'));
app.add(panel);
return app;
}
function listSelect(e){
var app = UiApp.getActiveApplication();
var outpArr = e.parameter.lbColour.split('|');
app.getElementById('colourName').setText(outpArr[0]);
app.getElementById('colourCode').setText(outpArr[1]);
return(app);
}

Answer 1

You can't retrieve the text of your list box item.
What you can do is this,
Reformat your list items like this:
lb.addItem("BLUE","001,BLUE");
And then
e.parameter.lbColour.split(',')[0]
Will return 001
And
e.parameter.lbColour.split(',')[1]
Will return BLUE
Good luck
function doGet() {
var app = UiApp.createApplication();
var vp = app.createVerticalPanel().setId("vp");
var lb = app.createListBox().setName("lb");
lb.addItem("BLUE", "BLUE,001");
vp.add(lb);
var handler = app.createServerHandler('postFunc').addCallbackElement(vp);
var button = app.createButton("Send").addClickHandler(handler);
vp.add(button);
app.add(vp);
return app;
}
function postFunc(e){
var app = UiApp.getActiveApplication();
var vp = app.getElementById("vp");
var outpArr = e.parameter.lb.split(',');
var color = app.createLabel("color text: " + outpArr[0]);
var number = app.createLabel("color number: " + outpArr[1]);
vp.add(color);
vp.add(number);
return app;
}

Answer 2

EDIT 2 : Thomas's answer wasn't wrong after all... The handler used in the original question was the cause of the issue and the multiple selection enable suffers also of an issue -see last comments (issue 941).
So I removed my first answer (to make it shorter) and suggest here a possible workaround to use multiple selection on a listBox (tested and working)
function doGet() {
var app = UiApp.createApplication().setTitle('New app');
var listHandler = app.createServerHandler('listSelect');
var lb = app.createListBox(true).setWidth('200').setId('lbColour').setName('lbColour').setVisibleItemCount(5).addChangeHandler(listHandler);
var colorIndex = [];// this is the array that will hold item values values with 2 fields
lb.addItem("RED");colorIndex.push("RED-100");// use a '-' separator to be able to split later First field-second field
lb.addItem("GREEN");colorIndex.push("GREEN-010");
lb.addItem("BLUE");colorIndex.push("BLUE-001");
lb.setTag(colorIndex.toString());// store the array in the TAG
var panel = app.createVerticalPanel();
panel.setId('mainPanel');
panel.add(lb);
panel.add(app.createLabel('Colour Code:'));
panel.add(app.createTextBox().setWidth('500').setName('colourCode').setId('colourCode'));
panel.add(app.createLabel('Colour Name:'));
panel.add(app.createTextBox().setWidth('500').setName('colourName').setId('colourName'));
app.add(panel);
return app;
}
function listSelect(e){
var app = UiApp.getActiveApplication();
var codepos = [];//will get the index position of items in colorIndex
var code = [];//array of first items found in colorIndex
var color = [];// index of second items found in colorIndex
var colorIndex = e.parameter.lbColour_tag.split(',');// recover the array
for(n=0;n<colorIndex.length;++n){if(e.parameter.lbColour.match(colorIndex[n].split('-')[0]) == colorIndex[n].split('-')[0]){codepos.push(n)}};// get the position in the array
for(n=0;n<codepos.length;++n){
code[n] = colorIndex[codepos[n]].split('-')[1];// finally get the color code value
color[n] = colorIndex[codepos[n]].split('-')[0];// get the color value
}
app.getElementById('colourName').setText(color.toString());// show the result second field
app.getElementById('colourCode').setText(code.toString()); // show the result first field
return(app);
}