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).

Example

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).

Example

And the last example shows how to save the simplest value via Ajax request and how customize controls using controls facet.

Example