Expand my Community achievements bar.

SOLVED

data-sly-resource Not Editable

Avatar

Level 2

On a previous project (6.0 classic) I was able to use data-sly-resource in my templates to include some components and make them editable by authors. In playing around with 6.1 with touch ui, I tried to use the same approach but experiencing an unexpected outcome. The component will appear on the page, however it is not editable in Touch UI. It is editable in classic however. Am I missing a property or some configuration for the design_dialog that is preventing it from being edited in Touch UI?

Here is an example from my template:

<div data-sly-resource="${'news-details' @ resourceType='/apps/project/components/content/news-details'}">Event Detail</div>
1 Accepted Solution

Avatar

Correct answer by
Level 10

I just tested Sightly on AEM 6.1. 

<p>This is your Sightly component:</p>
<div data-sly-use.heroTextObject="com.mycompany.myproject.sightly.HeroTextComponent" data-sly-test="${heroTextObject}">
       <h1>${heroTextObject.heroTextBean.headingText}</h1>
       <p>${heroTextObject.heroTextBean.description}</p>    
</div>

This is editable in Touch 6.1 - see:

[img]Sightly61.png[/img]

For your component - do you have a dialog - like the one shown above? 

View solution in original post

12 Replies

Avatar

Administrator

Hi Community 

Replying on this post so that it comes up in order.

This post is migrated from AEM Forms to here.

The same problem was mentioned in a comment (5th comment from top by Nivaz Deen) section of this link :- http://labs.6dglobal.com/blog/2014-05-22/issues-with-touch-ui-aem6/

Please have a look at the same.

 

Thanks and Regards

Kautuk Sahni



Kautuk Sahni

Avatar

Correct answer by
Level 10

I just tested Sightly on AEM 6.1. 

<p>This is your Sightly component:</p>
<div data-sly-use.heroTextObject="com.mycompany.myproject.sightly.HeroTextComponent" data-sly-test="${heroTextObject}">
       <h1>${heroTextObject.heroTextBean.headingText}</h1>
       <p>${heroTextObject.heroTextBean.description}</p>    
</div>

This is editable in Touch 6.1 - see:

[img]Sightly61.png[/img]

For your component - do you have a dialog - like the one shown above? 

Avatar

Level 2

Are you suggesting Nivaz's question will provide a solution to my question? I don't see any solution to the issue mentioned. Please clarify.

Avatar

Employee Advisor

Are you able to edit the component in touch UI if you just drag and drop it to an empty parsys ? I tested the "data-sly-resource" in my component on 6.1 and I am able to edit in Touch UI. 

Avatar

Level 2

If I drag the component into a parsys then yes I can edit the component. The problem occurs when components are hard coded into templates. For example, we have Event Templates that have components like Title, Text, Image, etc all hard coded into that template for consistency. 

I have not tried using data-sly-use as it would require rewriting some of our components. We may have to if we want to continue with this approach to templates...

I was hoping there might be a solution or a hotfix as it works in classic.

Avatar

Level 10

Just wondering, have you used any piece of code to remove extra div generated by AEM ?

Avatar

Level 2

edubey wrote...

Just wondering, have you used any piece of code to remove extra div generated by AEM ?

 

No we are not removing decorations

Avatar

Employee

are you able to share a reproducible case here, so I can have a look at it?

Avatar

Level 4

try using -
 <div data-sly-resource="${ @path='news-details' ,resourceType='/apps/project/components/content/news-details'}" data-sly-unwrap></div>

Avatar

Employee

Does the path exist that you are trying to edit?

Avatar

Level 4

if we are including a component within some other component, the node wont exist until we edit the dialog once. so, the path doesnt exist yet.

Avatar

Level 2

Hi,

I am also facing same issue. Image of dialog in solution is not visible. Can you please upload the image again.

Thanks.