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

[chadw83079463]

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.

[Jörg_Hoh · Accepted solution]

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

[smacdonald2008]

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.

[smacdonald2008]

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.