ADOBE EXPERIENCE MANAGER (AEM) COMPONENTS

Parsys Component

Adobe Experience Manager (AEM) parsys component examples. These examples have been tested on AEM version 6.5.

How to allow specific components in a parsys added to a component.

Component Requirements

Design Dialog

Add this allowedcomponents node under jcr:root/content/items/tabs/items in your components _cq_design_dialog/.content.xml,

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

If your component does not have an existing cq:design_dialog (_cq_design_dialog), you will need to create one.

We’re using the local file system to create the cq:design_dialog for the component. Use code deployment techniques as needed to get your updates from the local file system into the AEM server.

Create a folder named _cq_design_dialog in the folder for the component. Then create a .content.xml file with the following:

_cq_design_dialog/.content.xml
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
          xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="My Component Design"
    sling:resourceType="cq/gui/components/authoring/dialog"
    helpPath="https://www.adobe.com/go/aem_cmp_tabs_v1">
    <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>
                    <styletab
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/include"
                        path="/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_design/styletab"/>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

After that is deployed to the AEM server, open the dialog to set the allowed components.

For example, navigate to Tools > Templates and your project folder. Open the Content Page template for editing. Look for the component in the Container and select its policy settings icon .

allowed components shown as buttons in the content page template container

Allowed components in Content Page template Container

If this is the first time the design dialog has been opened, a Policy Title will need to be set before the dialog can be saved since Policy Title is a required field.

allowed components expanded for selection in the design dialog

Selecting allowed components in the design dialog

Saving the Policy Settings

To save the policy setting updates that you made on the AEM server in your local codebase, the respective jcr:content needs to be transferred from the server. For example, these two files would pulled down from teh AEM server to the codebase for a project named myproject. I like using the AEM Repo Tool for this task.

Policy Mapping for the page template (myproject)

content/jcr_root/conf/myproject/settings/wcm/templates/page-content/policies/.content.xml

Project Component Policies (myproject)

content/jcr_root/conf/myproject/settings/wcm/policies/.content.xml
comments powered by Disqus