Inherit a component in a page using sightly | Community
Skip to main content
anujr64082109
anujr64082109
Level 2
November 14, 2017

Inherit a component in a page using sightly

  • November 14, 2017
  • 2 replies
  • 6030 views

hi All,

we have recently migrated from AEM 6.0 to AEM 6.3 and refactored the code in sightly. There is one scenarion i need help with.

we have a page :

     /content/myproduct/global/en_US/index

This has components in it

          /content/myproduct/global/en_US/index/jcr:content

               - navigation

               - logo

               - search

               - menu (sling:resourceType = foundation/components/iparsys)

                      - comp1 (sling:resourceType = cq:component)

                      - comp2 (sling:resourceType = cq:component)

                      - comp3 (sling:resourceType = cq:component)

In jsp we were including 'menu' in another page using: <sling:include path="/content/myproduct/global/en_US/index/jcr:content/menu" />

when we migrated to sightly we are including it using: <sly data-sly-resource="${@ path=/content/myproduct/global/en_US/index/jcr:content/menu, resourceType='foundation/components/iparsys'}"/>

This inclusion is working fine if we view the page but this is authorable in the page in which it is included using the data-sly-resource tag. As this is being included from another page, it should not be allowed to be authored. if we view the same page in classic UI and try to click on 'edit' to open the component dialog, it shows the dialog fields to be greyed out and there is a lock at the bottom left hand side to enable or disable the inheritance.

1. The behavior in classic UI is as expected but why does touch UI allows the component to be edited in the page where it is added as resource?

2. what are we doing wrong here w.r.t touch UI?

i tried the solution as mentioned by Feike Visser in this article: CQ INCLUDE and SLING INCLUDE in Sightly

Thanks for the help in advance.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

smacdonald2008
smacdonald2008
Level 10
November 14, 2017

WHen you include a component into a page template as such --

<div data-sly-resource="${'banner' @ resourceType='/apps/toyapp/components/content/bannerComponent'}"></div>

An Author can still edit the component via a dialog in Edit mode. Why do you think this is an issue?

You should not be importing this from another page - but from under a /apps structure like:

/apps/toyapp/components/content .... <all components for the site are located here>

anujr64082109
anujr64082109Author
Level 2
November 14, 2017

Our goal is to include the component along with dialog values into another page. Our comoonent 'menu' contains the navigation menus and included in the header section of the page. It is authored in index.html page and we want the same component with same values inside another page that is not a direct child of index.html.

So basically we want to inherit the 'menu' item from index.html to our other page. And when it is inherited it should be authorable in index.html only. It should be read only values for component dialog in the page it is included into.

anujr64082109
anujr64082109Author
Level 2
November 14, 2017

This may be a bug. If you pull in from under /content...<point to a resource in another page> -- i agree - it should not let an author change it. Please open a ticket so this can be fixed.


I thought so too.

Classic ui works fine as it locks the dialog because of inheritance. Same should happen in touch ui as well.

Thanks for the response. I will try logging this as bug.

Deba754
Deba754
May 24, 2019

I have similar issue and found out that "cq:noDecoration = true" was added as part of my component properties. After removing that, my component is editable.
I have also included the component in page template.

-Deba

Terms & ConditionsAccessibility statement

Loading footer...