Extending Drag-and-Drop Fields in AEM Metadata Schemas

[ac4320]

In the Metadata Schema Editor, the Build Form section provides a set of predefined drag-and-drop components. I wanted to check whether it’s possible to introduce a custom field type—for example, a link field—and define custom rules or behavior for it. If this is supported, what would be the recommended approach to implement it?

[DPrakashRaj]

you need to overlay /libs/dam/gui/coral/components/admin/schemaforms/formbuilder/v2/builditems.jsp in your apps folder and create a new custom field in the /apps folder to be included in the overlayed jsp

[ac4320]

Thanks! Can you provide any reference links/example wherein this has been implemented. It would also help if you could create some dummy field to demonstrate.

[DPrakashRaj]

Please refer to this and do the customization as per your need.

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-forms/aem-forms-metadata-s....

[HrishikeshKagne]

Hi @ac4320 ,

Here's the approach:

Create a custom component - Build your custom field component (like your link field) under /apps/dam/gui/coral/components/admin/customsearch/searchpredicates/ or a similar path
Define the component structure - Create the necessary files:

Component dialog (.content.xml)
Rendering script (HTL/JSP)
Client library for any custom JavaScript/CSS behavior

Register it in the Schema Editor - Add your custom component to the list of available fields by overlaying /libs/dam/gui/content/metadataschemaeditor/formbuilder and including your component in the allowed types
Implement custom logic - In your component, define:

How the field renders in the metadata editor
Validation rules
Save/retrieve behavior
Any custom JavaScript for interactions

If you just need a text field with link validation, you can extend the existing Single Line Text field and add custom validators through clientlibs rather than building from scratch.
The key is that your custom component needs to follow the Granite UI component structure and implement the proper interfaces for metadata field behavior.

[arunpatidar]

Hi @ac4320 

You can also use granite type , however granite type are not available by drag and drop. You need to add those type similar to dialog.

You can also also clientlibs within form for validation.

e.g.

<clientlibs
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/includeclientlibs"
                            categories="myproj.dam.metadataeditor.linkcheck"/>

[ac4320 · Accepted solution]

I've implemented the same and documented it over here : https://medium.com/@arindamc65.ac/beyond-defaults-creating-custom-fields-in-aem-metadata-schemas-988...