Generate dynamic Parsys in a component

[mjb54261515]

How to generate dynamic Parsys in slightly.

I have a selection type. Options varies from 1 to 6 
I am planning to generate different parsys on change of this section.

I tried the following code: Parsys is dynamically generated but if I drag drop a component in one Parsys. The Same component is reflected in other Parsys to. 
<div class="business" data-sly-list.tab="${nav.tabs}">
            <div class="select${tab.rank}" >
                <div data-sly-resource="${ @path='par${tab.rank}', resourceType='foundation/components/parsys'}"></div>        
            </div>
        </div>
Did anyone come across this requirement. Can someone help me with this? 

[kautuk_sahni · Accepted solution]

Hi 

What exactly do you mean by "generating different parsys on changing this section"?

Is it that you want to achieve different styling ? If so then please have a look at this old forum post,

Link:- http://stackoverflow.com/questions/15556282/in-adobe-aem-how-does-the-parsys-component-inject-styles...

//how does the parsys component inject styles into the design css file?

How the design CSS is rendered

The design information is stored in the /etc/designs/my-design as you noticed. This component for this page supports a css rendition of the information contained.

You can track the source of the rendition using the CQ development tools included in the product...

If you take a look at your design page in crx/de or crx/explorer, you'll notice it has sling:resourceType of wcm/core/components/designer.

That will be rendered by the following java class /libs/wcm/core/components/designer/designer.css.java. You can take a look at this file in crx/de also. I'm not sure the license in that file would allow me to post a snippet here, but you should be able to find it easily yourself.

The class takes the page Resource and adapts the object to a com.day.cq.wcm.api.designer.Designinstance.

Looking at the dependency finder in the web console, the Design class is provided by the cq-wcm-api bundle.

<dependency> <groupId>com.day.cq.wcm</groupId> <artifactId>cq-wcm-api</artifactId> <version>5.5.0</version> <scope>provided</scope> </dependency>

This is provided by the jar: /libs/wcm/core/install/cq-wcm-api-5.5.0.jar, which is bundled with CQ.

Customising the design CSS

Looking at what you are trying to achieve... you are able to customise the content of the design page (this is normally by adding a design dialog to the component you are working with) adding any properties/css attributes associated with that component.

For an example of this take a look at logo component within the geometrixx design (/etc/designs/geometrixx/jcr:content/contentpage/logo). This already has a div img.marginproperty which translates to

.contentpage div.logo img { margin: 1px; }

in the output css (/etc/designs/geometrixx.css?cacheKiller=xyz).

Adding a property named div img.border with a value of 5px solid red to this node will output css as:

.contentpage div.logo img { margin: 1px; border: 5px solid red; }

Considering your example, your design content node at /etc/designs/my-design should look something like this:

+jcr:content + page_full + par + section - div .margin = 30px

Or in the repository XML format, like this:

<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="cq:Page"> <jcr:content cq:lastModified="{Date}2013-01-13T17:22:51.339+01:00" cq:lastModifiedBy="admin" cq:template="/libs/wcm/core/templates/designpage" jcr:primaryType="cq:PageContent" jcr:title="design" sling:resourceType="wcm/core/components/designer"> <page_full jcr:primaryType="nt:unstructured"> <par jcr:primaryType="nt:unstructured"> <section jcr:primaryType="nt:unstructured" div_x0020_.margin="30px"/> </par> </page_full> </jcr:content> </jcr:root>

Link:- https://forums.adobe.com/thread/1177465

I hope this will help you.

Thanks and Regards

Kautuk Sahni