How to change parsys text "Drag components here"? | Community
Skip to main content
ShaliniGu2
Level 2
Apr 18, 2017 8:48 AM UTC
Solved

How to change parsys text "Drag components here"?

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.
    nikhilsinghal
    nikhilsinghalAccepted solution
    Level 2
    Aug 13, 2017 8:12 PM UTC

    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 reply

    9 replies

    selva_billa
    selva_billa
    Level 2
    Nov 14, 2018 8:05 AM UTC

    Hi Team,

    The link is not working. Can you please update ?

    /S

    Translate
    reggie_7
    reggie_7
    Level 2
    Oct 10, 2017 12:02 PM UTC

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

    Translate
    ShaliniGu2Author
    Level 2
    Aug 15, 2017 9:36 AM UTC

    Thanks nikhilsinghal​

    This solved the problem

    Translate
    smacdonald2008
    smacdonald2008
    Level 10
    Aug 14, 2017 4:58 PM UTC

    Really nice community content!!!

    Translate
      nikhilsinghal
      nikhilsinghalAccepted solution
      Level 2
      Aug 13, 2017 8:12 PM UTC

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

      Translate
        ShaliniGu2Author
        Level 2
        Apr 19, 2017 4:23 AM UTC

        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.

        Translate
          smacdonald2008
          smacdonald2008
          Level 10
          Apr 18, 2017 5:46 PM UTC

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

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

          Translate
          ShaliniGu2Author
          Level 2
          Apr 18, 2017 9:19 AM UTC

          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.

          Translate
          edubey
          edubey
          Level 10
          Apr 18, 2017 9:08 AM UTC

          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

          Translate
            Terms & ConditionsAccessibility statement

            Loading footer...