If the <rich:inplaceInput> loses focus, input data is saved automatically and the component displays a new value. Additionally, the data is saved when "Enter" is pressed. Nevertheless, you can use the "showControls" attribute, which makes "Save" and "Cancel" buttons appear next to the input field. If the controls are used, data is not saved automatically when the form loses focus: user has to confirm that he/she wants to save/discard the data explicitly. In both cases(with controls or without them) the input data can be discarded by pressing "Esc" key.

Example:

...

<rich:inplaceInput value="#{bean.value}" showControls="true"/>

... 

You can also position the controls relatively to the input field, by means of

Example:

...

<rich:inplaceInput value="#{bean.value}" showControls="true" controlsVerticalPosition="bottom" controlsHorizontalPosition="left"/>

... 

This is the result:

It is also possible to use "controls" facet in order to replace the default controls with facets content. See the example below.

Example:

...

<rich:inplaceInput defaultLabel="Click here to edit" showControls="true" controlsHorizontalPosition="left" controlsVerticalPosition="bottom" id="inplaceInput">

    <f:facet name="controls">

        <h:commandButton value="Save" onclick="#{rich:component('inplaceInput')}.save();" type="button" />

        <h:commandButton value="Cancel" onclick="#{rich:component('inplaceInput')}.cancel();" type="button" />

    </f:facet>

</rich:inplaceInput>

... 

This is the result:

Redefinition of the "save" and "cancel" icons can be performed using "saveControlIcon" and "cancelControlIcon" attributes. You need to define the path to where your images are located.

Example:

...

<rich:inplaceInput value="#{bean.value}" defaultLabel='click to edit'

    showControls="true"

    controlsHorizontalPosition="left"

    controlsVerticalPosition="top"

    saveControlIcon="/images/cancel.gif"

    cancelControlIcon="/images/save.gif"/> 

    ... 

The <rich:inplaceInput> component could be rendered with <span> or <div> elements to display its value. In order to change default <span> output, use "layout" attribute with "block" value.

The <rich:inplaceInput> component supports standard "tabindex" attribute. When the component gets focus the edit mode is activated.

The "inputWidth" , "minInputWidth" , "maxInputWidth" attributes are provided to specify the width, minimal width and maximal width for the input element respectively.

In the shown example the font in edit state is changed to bold.

It's aslo possible to change styles of a particular <rich:inplaceInput> component. In this case you should create own style classes and use them in corresponding <rich:inplaceInput> styleClass attributes. An example is placed below:

Example:

...

.myClass {

    color:  #008cca;

}

...

The "viewClass" attribute for the <rich:inplaceInput> is defined as it's shown in the example below:

Example:

<rich:inplaceInput value="click to edit" styleClass="myClass"/>

This is a result:

As it could be seen on the picture above, the font color of the text on the component was changed.