[AEM6.0] Not able to edit component in Classic UI

[GK-AEM]

Hi All,

I am using AEM 6.0 and built a page component and included standalone component.

Have included component in a page component's JSP,when i open the page in Touch Optimized UI mode,i am able to edit the component but i could not able to edit component in classic UI and also components itself is not highlighted.

What we would be the issue and please help me.

Thanks,

Kishore

[Lokesh_Shivalingaiah]

what is the sling:resourceSuperType of your component ?

[Dinu_Arya]

Can you check CQ5 dialog (xtype: dialog/panel/tabpanel) is there or not under your component? If it is there, are you able to see the dialog when you click on it? 

[GK-AEM]

bsloki wrote...

what is the sling:resourceSuperType of your component ?

My page component has sling:resourceSuperType as "foundation/components/page" but included component does not refer to any sling:resourceSuperType.

[GK-AEM]

Dinu_Arya wrote...

Can you check CQ5 dialog (xtype: dialog/panel/tabpanel) is there or not under your component? If it is there, are you able to see the dialog when you click on it? 

xtype value as 'dialog' is already there but the problem here is i could open and edit component in Touch Optimized-View but the same operations could not able to do in Classic-UI.

What could be the issue??

[Opkar_Gill]

Is there any JavaScript errors? If you inspect the component in your browser, does it have the appropriate css class to highlight the component when you hover over it? Check the classes added to the other components which do work.

[GK-AEM]

Opkar Gill wrote...

Is there any JavaScript errors? If you inspect the component in your browser, does it have the appropriate css class to highlight the component when you hover over it? Check the classes added to the other components which do work.

Seeing "Uncaught TypeError: Cannot read property 'edit' of undefined" error on browser console.

Do we need to create separate dialog for classic and touch UI??

[Opkar_Gill · Accepted solution]

From the following page: https://docs.adobe.com/docs/en/aem/6-0/develop/components/components-develop.html

A dialog defined for the classic UI will operate on the touch-optimized UI.

A dialog defined for the touch-optimized UI will not operate on the classic UI.

Depending on your instance and author environment you might want to define both types of dialog for your component.

Details on the difference between touch and classic components: http://www.willdev4donuts.com/aem6-touch-ui-cqdialog-vs-dialog/#.VXNn02DvwsA 

Is the same error present in the touch interface?

Can you isolate where your error is coming from? For example, remove your custom component from the page.

Can you add the component to a parsys in classic mode?

[GK-AEM]

Opkar Gill wrote...

From the following page: https://docs.adobe.com/docs/en/aem/6-0/develop/components/components-develop.html

A dialog defined for the classic UI will operate on the touch-optimized UI.

A dialog defined for the touch-optimized UI will not operate on the classic UI.

Depending on your instance and author environment you might want to define both types of dialog for your component.

Details on the difference between touch and classic components: http://www.willdev4donuts.com/aem6-touch-ui-cqdialog-vs-dialog/#.VXNn02DvwsA 

Is the same error present in the touch interface?

Can you isolate where your error is coming from? For example, remove your custom component from the page.

Can you add the component to a parsys in classic mode?

Above given information is helpful.I have gone through the link it's exactly opposite to actual behavior.

I am not seeing the same error in Touch UI.

[GK-AEM]

Kishore@CQ wrote...

Opkar Gill wrote...

From the following page: https://docs.adobe.com/docs/en/aem/6-0/develop/components/components-develop.html

A dialog defined for the classic UI will operate on the touch-optimized UI.

A dialog defined for the touch-optimized UI will not operate on the classic UI.

Depending on your instance and author environment you might want to define both types of dialog for your component.

Details on the difference between touch and classic components: http://www.willdev4donuts.com/aem6-touch-ui-cqdialog-vs-dialog/#.VXNn02DvwsA 

Is the same error present in the touch interface?

Can you isolate where your error is coming from? For example, remove your custom component from the page.

Can you add the component to a parsys in classic mode?

Above given information is helpful.I have gone through the link it's exactly opposite to actual behavior.

I am not seeing the same error in Touch UI.

At below statement(from finally rendered script)  error is showing.

<script type="text/javascript">

CQ.WCM.edit({"path":"/content/eCampus/en/jcr:content/newslist","dialog":"/apps/ecampus/components/listchildren/dialog","type":"ecampus/components/listchildren","csp":"contentpage|page/newslist|listchildren","editConfig":{"listeners":{"afteredit":"REFRESH_PARENT"}}});
</script>
</div>