Tuesday 3 February 2015

Render a component at multiple sections in same page or within different page.

Hi Guys,

I will try to explain how to replicate the component's content on the different parts on page, even you can render the component's content on some other pages as well. Though it is simple if someone aware about the functionality of <cq:include /> or <sling include/>. But for those who are new and has some usecase like to render the same component in multiple parts of page, and on change of value of primary component all the dependent component replicate its value on the different sections of page.

So Lets look at <cq:include path="" resourceType=""/> . When i started work on CQ i was aware only about 

 <cq:include path="mycomponent" resourceType = "myproject/components/mycomponent"/>

To include mycomponent here my node will get create with name of mycomponent and the corresponding script will render at this time will be of myproject/components/mycomponent

So Let's you have pageA and which contains the parsys only, & you want, if you drop component in parsys it should replicate at the various sections of of pageA. So this can achieve by :

1) You dropped the component in parsys of pageA then the JCR structure will be like : 

pageA
   |---jcr:content
            |----parsys
                   |-----mycomponent

2) When you drop the component script will get execute for the resourceType mycomponent & it renders the content over page.

3) Now in the script of pageA say resourceType i.e. basepage.jsp . I included the below line.

 <cq:include path="/content/myproject/en/pageA/jcr:content/parsys/mycomponent" resourceType="myproject/components/mycomponent" />

This line say include the /content/myproject/en/pageA/jcr:content/parsys/mycomponent resource which obviously will have content stored as we have dropped it previously inside parsys and entered the content it that. & To render its content we will use the script of myproject/components/mycomponent component.




The one thing that was new for me was the explanation of path.

Hope this will help.
Thanks

No comments:

Post a Comment