How to include component with dialog box on template with sightly?

[squid267]

Not sure if these is even possible, but I want to include a component on a template so its on every page by default. But I also want to give content authors the ability to overwrite the content using the dialog box. Is this possible?

Currently,

I'm using this code on my base page template

<div data-sly-resource="${'root' @ resourceType='website/wcm/www/components/global/cu3_contact_bar'}"></div>

While it embeds the component on every page, the component isn't author-able. Any ideas?

[smacdonald2008]

See:

sample7.html -- http://blogs.adobe.com/experiencedelivers/experience-management/htl-intro-part-1/

<div data-sly-resource="${'par' @ resourceType='foundation/components/parsys'}"></div>
With data-sly-resource you can include components and resources. In the above sample you include of standard paragraph system in your template.

I tested this too and put this HTL code in a componet:

AEM HTL Example: 
<div data-sly-resource="${'par' @ resourceType='foundation/components/list'}"></div>

When i opened in Classic UI - i was able to open the dialog: 

However - in Touch UI - it did not open

See if you can open in Classic UI view.

[smacdonald2008]

In Touch UI - the browser throw an error: 

Failed to load resource: the server responded with a status of 500 (Server Error) 

[squid267]

I can't verify in ClassicUi since the component wasn't made for it. I'll have to add some classic ui only code to render to try. In the meantime, should I file this as a bug with Daycare?

[smacdonald2008]

Yes - file as a bug with support and then test with a classic ui component - try the list component for testing as i have shown. 

[kautuk_sahni · Accepted solution]

I have also tested it.

When i opened it in Classic UI - i am able to open the dialog however - in Touch UI - it did not open.

Please create a daycare ticket for this.

~kautuk

[pankajg1611582]

Is it resolved in latest release of AEM?

[koduru]

I tried something like this

<div data-sly-resource="par"></div> <div data-sly-resource="${'search-results' @ resourceType='path/to/component'}"></div> <div data-sly-resource="${'parafter' @ resourceType='wcm/foundation/components/parsys'}"></div>

and it works for me

this <div data-sly-resource="par"></div> allows you to edit

this <div data-sly-resource="${'parafter' @ resourceType='wcm/foundation/components/parsys'}"></div> will add an extra parsys in the bottom