May 19, 2020
Estimated Post Reading Time ~

WCM modes in CQ5

Before developing in CQ5 it's vital to know the different modes in cq5 authoring. These modes are referred to as WCM modes. There are 3 authoring modes in cq5;
  • Edit mode
  • Design mode
  • Preview Mode
The significant thing to know about these modes is where the data is stored when the author does something in these modes.

Preview mode: The name says it all. This mode removes all the authoring interface and shows you how the web page would look on the website. It's best to use this mode for checking the end results. Usually, the CSS styling will not look like it's supposed to in the other modes as the pages in other two modes will have a lot of additional marks up to aid authoring (Example: The green highlight on the component for editing, edit bars, etc. come from additional markup[<HTML>] added by cq5).

Edit mode: This is the mode used most. Whenever the author makes changes or configures components (Example: Adding a title to a page by editing the Title component)in this mode the data is stored under the components' node. If a component has been included on a page, then the component is stored under the JCR node of the page. Any data configured by the user in the component will be stored under the component's node. The path of the configured data will look something like this : /content/your_website/path_to_the_page/jcr/component

As you can notice from the path any changes will be limited to that particular component on the page. Even if the page has multiple instances of the same component the changes will hold the effect on that exact component. To better understand how it works I suggest you <cq:include> the component and also drag the same component onto a parsys on the same page. Configure the component. Go to the /content in CRXDE lite's tree (if you're familiar with content explorer it would be a better choice) folder navigate to the page and observe the data structure under the page.

Design mode: This mode is used to configure components that have the same data on different pages as the logo or footer. Any changes you make on the component in any one of the pages' will be reflected on all the pages that have the component. The catch is all these pages must have the same design.

What is design? looking at design from a high level, the design is the common data for a bunch of web pages(could be an entire website). The data stored in the design is generally the css and common stuff like logo, header, footer, etc. The designs are stored under /etc. The design is assigned through the page properties dialog in the sidekick. The changes you make to the component in design mode will be saved under /etc/your_website's_design. To better understand how it works add the OOTB Logo component in your page component. Edit it in design mode after you have assigned it a design through page properties. Navigate to /etc/design in CRXDE lite and check the contents under your website's design. Since your component is picking data from the design all pages referring to the same design will reflect the changes.

For how to choose these modes while authoring checks out this link: http://dev.day.com/docs/v5_2/html-resources/cq5_guide_power_user/ch03s03.html.

Now that you know how the data is stored you can choose in which mode the component must be edited by the author. Design for the common and Edit for the rest.

To create a design go-to site admin → tools and create a new page under design (just like you create a page under website in site admin).


By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.