Creating an editable element tag | HCL Digital Experience
The editable element tag is used to make elements 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
The format of an editable element tag:
[EditableElement type=" " context=" " name=" " key=" " format=" " mode=" " callback=" " stateChangeCallback=" " refreshValueOnEdit=" " class=" " htmlencode=" " placeholder=" "] [/EditableElement]
To create an editable element tag:
Procedure
What to do next
Tag parameters | Details |
---|---|
name=" " |
You must specify the name of the item that is
referenced if the context="selected" .
If you specify name="./itemName" ,
the actual path is not resolved until the item is rendered. This method
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 |
mode=" " |
This parameter determines the inline editing
mode.
If a mode is not specified, then the default setting that is specified in the inplaceEdit.defaultModeForText or inplaceEdit.defaultModeForRichText property of the WCM WCMConfigService service is used. 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 cancelled. 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 /** * 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 element 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 names are required for displaying
the editable field in edit mode, when saving, 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 by using the WebSphere® Integrated Solutions Console: As many classes as required are added to this setting, separated by spaces. Base your custom classes on the
default style sheet that is located at 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: |
htmlencode=" " |
If htmlencode="true" ,
then the reserved HTML characters in elements that display text are
converted into character entities. For example, '< '
is converted to '< '. This method
is useful if you would like to prevent users from adding malicious
code, or if you want to prevent users from changing the design of
their text by using HTML. If not specified, the default setting specified by the cmpnt.htmlEncodeDefault property in the WCM WCMConfigService service is used for displaying text. The default setting specified by the cmpnt.htmlEncodeUrls property in the WCM WCMConfigService service is used for displaying URLs. By default, these properties are set to true. |
placeholder=" " |
The text entered here is displayed when there
is no initial value for the body of the editable element field. For
example: It
can also be used in combination with a text provider to render translated
text. For example: These
special values are used to render text from existing sources:
|
Additional text, HTML, or tags must be added between the [EditableElement]
and [/EditableElement]
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 element tag is added by default.
[EditableElement type="content" context="current" key="body"] [Element type="content" context="current" key="body"] [/EditableElement]
Adding pre="true"
to the editable element tag forces
the editable element 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 text and short text elemenst. This parameter should also be
added to the element tag so that the line breaks are also rendered.
[EditableElement type="content" context="current" key="body" pre="true"] [Element type="content" context="current" key="body" pre="true"] [/EditableElement]
[EditableElement]
and
[/EditableElement]
tags.