Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

How to add a path field to Asset Metadata


Level 1

Hi All,

I am trying to add a Path Browser to a custom tab for asset metadata. I have followed the documentation and created a custom schema. But the options in the build form section are limited as shown below


We have a requirement where we have to link existing dam assets to pages/third party websites. This was possible in the classic UI as a metadata property. How can we extend this to the new Coral UI?



1 Reply


Level 1

No worries. I just managed to find the solution. The following configuration needs to be overlayed and updated


Update buildforms.jsp

Update form fields folder - Create a new folder (in my case pathfield)

Create  a new jsp pathfield.jsp  and link it to the pathbrowser widget

Here is my path browser code

<div class="formbuilder-content-form">

    <label class="fieldtype"><i class="coral-Icon coral-Icon--sizeXS coral-Icon--text"></i><%= i18n.get("Path Browser") %></label>

    <sling:include resource="<%= resource %>" resourceType="granite/ui/components/foundation/form/pathbrowser"/>


<div class="formbuilder-content-properties">

    <input type="hidden" name="./items/<%= key %>">

    <input type="hidden" name="./items/<%= key %>/jcr:primaryType" value="nt:unstructured">

    <input type="hidden" name="./items/<%= key %>/sling:resourceType" value="granite/ui/components/coral/foundation/form/pathbrowser">

    <input type="hidden" name="./items/<%= key %>/granite:data/metaType" value="path">

    <input type="hidden" name="./items/<%= key %>/renderReadOnly" value="true">


        String resourcePathBase = "dam/gui/coral/components/admin/schemaforms/formbuilder/formfieldproperties/";

        String[] settingsList = {"labelfields", "metadatamappertextfield", "placeholderfields", "requiredfields", "disableineditmodefields", "showemptyfieldinreadonly", "titlefields"};

        for(String settingComponent : settingsList){


            <sling:include resource="<%= resource %>" resourceType="<%= resourcePathBase + settingComponent %>"/>




    <i class="delete-field coral-Icon coral-Icon--delete coral-Icon--sizeL" href="" data-target-id="<%= key %>" data-target="./items/<%= key %>@Delete"></i>