Expand my Community achievements bar.

Applications for the 2024-2025 Adobe Experience Manager Champion Program are open!
SOLVED

Custom component with Parsys not working after page save

Avatar

Level 5

I have a custom component I have created which has a parsys on it.  My component is an extension of the core image component:

 

<?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"
    cq:icon="image"
    cq:isContainer="{Boolean}true"
    jcr:description="Full Width Hero featuring a Smart Adaptive Image"
    jcr:primaryType="cq:Component"
    jcr:title="Full Width Hero"
    sling:resourceSuperType="core/wcm/components/image/v3/image"
    componentGroup="MyApp - Content"/>

 

And in the HTML for the component, I have:

 

<sly ...>
  <!-- other markup as necessary -->

  <sly data-sly-resource="${resource.path @ resourceType='foundation/components/parsys/new', appendPath='/*', decorationTagName='div', cssClassName='new section aem-Grid-newComponent'}"
        data-sly-test="${(wcmmode.edit || wcmmode.preview)}"></sly>

  <!-- other markup as necessary -->
</sly>

 

Within the policy for the component, I added:

 

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

 

And everything works fine up until this point.  I have configured the policy and it works, and the component renders correctly.  When I create an instance of this component, I can see the placeholder to insert the necessary child components (in this case, I am allowing different types of buttons within a custom Hero component).

 

When the page is saved or changed, however, these nested components "disappear".

 

With the component on the page:

 

dylanmccurrymsft_0-1669059087582.png

 

I can then add a Button component to this parsys:

dylanmccurrymsft_1-1669059181462.png

However, when the page is refreshed (adding a style somewhere, viewing as published, changing properties, whatever), the component disappears:

 

dylanmccurrymsft_2-1669059269526.png

 

However, it is visible in the JCR:

dylanmccurrymsft_3-1669059532143.png

 

What am I missing?  How can I get a custom parsys on a component which allows me to nest child components?

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @dylanmccurry,

<sly data-sly-resource="${'parsys' @ resourceType='wcm/foundation/components/responsivegrid'}"></sly>

Please check above where name of the parsys should have the same name as in JCR - in your case resource.path is dynamically rendering and that is an absolute path. You can try display it ${resource.path} and see what it is to understand yourself hence it is working with `@path`

data-sly-resource: Includes the result of rendering the indicated resource through the sling resolution and rendering process.

A simple resource include: 

<article data-sly-resource="path/to/resource"></article>

Code samples are intended for illustration purposes only.

Manipulating the path of the resource:

<article data-sly-resource="${ @ path='path/to/resource'}"></article>
<article data-sly-resource="${'resource' @ prependPath='my/path'}"></article>
<article data-sly-resource="${'my/path' @ appendPath='resource'}"></article>​

Hope that helps!

Regards,

Santosh

View solution in original post

2 Replies

Avatar

Level 5

Noticing that this appears to work correctly...

        <div data-sly-resource="${ @path=resource.path, resourceType='foundation/components/parsys', decorationTagName='div', cssClassName='new section aem-Grid-newComponent'}"></div>


Is there official documentation on the subject of parsys and how to incorporate them into custom components?

Avatar

Correct answer by
Community Advisor

Hi @dylanmccurry,

<sly data-sly-resource="${'parsys' @ resourceType='wcm/foundation/components/responsivegrid'}"></sly>

Please check above where name of the parsys should have the same name as in JCR - in your case resource.path is dynamically rendering and that is an absolute path. You can try display it ${resource.path} and see what it is to understand yourself hence it is working with `@path`

data-sly-resource: Includes the result of rendering the indicated resource through the sling resolution and rendering process.

A simple resource include: 

<article data-sly-resource="path/to/resource"></article>

Code samples are intended for illustration purposes only.

Manipulating the path of the resource:

<article data-sly-resource="${ @ path='path/to/resource'}"></article>
<article data-sly-resource="${'resource' @ prependPath='my/path'}"></article>
<article data-sly-resource="${'my/path' @ appendPath='resource'}"></article>​

Hope that helps!

Regards,

Santosh