Inplace Selectis a simple input component which displays current value as
outputText and switches to Select based representation after a defined event
to allow editing this value.
You could try the simplest example below. Just click on a label
to edit the value and click somewhere outside the component to store this value(Or just press ENTER button).
In this example f:selectItems tag is used to define a list of items to use.
Additionally the next useful attributes are used:
- Controls "save" and "cancel" are turned on with showControls attribute
- Layout attribute is defined as block and inplace is rendered as div an element instead of span
openOnEdit with true value defines that a select popup list will be opened
automatically after edit state is activated.
- Classes customization is used
Double click to edit value (editEvent set as ondblclick).
And the last example shows how to save the simplest value via Ajax request and
how customize controls using controls facet.