Add the Parsys component to template

In this session, let us try to modify the template we created earlier. We will add a parsys component in the template to provide a space in the web page to drag and drop components.

Let us once again see how a page created using this template looks like.

1. Log into to SiteAdmin. (http://localhost:4502/siteadmin)
2. Double-click AEM Company page that you created. (If you have not created it, download the package that I provided in the previous session. And, then install it.)

The page appears with the text we entered in the template. There are three issues associated with this page:

• There is no place where you can drag and drop a component. (If you are not really able to make out that, I suggest you to visit my previous post. You could also open one of the pages from the sample websites to compare.)
• The Component tab doesn’t display any components.
• The template is not associated with any design. (Our page is really blank. It doesn’t have anything like header, footer, and so on.)

Let us solve these issues one-by-one. First, we will provide a place in the web page to add components.

1. Go to CRXDE Lite. (http://localhost:4504/crx/de)
2. Open the template’s rendering script. (/apps/aem-company/components/homepage/body.html)
3. Add the following code:
4. <div data-sly-resource=”${‘content’ @ resourceType=’wcm/foundation/components/parsys’}”></div>

This is a Sightly code. data-sly-resource is a tag to specify the component that you need to add to the page. It has a resourceType parameter that points to a parsys component. You would had noticed it points to a location where we saw a page component, which we inherited while creating a template. Note that this is the standard procedure to provide a location to add components in a template.

Now refresh the web page. Notice that now it provides you with a space where you can add components.

I have provided a new package in GitHub. (TemplateWithParsys.zip) Download and use it if you want to.

Summary: Use the parsys component to add space for the addition or deletion of components on a web page. You don’t need to create a parsys component. Always reuse the component that exists.