In pervious article, we talked about creating a custom template and page.
We will cover following steps in this article:
1. Using allowedPaths property of templates.
2. Adding component to web page from sidekick.
Changing allowedPaths Property:
1. Go to CRXDE Lite console
2. Open customPageComponent.jsp
3. Add the following code:
<cq:include path="par" resourceType="foundation/components/parsys" />
parsys, component will enable the drop of the components from sidekick.
Your final customPageComponent.jsp file will be as shown in below figure.
4. Save the changes.
Creating sample page:
5. Go to Websites
6. Select Websites.
7. Select New ==> New Folder.
8. Enter following Value in Create Folder dialog.
Title: Sample Website
9. Click Create.
10. Now select “Sample Website” folder and then create the page with following properties
Title: Sample Page
Note : If you check the create page dailog we are not able to view the custom template which we created.
11. To get our custom template in the page dailog we need to Change the allowedPaths property from “/content(/.*)?” to “/content/sampleWebsite(/.*)?“.
12. Now repeat step no 10, select custom template and create the page.
Open the Sample Page and if you view the source of the web page you will see the <head></head> tag, which is extended from the libs.
Adding Component :
1. As soon as you open the page in browser sidekick would also get opened but would be empty. To enable components in sidekick go in design mode by clicking on the design icon as shown in the figure below
2. Parsys component will show edit option, clicking on the option would open a dailog which would contain the list of components.
3.Select all the components which are required and click OK, page will refresh and sidekick will have list of the components which were selected as shown in the below figures.
4. Now drag Title component and drop in the drag drop box as shown in the below figure.
5. Similarly drag the text component below title.
6. Double click the text component, the dialog will open where we can edit the text as shown in the below figure.
7. Click Ok to see the changes getting reflected in the page.