Thursday, February 7, 2019

cq:inplaceEditing in cq:editConfig Node in AEM


Hello Everyone,

In my previous blog, you have already gone through about cq:dropTargets and
now in this blog we will talk about how to use cq:inplaceEditing in components.

Inplace editing is also a good feature to add in your component and is usually
used for rich Text and image widgets.

Let’s talk about how to use this feature and all the possible scenarios where this
feature can be used.
Inline Editing in Text (RichText) Component:
In the richText widget, you can change the content using inline editing without opening the dialog.
Step1: Create a cq:inplaceEditing node (of type cq:inplaceEditingConfig) as the child node of cq:EditConfig node (of type cq:editConfig) and add the following properties in the same node.
editorType
string
text
active
boolean
true

Step2: Make a node “config” as a child node of cq:inplaceEditing and add a property “textPropertyName” and the value must be the name property of the field (richText field) for which you are doing inplace editing.
textPropertyName
text
Through these steps you can only see default plugins of rich Text editor.

Demonstration Video on cq:editConfig in Text (RichText) Component in AEM

Inline Editing for any TextField Widget in a Component
Step1: Create a cq:inplaceEditing node (of type cq:inplaceEditingConfig) as the child node of cq:EditConfig node (of type cq:editConfig) and add the following properties in the same node.
editorType
string
plaintext
active
boolean
true

Step2: Make a node “config” as a child node of cq:inplaceEditing and add a
property “textPropertyName” and the value must be the name property of the
text field for which you are doing inplace editing.
textPropertyName
text

Demonstration Video on cq:editConfig for any TextField Widget in AEM

Inline Editing in Title Component
Step1: Create a cq:inplaceEditing node (of type cq:inplaceEditingConfig) as the child node of cq:EditConfig node (of type cq:editConfig) and
add the following properties in the same node.
editorType
string
title
active
boolean
true
Step2: Make a node “config” as a child node of cq:inplaceEditing and
add a property “titleTag” as shown below.
titleTag
String[]
h1,h2,h3,h4
Note: The inline editing for title component will only work for the name property ”jcr:title”.
Note: “titleTag” is important so that you can do inline editing in title sitting under a heading Tag.
Demonstration Video on cq:editConfig in Title Component in AEM

Inline Editing in Image Component
In the Image Component, using inline editing, the author can crop,flip,zoom and rotate the images.
Step1: Create a cq:inplaceEditing node (of type cq:inplaceEditingConfig) as the child node of cq:EditConfig node (of type cq:editConfig) and
add the following properties in the same node.
editorType
string
image
active
boolean
true

Step2: In the html file of the component, use the class “cq-dd-image” to render the inplace editing plugins.For example:

<div class="cq-dd-image ">
               <img src="${image}" alt="${properties.imageAltText}"  />
</div>

In short, the html should have this (cq-dd-image) class to render the image with inline editing plugins.

The js file /libs/cq/gui/components/authoring/editors/clientlibs/core/inlineediting
/js/ImageEditor.js gets loaded while opening the dialog,find for the class and render the image for inline editing.

Through these steps, you can only show default inplace editing plugins in the Image Component.
Here no need to add “config” node for “propertyName”, which image will be inside the class
,that image will start showing plugins.

You can add custom plugins for inplace editing using the particular xml here.

Demonstration Video on cq:editConfig in Image Component in AEM


Please go through the demo video for clear understanding of inplaceEditing in
all the possible components.

If you have any query or suggestion then kindly comment or mail us at sgaem.blog02@gmail.com

Hope it will help you guys !!
Thanks and Happy Learning.

3 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete