search

Adobe-Marketing-Cloud / aem-guides-wknd-events

Step by Step guide to creating a Single Page Application to use with AEM
48 stars 34 forks source link

Nested React component #66

Closed psaksena closed 4 years ago

psaksena commented 4 years ago

Local Environment Before filing an issue, verify that the prerequisite tools/software are installed:

Describe the issue Is there a way we can drag drop a custom react component within another custom react component.

eg: I have a React header component. I need to drag drop another React link component within it.

godanny86 commented 4 years ago

Hi @psaksena this isn't a use case that is really supported. An approach that you could try would be to extend the Layout Container component to act as your "header" component, which would give you a dropzone to add additional components. You could then re-arrange them using the responsive grid, but this might be difficult to author...

friendlymahi commented 4 years ago

Hi @godanny86 -Have seen your responses in different issues related to spa editor. Thanks for all the inputs and insights. I would like to apologize in advance if this is too long. I thought its not fair to open a new issue for a topic thats not active.

The ask in this issue/use case seems to be a fair one to consider for enhancement. Let me share the usecase I have. We are using custom APIs (built before Adobe Content Services were fully active), to support our single page apps. Now we are doing a POC to determine the effort to move to SPA editor and make it user friendly. We have 2 common components that are kind of spread across, and we are not using Editable Templates or Responsive Grid yet because there are too many websites that will have to undergo a migration process or re-authoring. So one after another I tried to fill in the gaps and 2 scenarios I am really stuck.

  1. Custom Layout component e.g a column control or a custom grid which generates the child parsys component for each column or section, instead of the new responsivegrid
  2. Ability to show the non-existing components via SPA Editor.

Both of these are related. When using the same components using non SPA Editor usecase and especially without Editable templates, the HTL code we write to include sling:resourceType generates the parsys component for authors even though it physically doesn't exist in CRX. And eventually once the user authors them, they shall show up in CRX/JCR as well. However the challenge with SPA Editor is, we cant use HTL, and Sling Model Exporter doesn't generate the empty model for non-existing component and hence the SPA SDK doesn't render the equivalent component. So what do you suggest in this case. Components like these are widespread and re-doing them again in future may really question the need for urgency if we are not there yet.

The other part is, relevant documentation. In the accordion requirement, we need to first generate tab names, expand and collapse text, and then individual parsys components under the respective tabs. Even here the API documentation doesn't really offer good examples of what else we can do beyond MapTo and ModelManager operations. npm website describes the theory well but really unsure what works and where they apply. In this case, what I had to do was, before rendering the childComponents, I created a new array where I inserted the wrapped components that contains the tab name and the corresponding parsys.

Both the use cases, irrespective of whether or not we use responsivegrid and editable templates, are common use cases.

Please share your response, so I can continue the conversation here or open a new issue. Appreciate your valuable time and support in advance.

Thank you !