Hi @PrachiAt1 ,
Option 1: Metadata Schema (No Code – Recommended)
If you're using metadata schema editor for asset properties:
Steps:
Go to Tools > Assets > Metadata Schemas.
Edit the schema that applies to your asset type (e.g., "default").
Find the Tag field (usually of type cq/gui/components/coral/common/form/tagfield).
Set the multiple property to false.
Result:
UI will only allow one tag selection.
No custom JS required.
No save-time validation needed—user can’t add more than one.
Option 2: Custom Validation with ClientLibs (For Dialogs)
If you're dealing with custom dialogs (not metadata schema), use client-side validation.
Add these to your component:
1. Dialog XML (cq:dialog):
<tags
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/coral/common/form/tagfield"
name="./tags"
fieldLabel="Tags"
multiple="{Boolean}true"
required="{Boolean}true"
class="validate-single-tag"
/>
2. ClientLib (under /apps/your-project/clientlibs/yourcomponent):
js/validate-tagfield.js:
(function(document, $) {
$(document).on("dialog-ready", function() {
$(".validate-single-tag").each(function() {
var $field = $(this);
var fieldName = $field.attr("name");
$field.closest("form").on("submit", function(e) {
var tags = $field[0].widget.value;
if (tags && tags.length > 1) {
e.preventDefault();
Coral.commons.ready($field[0], function(component) {
component.invalid = true;
component.error = "Only one tag is allowed.";
});
}
});
});
});
})(document, Granite.$);
3. js.txt:
validate-tagfield.js
4. Add this ClientLib to your dialog using extraClientlibs:
<extraClientlibs jcr:primaryType="nt:unstructured"
cq:htmlAttributeProperties="js,css"
js="[yourproject.yourcomponent]"/>
So,
Use Option 1 if you’re editing asset metadata via schema.
Use Option 2 if it’s a custom component dialog with tag fields.
Regards,
Amit
