How To Map Desktop Website Component to Mobile Component using MSM Rollout Configuration in CQ5

If you have a desktop website and you want to have a mobile website which will entirely be managed from desktop website,you can achieve this by MSM functionality. This avoids extra overhead of managing mobile website separately.Because with MSM,you will create mobile pages using live copy of desktop pages.But you will have to create mobile pages, templates and components

To create mobile site,proceed as follows:-

1. Create page component mobilecontentpage the way we create page component for desktop site but make sure you give the sling:resourceSuperType to wcm/mobile/components/page 
2. write body.jsp with project specific logic

Create page template mobile contentpage template:-

1. Set sling:resourceType to newly created page component
2. Set allowedPaths property

Create a sample desktop page under /content/geometrixx/en/products using geometrix content page template. Drag and drop carousal and text component. Configure carousal with 2 pages and text component with 3 paragraphs.

Once you are done with configuration,then go to content explorer and observe the JCR properties of both these components. The carousal is configured with only 2 images and text component is configured with 3 paragraphs. As shown below

Suppose we have a mobile home page where we want to have only one image instead of carousal.Then we should map the carousal component to image component which will show an image on the mobile page.

Similarly,suppose we have created separate mobile text component  where we have written a logic to show only one paragraph then we should map the text component present on the desktop page to the mobile text component.

Basically the mapping should be done as below

foundation/components/carousal --> foundation/components/mobileImage
foundation/components/text --> apps/geometrix/components/mobileText

Similarly, the desktop page component should be mapped to mobile page component.

apps/geometrixx-outdoors/components/page --> apps/geometrixx-outdoors/components/page_mobile

/apps/geometrixx-outdoors/templates/page -- > /apps/geometrixx-outdoors/templates/page_mobile

Rollout Configuration :-

A rollout configuration consists of an event and one or more synchronization action. You need to define the actions to be performed on the live copy page when a specific event occurs on the blue print page.

In this case, desktop website is a blue print and mobile website is live copy

You can find more information about rollout configuration on Configuring Live Copy Synchronization

By default cq has provided few rollouts such as standard rollout ,push on modify etc.

If these rollout's are not as per your requirement then simply create your own rollout configuration as per steps given below.

1. Go to http://localhost:4502/miscadmin#/etc/msm/rolloutconfigs 
2. Create your own custom rollout using RolloutConfig Template
3. Open the page and specify the sync action 
4. Open the crxde and go to /etc/msm/rolloutconfigs/geometrixx-outdoors-mobile/jcr:content/
5. Copy the editProperties node and paste it to our custom rollout config node.
6. Now edit the editProperties node's property as per your need

Edit Properties:-

On the live copy, it edits properties of the live copy: the selection of the properties and their transformation is done by setting a value to the editMap property. editMap needs to have the following format:

[property 1]#[current value (regex)]#[new value (regex)], ...,
[property x]#[current value (regex)]#[new value (regex)]

Example: setting editMap to:

sling:resourceType#/(contentpage|homepage)#/mobilecontentpage,
cq:template#/contentpage#/mobilecontentpage

transforms the properties of live copy nodes as follows:

- all the sling:resourceType that are either set to contentpage or to homepage are set to mobilecontentpage and

- all the cq:template that are set to contentpage are set to mobilecontentpage.

So  In our case we have to specify the mapping as given below:-

sling:resourceType#^geometrixx-outdoors/components/page$#geometrixx-outdoors/components/page_mobile,sling:resourceType#^foundation/components/carousal$#foundation/components/mobileimage,sling:resourceType#^foundation/components/text$#foundation/components/mobiletext#^/apps/geometrixx-outdoors/templates/page$#/apps/geometrixx-outdoors/templates/page_mobile

Create a live copy page using custom rollout created above:-

1. Go to http://localhost:4502/siteadmin#/content/geometrixx_mobile/en 
2. New Live Copy
3. Select page for which you want to create a live copy and select proper rollout configuration
4. Once the page is created using live copy,go to content explorer and check the sling:rsourceType properties.
5. Everything will be copied as is except the sling:resourceType will be changed as per rollout configuration.
6. The page will be created with the mobile page template specified in the rollout configuration.
7. We had two image paths configured in the carousal. These paths will be copied to mobileImage component with same property name. You simply need to write a logic to render any one of the image out of two.
8. Similarly,for text comeponent,entire text is copied with the same property name. You have to write a logic about how much text you would like to display on the mobile page.

Questions ???