Generate dynamic Parsys in a component | Community
Skip to main content
manoj_devapath
manoj_devapath
New Participant
May 24, 2016
Solved

Generate dynamic Parsys in a component

  • May 24, 2016
  • 1 reply
  • 2120 views

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? 

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by kautuk_sahni

    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-into-the-design-css-fi

    //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

    1 reply

    kautuk_sahni
    kautuk_sahniAccepted solution
    Employee
    May 25, 2016

    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-into-the-design-css-fi

    //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

    Kautuk Sahni
      Terms & ConditionsAccessibility statement

      Loading footer...