Policies in AEM6.5

[anasustic]

<image_policy
        jcr:primaryType="nt:unstructured"
        sling:resourceType="wcm/core/components/policy/policy"
        jcr:title="Image"
        allowUpload="false"
        allowedRenditionWidths="[960,720,590]"
        small="300x200"
        cq:styleDefaultClasses="l-content-width">
    <jcr:content jcr:primaryType="nt:unstructured"/>
    <cq:styleGroups jcr:primaryType="nt:unstructured">
        <item0 jcr:primaryType="nt:unstructured">
            <cq:styles jcr:primaryType="nt:unstructured">
                <item0
                        cq:styleClasses="l-content-width l-content-width--narrow"
                        cq:styleId="1603361754179"
                        cq:styleLabel="Small"
                        jcr:primaryType="nt:unstructured"/>
            </cq:styles>
        </item0>
    </cq:styleGroups>
</image_policy>

Hi

I am trying to understand how will this policy apply the classes. This policy is used for the image component in an area. What are the different cq: styles refering to?

Also what is the variable currentStyle.offCanvasDivCss refering to in the template?

<div class="${currentStyle.offCanvasDivCss}" data-sly-unwrap="${!currentStyle.offCanvasDivCss}">

[SantoshSai]

Hi @anasustic 

Here are the detailed documentation about policies  -

1. https://experienceleague.adobe.com/docs/experience-manager-64/forms/administrator-help/work-with-doc...
2. https://medium.com/adobetech/fantastic-aem-configurations-and-how-to-code-them-edb5663e983f

cq:style - https://experienceleague.adobe.com/docs/experience-manager-learn/sites/developing/style-system-techn...

currentStyle - Access design_dialog(currentStyle) properties.

Global content (that is, component values that are common across multiple instances of the same template) are stored as "styles" and edited via a "design dialog".

They are stored as follows:

/etc/designs/<design>/jcr:content/<template>/<component>

So, for the component logo in the template homepage, using the default design:

• currentStyle is /etc/designs/default/jcr:content/homepage/logo

Hope this helps you!

Regards,
Santosh

[arunpatidar]

Hi,

You can check how to access design dialog (policy) values in model

https://taylor.callsen.me/accessing-content-policies-from-aem-dialogs-and-components/

The cq:style works at front end, basically it map the stored value with policy style

https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-wknd-tutorial-devel...

Policy - https://github.com/arunpatidar02/aemaacs-aemlab/blob/master/ui.content/src/main/content/jcr_root/con... 

Applied at - https://github.com/arunpatidar02/aemaacs-aemlab/blob/master/ui.content/src/main/content/jcr_root/con... 

but if you want to get this in model then you can use below code

https://github.com/arunpatidar02/aem63app-repo/blob/86b4495e3275b9358439846b586f4cefd96ad1b1/java/He...

[anasustic]

Hi

Will the class

cq:styleDefaultClasses

be applied to any component of type Image in my case?

If I understand correctly the documentation is the 

cq:styleGroups

available for Editors when they want to style the image component themselves. Is that correct?  

[arunpatidar]

Hi, Yes this is the additional class applied to your component 

https://medium.com/adobetech/using-aem-style-system-to-increase-reusability-of-components-8177c5b65c...