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

How to change parsys text "Drag components here"?

Avatar

Level 2

Hi,

 

We have a requirement,in AEM 6.2, wherein we have to change the parsys placeholde text from"Drag components here" to some custom text like " Drag list component here" etc.

The parsys is placed inside other components.

Code snippet of the component.
        <div class="container">
              <div class="div-table" id='datafeedparsys' data-sly-resource="${'./feedparsys' @resourceType='wcm/foundation/components/parsys'}" data-sly-unwrap></div>
        </div>

We want to customize this parsys text.

We have already tried the following approaches, but they didn't work as expected.

1. With this approach, we were able to change the text, but the parsys position gets fixed and it starts overlapping.

http://aemtricks.blogspot.com/2016/01/customizing-default-parsys-text-of-aem.html

2. With this approach, the parsys stops behaving like parsys with the changed text.

http://stackoverflow.com/questions/25037171/setting-emptytext-on-a-parsys-from-sightly-aem6

1 Accepted Solution

Avatar

Correct answer by
Level 2

I also faced a similar issue and after finding no suitable answers anywhere, decided to do my own solution and wrote a detailed blog entry explaining the steps.

You can find all the relevant details here: -

https://scribcopia.wordpress.com/2017/08/13/customizing-text-within-parsys-touch-ui/

Happy AEMing !!

View solution in original post

9 Replies

Avatar

Level 10

Not sure about the approaches you mentioned but this is something I used and works fine

HTML

<p data-emptytext="[Header Teaser (Updated): Please enter the appropriate values]" class="cq-placeholder" ></p>

Output

Avatar

Level 2

edubey wrote...

Not sure about the approaches you mentioned but this is something I used and works fine

HTML

  1. <p data-emptytext="[Header Teaser (Updated): Please enter the appropriate values]" class="cq-placeholder" ></p>

Output

 

 


this changes the component's placeholder text, our requirement is to change the parsys placeholder text.

Avatar

Level 10

Why is changing this  text a requirement? What benefit is there? 

Look here: https://forums.adobe.com/thread/982208

Avatar

Level 2

The post at the link seems to be irrelevant with AEM 6.2 and sightly in place.
Our requirement is to have parsys inside multiple components. So, to avoid any confusion for the author, the text change is required.

Avatar

Correct answer by
Level 2

I also faced a similar issue and after finding no suitable answers anywhere, decided to do my own solution and wrote a detailed blog entry explaining the steps.

You can find all the relevant details here: -

https://scribcopia.wordpress.com/2017/08/13/customizing-text-within-parsys-touch-ui/

Happy AEMing !!

Avatar

Level 2

Hi, I've implemented a similar solution here: Enigmatic parsys and ComplexComponent.java · reggie7/aem-tools Wiki · GitHub since some time ago I was facing the same issue adobe - How do I change parsys drop area text in AEM 6.3's Touch UI? - Stack Overflow​​. My approach is using the same point of entry as nikhilsinghal​ 's article describes, but I've additionally merged it with something else I had before for classic UI. Anyway I'm still hoping such a feature would eventually make it to the AEM OOTB: A nice way to customize "Drag components here"? ...

Avatar

Level 2

Hi Team,

The link is not working. Can you please update ?

/S