How to dynamically create a parsys inside div via JavaScript (TouchUI / 6.4) | Community
Skip to main content
chadw83079463
chadw83079463
New Participant
May 31, 2018
Solved

How to dynamically create a parsys inside div via JavaScript (TouchUI / 6.4)

  • May 31, 2018
  • 3 replies
  • 1394 views

In AEM 6.4 TouchUI environment, I am trying to create components where custom JavaScript will execute, create a <div> element inside the component, and then add a parsys to that created <div>.

For example, I author a CustomContainer component on the page, and refresh. I have custom JavaScript code that executes on page load that checks for CustomContainer component, and builds a DOM tree inside the component. Somewhere in that DOM tree exists a <div> that needs to have a parsys available where I can drag further components.

Ideally I am looking for an existing JavaScript function like CQ.WCM.addParsys( containerElement )

I have simplified my actual use case a bit to clarify what I am trying to accomplish. It is related to building components using a custom front end framework similar to Vue/Angular/React. I also understand there may be issues with how the page structure exists in JCR; hopefully I can solve for those issues somehow once the first problem is solved.

I have found this site with documentation (CQ5 | Widgets API ) but it looks like there's a lot of information to go through there and it may take days or weeks to find what I need, if it's in there at all.


Can anybody provide information on how to achieve this? Thanks in advance.

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 joerghoh

A parsys is a AEM component, and it has little to nothing to do with the DOM in the browser. In the DOM there is no "parsys" component.

Also I don't really understand the approach you use. When you want to have a parsys component in the page, you should place on the page. The rendering of that parsys  could be customized though, so you frontend can read it from the page (and display it according to your custom logic).

Jörg

3 replies

smacdonald2008
smacdonald2008
New Participant
June 4, 2018

100% agree with Joerg - there is no need to place a parsy on a page or container component -  like a GRID -  using an API. Place it within the component when developing the component.

smacdonald2008
smacdonald2008
New Participant
June 4, 2018

The reference docs you referenced are for Classic UI and should not be used if you want to use Touch UI - which is based on the Granite API. See Welcome to Granite UI’s documentation! — Granite UI 1.0 documentation when using Touch UI.

joerghoh
joerghohAccepted solution
Employee
June 3, 2018

A parsys is a AEM component, and it has little to nothing to do with the DOM in the browser. In the DOM there is no "parsys" component.

Also I don't really understand the approach you use. When you want to have a parsys component in the page, you should place on the page. The rendering of that parsys  could be customized though, so you frontend can read it from the page (and display it according to your custom logic).

Jörg

Terms & ConditionsAccessibility statement

Loading footer...