Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

Extending ResponsiveGrid with Custom Properties using React and AEM SPA Architecture | AEM 6.5.5

Avatar

Level 1

I have read through the related posts (original post that I'm making this in response to) showing me how to extend the ResponsiveGrid in React.

However, I have yet to see any solution that can actually add custom properties to an extended ResponsiveGrid Sling model.

 

This example repo by godanny86 with an extended ResponsiveGrid shows how to make it custom, but it doesn't show how to add properties to the Sling model.

There have been other posts this mentioning this solution, such as this post, this other post, and finally this post, but none of them ever show how or if it's possible to add custom properties to the extended model.

Some posts like this hinted at the possibility, but I have failed to get it working when I tried the suggested solution on my own. When I have tried implementing the delegation pattern for a custom ResponsiveGrid Sling model, I can't properly implement the interface ResponsiveGridExporter because the deprecated method getAllowedComponents doesn't have reference to the return type any longer. Code_t6bKHcemnB.png
When I tried extending the ResponsiveGrid class itself, it still didn't properly persist the new fields/model values.

 

I am sure this behavior exists, but I have just been unable to implement the pattern of adding custom properties to an extended model so far.
Does anybody have a working example that adds custom properties to an extended ReponsiveGrid custom component and persists them to React? Or, does anyone know who I contact about the Java com.adobe.cq package problems?

3 Replies

Avatar

Employee Advisor

I haven't tried it myself but I guess with delegation pattern also you can just override the getExportedAllowedComponents as getAllowedComponents is deprecated. 

Javadoc-

https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/javadoc/co... 

 

Here is an example of extending the model using delegation pattern - https://levelup.gitconnected.com/aem-extend-core-component-models-using-resource-type-association-an... 

Avatar

Level 1

That Level Up article using the Lombok delegation annotation looks really neat, unfortunately, even it throws the error about the return type not being found when it compiles it.

 

"Lombok annotation handler class lombok.javac.handlers.HandleDelegate failed on C:\...DtcComponent.java: com.sun.tools.javac.code.Symbol$CompletionFailure: class file for com.day.cq.wcm.foundation.model.impl.export.AllowedComponentsExporter not found."

 

But yea, simply overriding the getAllowedComponents and marking it as deprecated will simply make the compiler complain that the return type doesn't exist (package com.day.cq.wcm.foundation.model.impl.export does not exist), meaning your suggestions don't work.

 

Is there anything else I can try?

Avatar

Level 2

Hi Sean

Did you ever manage to get it done? If yes, please share how.

 

Sneh