Inplace editing using the Inplace component

The Inplace editor provides easy Inplace editing and inline content display. The Inplace editor consists of two elements: display element is the initial clickable label, and inline element is the hidden content that is displayed when display element is toggled.

Let us see how we can use the inplace editor for an input text field:

<p:inplace emptyLabel="Enter Email Here">
    <p:inputText value="[e-mail]"/>
</p:inplace>

Here, an [e-mail] e-mail ID will be displayed as a label. When you click on that label, then an input text field will be displayed with the [e-mail] value.

The Inplace editor component <p:inplace> provides the following attributes to customize its behavior:

• label: Label to be shown in the display mode.

• emptyLabel: Label to be shown in the display mode when value is empty.

• effect: Effect to be used when toggling. Default is fade.

• effectSpeed: Speed of the effect. Default is normal.

• editor: Specifies...