Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Parsys customization issue

Avatar

Level 6

Dear Team,

 

As per project req,we need to customize parsys in order to show custom text.

AEM Version:6.4.0

 

I followed this URL: https://helpx.adobe.com/experience-manager/using/overlay_parsys.html

 

and found working as I am able to display my own custom text.

Custom.jpg

 

 

 

Problem Statement:

 

Once I insert any component into my new customized parsys component e.g title component, I give some title and it displays on Page in edit mode for first time. But when I refresh page either in edit mode or disabled mode,Title component does not get displayed on Page. It is happening with all components.

 

Although I can see content getting stored properly in node under crx.

 

Any help would be really appreciated. Thanks in advance.

 

 

 

1 Accepted Solution

Avatar

Correct answer by
Level 4

Hello @arvind ,

In the example you've mentioned, the components inserted to the custom parsys are not shown due to this condition in sightly - "paragraph.cssClasses".

After removing it from the line 31 of parsys.html, the components are shown:

```<sly data-sly-test="${!paragraph.columns && paragraph.resourceType}" class="cq-placeholder section" data-emptytext="" data-sly-resource="${paragraph.resourcePath @ resourceType=paragraph.resourceType, decorationTagName=''}" />```

Andrei_Dantsou_0-1598340110254.png

Regards

 

View solution in original post

5 Replies

Avatar

Community Advisor

@arvind 

How are you rendering the component Sightly or React ?

Avatar

Correct answer by
Level 4

Hello @arvind ,

In the example you've mentioned, the components inserted to the custom parsys are not shown due to this condition in sightly - "paragraph.cssClasses".

After removing it from the line 31 of parsys.html, the components are shown:

```<sly data-sly-test="${!paragraph.columns && paragraph.resourceType}" class="cq-placeholder section" data-emptytext="" data-sly-resource="${paragraph.resourcePath @ resourceType=paragraph.resourceType, decorationTagName=''}" />```

Andrei_Dantsou_0-1598340110254.png

Regards

 

Avatar

Level 6

@Andrei_Dantsou , Thank you for your reply. It works fine now.

 

But now I see a new problem:

 

once content component is placed inside this customized parsys, It blocks inserted component and not able to edit.

 

Below are two images:

First image is after I insert a component "plain HTML render" and second is after I refresh this page:

 

Before Page Refresh:

before-page-refresh.jpg

 

After Page Refresh:

after-page-refresh.jpg

 

Inserted Code for parsys in component:

<div class="cq-placeholder section" data-emptytext="Custom text"></div>

<sly data-sly-resource="${path @ resourceType='/apps/myproject/components/content/parsys'}"></sly>

 

 

Thank you in advance.