AEM 6.1 Touch UI Component Inplace editing

Avatar

Avatar

Akanksha_Pratih

Avatar

Akanksha_Pratih

Akanksha_Pratih

19-04-2016

I have created a text-image component using sightly, to be used in touch UI. Need Inplace editing functionality for the same.

Added editconfig with inplaceEditing node but its not working for touch UI and working for classic UI.

Compared with OOB textimage component, there I'm able to do inplace editing and one edit pencil is also visible on component toolbar.

Have both dialog and cq: dialog with proper fields as well. Not able to find what is the issue with my component.

Please help

Replies

Avatar

Avatar

Hemant_arora

Avatar

Hemant_arora

Hemant_arora

19-04-2016

Make sure you have editorType="text" or editorType="textImage" property added to the inlineEditing node.

Refer to xml below:

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    cq:actions="[text:Text/Image,-,EDIT,DELETE]"
    cq:dialogMode="floating"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig">
    <cq:inplaceEditing
        jcr:primaryType="cq:InplaceEditingConfig"
        active="{Boolean}true"
        editorType="text"
>
        <config jcr:primaryType="nt:unstructured">
            <rtePlugins jcr:primaryType="nt:unstructured">
                <subsuperscript
                    jcr:primaryType="nt:unstructured"
                    features="*"/>
            </rtePlugins>
        </config>
    </cq:inplaceEditing>
</jcr:root>

Avatar

Avatar

Akanksha_Pratih

Avatar

Akanksha_Pratih

Akanksha_Pratih

19-04-2016

Hi Hemant

Inplace editing is working for text but not for image. When I click on "Edit(pencil)" on component toolbar, I get two options: Image and Text.

If I click on "Text" option, I'm able to edit text part of component.

But if I click on "Image" option, the image which is already there on my component opens as popup on left top corner of page and then I'm able to do nothing.

Kindly Help

Below is my xml:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    cq:dialogMode="floating"
    jcr:primaryType="cq:EditConfig">
    <cq:dropTargets jcr:primaryType="nt:unstructured">
        <image
            jcr:primaryType="cq:DropTargetConfig"
            accept="[image/.*]"
            groups="[media]"
            propertyName="./fileReference">
            <parameters
                jcr:primaryType="nt:unstructured"
                sling:resourceType="/apps/pjt/components/content/poctextimage">
                <image
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="foundation/components/image"
                    imageCrop=""
                    imageMap=""
                    imageRotate=""/>
            </parameters>
        </image>
    </cq:dropTargets>
    <cq:inplaceEditing
        jcr:primaryType="cq:InplaceEditingConfig"
        active="{Boolean}true"
        configPath="../../dialog/items/tab2/items/text"
        editorType="hybrid">
        <cq:childEditors jcr:primaryType="nt:unstructured">
            <image
                jcr:primaryType="cq:ChildEditorConfig"
                title="Image"
                type="image"/>
            <text
                jcr:primaryType="cq:ChildEditorConfig"
                title="Text"
                type="text"/>
        </cq:childEditors>
    </cq:inplaceEditing>
</jcr:root>

Avatar

Avatar

arpit-rathi

Avatar

arpit-rathi

arpit-rathi

09-01-2018

Hey, Have you got any fix for the same?

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

09-01-2018

If is this still broken - open a support ticket.

Avatar

Avatar

chirran414

Avatar

chirran414

chirran414

15-08-2018

Have you got any solution? I am also facing similar issue.

Avatar

Avatar

jasonz90639904

Avatar

jasonz90639904

jasonz90639904

31-08-2018

I fixed the issue by adding "cq-dd-image" to original image rendering like below

<div

    data-sly-test="${highlight.hasContent}"

    class="cq-dd-image textimage-${highlight.alignment || 'left'}"

    data-sly-resource="${'image' @ resourceType='core/wcm/components/image/v1/image' , wcmmode='disabled'}"></div>

As inplace editing renders based on position of original image (to override on top), it get image position by "cq-dd-image" selector.