Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

How to change parsys text "Drag components here"?

Shalini_Gupta
Level 2
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
nikhilsinghal
Correct answer by
Level 2
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
edubey
Level 10
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

Shalini_Gupta
Level 2
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.

smacdonald2008
Level 10
Level 10

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

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

Shalini_Gupta
Level 2
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.

nikhilsinghal
Correct answer by
Level 2
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

reggie_7
Level 2
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"? ...

selva_billa
Level 2
Level 2

Hi Team,

The link is not working. Can you please update ?

/S