Is it possible to customize the content fragment input UI in AEM?

[spidey1405]

Hi Team, I would want to customize a JSON editor to a custom UI input component. I want to have a custom UI to facilitate adding json data (in form of tables). I have written the same component in React and wanted to know if we can actually customize or extend JSON editor UI to improve user experience?

Above is the screenshot what I want to show to the content authors to input JSON data.

Current JSON input of AEM looks like this:

Updating Media

[SantoshSai]

Hi @spidey1405 ,

Yes that it possible by implementing/registering widget through Javascript/Jsp Script. One good example you may have a look at here: https://www.youtube.com/watch?v=H_paM5naWpg

Hope that helps!

Regards,

Santosh

[spidey1405]

Hi Santosh, thanks for your response. So the widgets can only be created using jsps right? Also if we want to load this to AEM we need to do `mvn clean install -PautoInstallSinglePackage` right? And would this then automatically appear in my content fragment models? I don't see any details for those.

Additionally when I clone the repository and try to deploy this to my local aem instance, I get this:

```

ERROR] package in.shabhushan.catalog.services
[ERROR] ^
[ERROR] Groovy:Internal groovy compiler error.
[ERROR]
[ERROR] /Users/ssahil1/Downloads/utils/2022/sep/aem-local/aem-local/custom-content-fragment/core/src/main/java/in/shabhushan/catalog/services/impl/SolrCrawlerServiceImpl.groovy:[1,1] 719. ERROR in /Users/ssahil1/Downloads/utils/2022/sep/aem-local/aem-local/custom-content-fragment/core/src/main/java/in/shabhushan/catalog/services/impl/SolrCrawlerServiceImpl.groovy (at line 1)
[ERROR] package in.shabhushan.catalog.services.impl
[ERROR] ^
[ERROR] Groovy:Internal groovy compiler error.
[ERROR]
[ERROR] /Users/ssahil1/Downloads/utils/2022/sep/aem-local/aem-local/custom-content-fragment/core/src/main/java/in/shabhushan/catalog/signin/SignInUtil.groovy:[14,7] 720. ERROR in /Users/ssahil1/Downloads/utils/2022/sep/aem-local/aem-local/custom-content-fragment/core/src/main/java/in/shabhushan/catalog/signin/SignInUtil.groovy (at line 14)
[ERROR] class SignInUtil extends WCMUsePojo{
[ERROR] ^^^^^^^^^^
[ERROR] The hierarchy of the type SignInUtil is inconsistent
[ERROR]
[ERROR] /Users/ssahil1/Downloads/utils/2022/sep/aem-local/aem-local/custom-content-fragment/core/src/main/java/in/shabhushan/catalog/services/SampleConfigurationFactory.groovy:[1,1] 721. ERROR in /Users/ssahil1/Downloads/utils/2022/sep/aem-local/aem-local/custom-content-fragment/core/src/main/java/in/shabhushan/catalog/services/SampleConfigurationFactory.groovy (at line 1)
[ERROR] package in.shabhushan.catalog.services
[ERROR] ^
[ERROR] Groovy:Internal groovy compiler error.
[ERROR]
[ERROR] /Users/ssahil1/Downloads/utils/2022/sep/aem-local/aem-local/custom-content-fragment/core/src/main/java/in/shabhushan/catalog/signin/constants/SigninConstants.groovy:[9,7] 722. ERROR in /Users/ssahil1/Downloads/utils/2022/sep/aem-local/aem-local/custom-content-fragment/core/src/main/java/in/shabhushan/catalog/signin/constants/SigninConstants.groovy (at line 9)
[ERROR] class SigninConstants extends WCMUsePojo {
[ERROR] ^^^^^^^^^^^^^^^
[ERROR] The hierarchy of the type SigninConstants is inconsistent
[ERROR]
[ERROR] Found 722 errors and 0 warnings.
[ERROR] -> [Help 1]
[ERROR]
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoFailureException
[ERROR]

```

I am using AEM 6.5, kindly let me know how can I sort this?