How to change parsys text "Drag components here"? | Community
Skip to main content
S
ShaliniGu2
New Participant
April 18, 2017
Solved

How to change parsys text "Drag components here"?

  • April 18, 2017
  • 9 replies
  • 8543 views

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

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by nikhilsinghal

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

    9 replies

    selva_billa
    selva_billa
    New Participant
    November 14, 2018

    Hi Team,

    The link is not working. Can you please update ?

    /S

    reggie_7
    reggie_7
    New Participant
    October 10, 2017

    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"? ...

    S
    ShaliniGu2Author
    New Participant
    August 15, 2017

    Thanks nikhilsinghal​

    This solved the problem

    smacdonald2008
    smacdonald2008
    New Participant
    August 14, 2017

    Really nice community content!!!

      nikhilsinghal
      nikhilsinghalAccepted solution
      New Participant
      August 13, 2017

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

        S
        ShaliniGu2Author
        New Participant
        April 19, 2017

        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.

          smacdonald2008
          smacdonald2008
          New Participant
          April 18, 2017

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

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

          S
          ShaliniGu2Author
          New Participant
          April 18, 2017

          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.

          edubey
          edubey
          New Participant
          April 18, 2017

          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

            Terms & ConditionsAccessibility statement

            Loading footer...