Limit Parysis/Responsive grid in a container component

Goal

Limit components inside a parysis/responsive grid in a container component, or in other words, in a “nested parsys“.

Procedure

Inside your component folder create if missing the “_cq_design_dialog” folder and inside of it the “.content.xml” file. The file must contain at least the following lines (the “allowedcomponents” tag in specific):

<?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="nt:unstructured"
    jcr:title="Container Component"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <allowedcomponents
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Allowed Components"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <components
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="cq/gui/components/authoring/allowedcomponents"
                                name="./components"/>
                        </items>
                    </allowedcomponents>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

Go the the policy file located at the path “/conf/Lab2020/settings/wcm/policies”. Under the “jcr:root” tag you should already find your project tag (mine is “Lab2020”). Create the nodes following the path of your component (mine is /Lab2020/components/content/container) and create your policy tag, adding in the property “components” your list of available components

    <Lab2020 jcr:primaryType="nt:unstructured">
        <components jcr:primaryType="nt:unstructured">
            <content jcr:primaryType="nt:unstructured">
                <container jcr:primaryType="nt:unstructured">
                    <policy_1566807883229
                            jcr:primaryType="nt:unstructured"
                            jcr:title="Lab2020 Container Policy"
                            sling:resourceType="wcm/core/components/policy/policy"
                            components="[/apps/Lab2020/components/content/image,/apps/Lab2020/components/content/text,/apps/Lab2020/components/content/title]">
                        <jcr:content jcr:primaryType="nt:unstructured"/>
                    </policy_1566807883229>
                </container>
            </content>
        </components>
    </Lab2020>

Last, go to the policy file of your template (e.g. conf/Lab2020/settings/wcm/templates/content-page/policies). You should have the same structure of the template, so at least the root tag, and the reponsivegrid tag. Under the responsivegrid tag, add the same structure presented here below:

<?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
        jcr:primaryType="nt:unstructured"
        sling:resourceType="wcm/core/components/policies/mappings">
        <root
            cq:policy="wcm/foundation/components/responsivegrid/content-default"
            jcr:primaryType="nt:unstructured"
            sling:resourceType="wcm/core/components/policies/mapping">
            <responsivegrid
                cq:policy="wcm/foundation/components/responsivegrid/content-default"
                jcr:primaryType="nt:unstructured"
                sling:resourceType="wcm/core/components/policies/mapping">
                <Lab2020 jcr:primaryType="nt:unstructured">
                    <components jcr:primaryType="nt:unstructured">
                        <content jcr:primaryType="nt:unstructured">
                            <container jcr:primaryType="nt:unstructured"
                                       cq:policy="Lab2020/components/content/container/policy_1566807883229"
                                       sling:resourceType="wcm/core/components/policies/mapping"/>
                        </content>
                    </components>
                </Lab2020>
            </responsivegrid>
        </root>
    </jcr:content>
</jcr:root>

In short, adding again the structure of your component (Lab2020/components/content/container), I think you are saying that dragging in your responsivegrid a component with the resource type highlighted above, that component will have the mapped policy.

Here you can see a demo of what you get:

This works with the latest versions of AEM, after the repository restructuring and with the usage of editable templates.

Hope it helps!

Cheers 🧁

Like this:

Related

Leave a Reply Cancel reply