How to create a page with predefined components?
Templates and components are core assets/building blocks of any AEM project and provide a capability to content authors to update pages/content.
Many times we want to create pages with some default components prefilled/configured/dropped on a newly created page with an option for authors where they can remove any component (if it is not required).
Let’s consider a scenario/use case where this can be applied. Let’s say we have photo album site where author can create new albums/pages using a photo album template. A photo album page has some space reserved on right hand side for displaying popular images and newly added images. Both of these components are dropped inside a parsys.
Now, if author wants to create an album page he needs to create a page and then drop components one by on the newly create page. Is there a way to have a page prefilled with all the components so that author doesn’t need to add them one by one? Yes, this is what we are going to cover in this article.
Follow these steps to have a template preconfigured with some default components:
1) Create a new page and drop all required components on that page. In our case, we’ll create a new album page and will drop “photo album”, “popular images” and “newly added” component.
2) Go the CRXDELite and explore the newly created page and nodes under it. You’ll see that with there are 2 parsys nodes one of them has “photo album” and another parsys node have “popular images” and “newly added” component nodes.
3) Go the template in apps folder using which page has been created (e.g. (/apps/photogallery/templates/albumpage) and as you can see it by default contains “jcr:content” node.
4) Now copy both parsys nodes from album page that we have created in step#1 to jcr:content node of template (albumpage). At this point the structure of jcr: content should match the with node structure of actual album page.
5) Create a new album page using the same template (i.e. (/apps/photogallery/templates/albumpage) and now when you open the page you’ll see that newly created page already contains all the components on it.
So, how does this works? A template node in CQ/AEM is of type cq:template and the default behaviors this node is doing all the work for us. Basically whatever properties/nodes that we have at template’s jcr:content level will be copied over to a newly created page’s node.