Creating an editable property tag
An editable property tag is used to make fields and metadata from content items and site areas editable when rendered by using a web content viewer portlet when the page is in edit mode.
About this task
An example of the format of an editable property tag:
[EditableProperty field=" " context=" " type=" " name=" " format=" " pre=" " callback=" " stateChangeCallback=" " refreshValueOnEdit=" " class=" " mode=" " placeholder=" "] [/EditableProperty]
To create an editable property tag:
Procedure
What to do next
Tag parameters | Details |
---|---|
name=" " | You must specify the name of the item that is referenced when context="selected". If you specify name="./itemName", the actual path is not resolved until the item is rendered. This takes slightly longer to resolve than specifying the path to the item. |
format=" " | If you specify format="div",
the editable region is rendered within a div tag. If no format is
specified, a div tag is used by default. If you specify format="span", the editable region is rendered within a span tag. |
pre=" " | Set pre="true" to enable multi-line support. This setting is only applicable to the description field. If enabled, line breaks entered by the user edits the description field are recognized when rendered. If not specified, this setting defaults to false. |
mode=" " | This parameter determines the inline editing
mode.
Note: The default rich text editor is always used with the modes
'inplace' or 'embed' are used. When the 'dialog' mode is used, the
rich text editor that is selected in the authoring portlet settings,
or in the content template for content items, is used.
|
callback=" " | This parameter is used to reference an i$ promise.
The promise is resolved if the inline edit is completed, and rejected
if the inline edit is canceled. See the Javadoc for more information about i$ promises. For example:
|
stateChangeCallback=" " | This parameter is used to reference JavaScript state change callbacks for all state changes. See the Javadoc for more information. For example, to specify stateChangeCallback="myStateChangeCallback" you might create the following state change callback function. /** * element: id of the current editing element region * state : the new state * additionalData: some additional data like tag type, element name, messages */ function myStateChangeCallback(element, state, additionalData) State Constants: // loading value StateChangeEvent.STATE_LOADING = 0; // editing StateChangeEvent.STATE_EDITING = 1; // saving StateChangeEvent.STATE_SAVING = 2; // saved StateChangeEvent.STATE_SAVED = 3; // cancelled StateChangeEvent.STATE_CANCELLED = 4; // error StateChangeEvent.STATE_ERROR = 5; The registered JavaScript function is run each time the state changes. Note: The loading
state is run only the first time that a user edits the element.
|
refreshValueOnEdit=" " | This setting forces the tag value to be refreshed when the field is edited by a user. This setting is on by default. If you want to disable this feature, set this setting to false. Restriction:
|
class=" " | This parameter is used to specify a CSS class
to the div or span tag that is specified by using the format parameter. Note: The
custom class that you specify here must include styles with the names
"saving", "editing" and "error." These parameters are required for
displaying the editable field in edit mode, when an item is saved,
and to display error messages.
The default css class that is used for inplace editable fields is wcm-default-inplace-editable. This class can be overridden by adding the following setting in the WCM WCMConfigService service that uses the WebSphere® Integrated Solutions Console: inplaceEdit.defaultClasses=class1 class2 As many classes as required are added to this setting, which is separated by spaces. You must base your custom classes on the default style sheet at AppServer_root\installedApps\nodename\wcm.ear\wcm-inplaceEdit.war\css\default-style.css. Note: Any
classes that are specified on the EditableElement or EditableProperty
tag takes precedence over this value.
If you need to use the default css class as well, add it to the list of classes. For example: inplaceEdit.defaultClasses=wcm-default-inplace-editable class1 class2 |
placeholder=" " | The text entered here is displayed when there
is no initial value for the body of the editable property field. For example: placeholder="Enter title" It can also be used in combination with a text provider to render translated text. For example: placeholder="[Plugin:TextProvider provider="com.mycompany.mybundle" key="enter_title"]" These
special values are used to render text from existing sources:
|
Extra text, HTML, or tags must be added between the [EditableProperty] and [/EditableProperty] tags. The text and tags added here is what is rendered on the page. When the page is in edit mode, this region is editable. When first added to your design, a corresponding property tag is added by default.
[EditableProperty type="content" context="current" field="title"] <h1>[Property type="content" context="current" field="title"]</h1> [/EditableProperty]
Adding pre="true" to the editable property tag forces the editable property to maintain the line-formatting that is entered by the user to be retained. For example, if a user enters line-breaks, they are preserved when the field is saved. This feature is only applicable to the description field. This parameter should also be added to the property tag so that the line breaks are also rendered.
[EditableProperty type="content" context="current" field="description" pre="true"] [Property type="content" context="current" field="description" pre="true"] [/EditableProperty]