How do I change parsys drop area text in AEM 6.3's Touch UI?

Question

I had a project in AEM 6.1's Classic UI where I was able to override the default Drag components or assets here label to a custom one simply like that:

1. I've created a custom parsys component. Let's name it custom/parsys I've used sling:resourceSuperType to point to foundation/components/parsys.
2. I've created custom/parsys/new respectively.

3. I've overriden the new.jsp by adding these lines:

   String emptyText = currentStyle.get("cq:emptyText", ""); if (StringUtils.isNotBlank(emptyText)) { editConfig.setEmpty(true); editConfig.setEmptyText(emptyText); }

Now I was able to easily customize each parsys' drop area label by setting it via /etc/designs/custom structures. So every parsys was basically explicitely telling the author what kind of components it accepted. Apart from the traditional components' availability inside parsys this added a great value for the editors to work with a complex structure of a page with many different paragraphs, often nested one in another.

Now I'm working in AEM 6.3 with Touch UI and a lot has changed in a way that does not allow me to simply port the above solution. Googling the issue did not help unfortunately, 6.3 is quite fresh, there are solutions for older versions of wcm/foundation/components/parsys and/or foundation/components/parsys, but not for the latest one. Has anyone worked this one out already?

---

UPDATE: I've created a sample project with the Classic UI solution. So here we have the new.jsp and corresponding configuration under designs. When built and deployed to AEM 6.3 it can be checked under /content/enigmatic and produces the desired behaviour:

Answer 1

The above mentioned approaches will not work for Touch UI. Adobe has it hardcoded as "Drag Components Here" in their i18n file for the "new" section.

Alternative Solution: -

• Find a way to overlay parsys.
• Using selectors approach, modify its interaction with the Inspectable.js, where you can supply new component specific messages while including parsys, may be by using selectors For e.g.

<sly data-sly-resource="${@path='par1',resourceType='mysite/components/parsys',selectors='par-1'}"/>

• Append the added selectors to the "new" section's classes within parsys.html, using

${request.requestPathInfo.selectors[0]}

• Now, in the Inspectable JS you can do something like this, around line 102.

if (this.dom.hasClass("par-1")) {
  return "Customized Text for Par 1";
}
if (this.dom.hasClass("par-2")) {
  return "Customized Text for Par 2";
}
// New component placeholder
if (this.dom.hasClass(newComponentClass)) {
  return newComponentPlaceholderText;
}

For more details, refer:- Detailed Help text Customization For parsys in Touch UI

Answer 2

AEM Parsys populates the Parsys drop text with CSS utilizing the data-text property on the placeholder element as you can see outlined in blue:

These are the default placeholder styles (of which we will override the content property with additional/custom CSS for our parsys component):

This is the custom/additional editor CSS on our component:

This is the result:

P.S. : It is better to work with the data-path attribute for styling instead of the data-text attribute:

div[data-path='/content/aemarch13/home/jcr:content/NavbarNav/*']:before {
   content: 'Drop it here.'
}

Good Luck...