Dynamically creating Orgchart

[felipediazsilva]

Hi there team!

I'm trying to build an org-chart component like the following example:

It needs to allow dynamic insertion of child nodes and multiple levels. I first tried using a composite/nested multifield with a fixed scope, which works as expected. However, when trying to add dynamic logic, the component breaks. I also tried using a recursive approach and a node component recursively, but I could not get the dialog to work (like a carousel). I tried using a Java model and servlet to expose a JSON based on a dam folder. using content fragments, but I'm not getting the desired structure.

Has anyone done/seen this before? I would appreciate any guidance. Thank you!

[EstebanBustamante · Accepted solution]

Hi, 

I would suggest breaking this down into components that represent different parts of the structure—such as parent component and child components. Then, use Java to assemble a final representation of what you're aiming to achieve for the frontend. While the multifield approach is simpler from a dialog perspective, it can quickly become cumbersome and messy. This would follow the author experience of components such as the carousel or tabs from the core components. You can check how those work to give you a clear idea:

https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/wcm-components/t... 

https://aemlab.blogspot.com/2022/09/aemaacs-core-components-children-editor.html 

Hope this helps!

[felipediazsilva]

Gracias Esteban!

I extended the tabs component and made a few changes. Then, I created a servlet to expose the variables of the org chart node as JSON. For the front, I used conditional logic to keep the tabs design in author mode and hide everything in publish mode and handle the renderization of the org chart via custom clientlibs.

Thank you for your recommendation!