Use a xe:djextListTextBox
to collect and show multiple values, use xe:valuePicker
to add values from an existing list to ListTextBox and use optionally a button
to prompt for a new value and to add it to ListTextBox.
This is an example for xe:djextListTextBox
and xe:valuePicker
:
<xe:djextListTextBox
id="djextListTextBox1"
multipleSeparator=","
multipleTrim="true"
defaultValue="abc,def"
value="#{viewScope.test}">
</xe:djextListTextBox>
<xe:valuePicker
id="valuePicker1"
for="djextListTextBox1"
pickerText="Add">
<xe:this.dataProvider>
<xe:simpleValuePicker>
<xe:this.valueList><![CDATA[#{javascript:
["abc","def","ghj","klm","nop","xyz"]
}]]></xe:this.valueList>
</xe:simpleValuePicker>
</xe:this.dataProvider>
</xe:valuePicker>
I like this approach as it is for the user easy to add and to delete values and it looks good.
An alternative is the combination of xp:inputText
and xe:valuePicker
:
<xp:inputText
id="inputText1"
multipleSeparator=","
value="#{viewScope.test}"
defaultValue="abc,def">
</xp:inputText>
<xe:valuePicker
id="valuePicker1"
for="inputText1">
<xe:this.dataProvider>
<xe:simpleValuePicker>
<xe:this.valueList><![CDATA[#{javascript:
["abc","def","ghj","klm","nop","xyz"]
}]]></xe:this.valueList>
</xe:simpleValuePicker>
</xe:this.dataProvider>
</xe:valuePicker>
Users can add their own new values as the InputText field is editable. This approach might be a good solution if new values are allowed and users know how to edit values considering the multiple separator.
In case you'd like to have each value in a separate line you can use xe:djTextarea
and set multipleSeparator to newline:
<xe:djTextarea
id="djTextarea1"
multipleSeparator="#{javascript:'\n'}"
value="#{viewScope.test}"
defaultValue="#{javascript:['abc','def']}"
cols="30">
</xe:djTextarea>
<xe:valuePicker
id="valuePicker1"
for="djTextarea1">
<xe:this.dataProvider>
<xe:simpleValuePicker>
<xe:this.valueList><![CDATA[#{javascript:
["abc","def","ghj","klm","nop","xyz"]
}]]></xe:this.valueList>
</xe:simpleValuePicker>
</xe:this.dataProvider>
</xe:valuePicker>
The text box grows and shrinks with the number of selected values automatically.