xpages: computed field display multiple values in listbox with onchange event

Question

I would like to ask how to use the computed field to display listbox value?

My idea is there is a listbox and a computed field. In the listbox, I use partial update in the onchange event and the partial update id is computed field

I may post the code about the listbbox and the computed field here:

For the listbox:

<xp:listBox id="listBox2">
    <xp:selectItems>
        <xp:this.value><![CDATA[#{javascript:viewScope.get("vs1");
}]]></xp:this.value>
    </xp:selectItems>
    <xp:eventHandler event="onchange" submit="true"
        refreshMode="partial" refreshId="computedField1">
    </xp:eventHandler></xp:listBox>

For the computed field: In this part I have read this post: How to get display text of combobox and not the alias? to learn how display the listbox value.

function getComponentLabel(componentId) {       
var select = getComponent(componentId); 
var value = select.getValue();
try {
    var list = select.getChildren();
    if (value) {
       for (var i = 0; i < list.length; i++) { 
          if ((typeof list[i]).indexOf("SelectItems") > -1) {
              items = list[i].getValue();
              for (var k = 0; k < items.length; k++) {
                  if (items[k].getValue() === value) { 
                     return items[k].getLabel();
                  }
              }
           }  
           else if((typeof list[i]).indexOf("SelectItem") > -1) {
             if (list[i].getItemValue() === value) { 
                 return list[i].getItemLabel();
             }
          }
       }   
   }
} catch (e) {       
}
return value;
}

var dspValue = getComponentLabel("listBox1");//yes, it's listbox 1 not listbox2, if type listbox2, the computed field will show null (not sure why) 

return "The listbox selected value(s) is: " + dspValue;

So far when I run the code at the first time, I put the value in the listbox, the computed field can display the selected value from the list box. But when I put multiple values in the listbox, the computed field can only show the latest value that I've put.

I have tried to use for loop in the computed field to get the selected values in list box:

var text="";
for (var i = 0; i < dspValue.length; i++)
{
    text += dspValue[i];
}
return "you select value is: " + text;

Then I run the code, I get the error message said the dspValue is null. I also try to display the dspValue.length without the for loop and get the same error.

Instead of use for loop, I don't have the idea to get all values from the listbox and show in the computed field.

How can I use the computed field to display all the selected values in the listbox? I appreciate for any advice please.

Answer 1

May be you need the submittedValue of the component, see the answer of Paul Withers in the question, xPage dateTime picker validation does not work on date change

Answer 2

One possible solution is to simplify it and instead of a Computed Field, use a duplicate 'read-only' list box instead. This way the List Box's Read-Only renderer will do the heavy lifting of determining the appropriate Labels. You just need to make sure both listboxes have the same select values.

<!-- This is your List Box -->
<xp:listBox id="listBox1" value="#{viewScope.yourValue}" multiple="true">
    <xp:selectItem itemLabel="Label One" itemValue="1"></xp:selectItem>
    <xp:selectItem itemLabel="Label Two" itemValue="2"></xp:selectItem>
    <xp:selectItem itemLabel="Label Three" itemValue="3"></xp:selectItem>
    <xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="listBox2"></xp:eventHandler>
</xp:listBox>


<!-- This is instead of your 'Computed Field' -->
<xp:listBox id="listBox2" value="#{viewScope.yourValue}" readonly="true">
    <xp:selectItem itemLabel="Label One" itemValue="1"></xp:selectItem>
    <xp:selectItem itemLabel="Label Two" itemValue="2"></xp:selectItem>
    <xp:selectItem itemLabel="Label Three" itemValue="3"></xp:selectItem>
</xp:listBox>

The only downside of this is that the readonly values are rendered as a vertical table with each label on each row. You may have preferred comma separated. You might be able to use the same concept with another read-only control that might support comma separated display or something you prefer. or you could make a custom renderer but that is another kettle of fish!