User assistance for content authors

Creating an editable element tag

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=" " class=" " placeholder=" "]

[/EditableElement]

Note: Do not use this tag if basic or advanced rendering caches are enabled because with these caches enabled, authoring updates are not immediately displayed on the rendered page.

To create an editable element tag:

Procedure

Click Insert a Tag from a presentation template, component, or element design field. The Tag Helper dialog opens.
Select EditableElement as the tag type.

Select the item type where the element is stored, and the context that is used to determine which item to reference:

Table 1. Context and item type matrix. This table describes how context changes for different item types.
Context and Item Type	`type="auto"`	`type="content"`	`type="sitearea"`	`type="parent"`	`type="top"`
`context="Selected"` If selected, the context is set by the selected item. You select an item by clicking Select. This parameter is added to the tag as the name=" " parameter:	This parameter makes an element from the selected content item editable when the page is in edit mode.	This parameter makes an element from the selected content item editable when the page is in edit mode. If a site area is selected, then nothing is editable.	If the selected item is a site area, then This parameter makes the element from the site area editable when the page is in edit mode. If the selected item is a content item, then This parameter makes the element from the parent site area of the content item editable when the page is in edit mode.	This parameter makes an element from the parent of the selected item editable when the page is in edit mode.	This parameter makes an element from the first item in the path of the selected item editable when the page is in edit mode.
`context="Current"` If selected, the context is set by the current item.	This parameter makes an element from the item currently being rendered editable when the page is in edit mode.	This parameter makes an element from the current content item editable when the page is in edit mode. If a site area is selected, then nothing is editable.	If the item currently being rendered is a site area, this parameter makes the element from the current site area editable when the page is in edit mode. If the item currently being rendered is a content item, this parameter makes the element from the parent site area of the content item editable when the page is in edit mode.	This parameter makes an element from the parent site area of the item currently being rendered editable when the page is in edit mode.	This parameter makes an element from the first item in the path of the item currently being rendered editable when the page is in edit mode.
`context="Autofill"` Use this option when the element that is referenced is determined by the search parameters of a menu, navigator, or taxonomy component. If the tag is not used within a menu, navigator, or taxonomy component, the context reverts to the current item.	This parameter makes an element from the item that is returned by a menu, navigator, or taxonomy component editable when the page is in edit mode.	This parameter makes an element from a content item that is returned by a menu, navigator, or taxonomy component editable when the page is in edit mode. If a site area is selected, then nothing is editable.	If the current item returned by a menu, navigator, or taxonomy component is a site area, then the element from the site area is editable when the page is in edit mode. If the current item returned by a menu, navigator, or taxonomy component is a content item, this parameter makes the element from the parent site area of the content item editable when the page is in edit mode.	This parameter makes an element from the parent item of the item that is returned by a menu, navigator, or taxonomy component editable when the page is in edit mode.	This parameter makes an element from the first item in the path of the item that is returned by a menu, navigator, or taxonomy component editable when the page is in edit mode.

Click Select authoring template to select an appropriate authoring template. Select the element to make editable from the list of available elements. This parameter is added to the tag as the key=" " parameter:
Click OK to add the tag to your design.

What to do next

when you add the tag to your design, you can also add the following parameters to the tag:

Table 2. Extra tag parameters. This table lists extra parameters that can be manually added to this tag.
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 `format="span"`, the editable region is rendered within a span tag.
`mode=" "`	This parameter determines the inline editing mode. Specify `mode="inplace"` to enable inplace editing of an element. Not all fields support inplace mode. If an element does not support inplace mode, dialog mode is used instead. Specify `mode="embed"` to enable embedded editing of an element. Not all fields support embed mode. If an element does not support embed mode, dialog mode is used instead. Specify `mode="dialog"` to enable editing in a dialog. This parameter is useful for larger elements such as rich text elements that may not be suitable for inplace editing. All fields support dialog 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: A standard callback can be written like this: `var myCallBack=new i$.Promise(); myCallBack.then(function(){window.alert('resolved')}, function(){window.alert('rejected')});return myCallBack;` If `myCallBack` is an `i$` promise, then the callback can be written like this:`myCallBack`. A function that itself returns a new promise each time it is executed can be written like this: `return (function() {var myCallBack = new i$.Promise(); myCallBack.then(function() {window.alert('resolved');}, function() {window.alert('rejected');}); return myCallBack;})();`
`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: `inplaceEdit.defaultClasses=class1 class2` 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 `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 element 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: `placeholder="useName"` This parameter renders the name of the element. `placeholder="useTitle"` This parameter renders the title of the element. `placeholder="useHelpText"` This parameter renders the help text of the element. `placeholder="useNone"` This parameter shows no placeholder.

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.

For example, to display an editable element that is named body use the following tags:

[EditableElement type="content" context="current" key="body"]
[Element type="content" context="current" key="body"]
[/EditableElement]

Note: The context settings of portalContext and portalMapping cannot be used with the editable element tag. This restriction applies both to the editable element tag itself, and any other tags that are referenced between the [EditableElement] and [/EditableElement] tags.

Library | Support | Terms of use |

Thursday, May 7, 2015 12:23am EST

Copyright IBM Corporation 2000, 2014.