Dynamically creating Orgchart

Question

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 Answer

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/tabs#edit-dialog

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

Hope this helps!