Hi @poovithaselvaraj
I imagine you could create a custom validator.
So your field would be defined something like:
<my-select
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
granite:id="my-select-id"
fieldLabel="My Select Label"
multiple="{Boolean}false"
name="selection"
required="{Boolean}true"
validation="my-select-validator" />
</my-select> As you see, I added the validation property, with a key for the selector my-select-validator, which later will be used in js.
You will the need to create a custom clientlib, with category let's say named "project.my-select-validator", which you need to include in your component/cf definition:
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="My Component"
width="33vw"
height="50vh"
extraClientlibs="[project.my-select-validator]"
sling:resourceType="cq/gui/components/authoring/dialog">
...
</jcr:root>
And the in your client lib js you can grab the select field and work with it:
$(window).adaptTo("foundation-registry").register("foundation.validation.validator", {
selector: "[data-validation=my-select-validator]",
validate: function(el) {
var element = $(el);
// your logic to make field read-only or available based on user permissions goes here
return;
}
});
You can take some more inspiration from these resources also: