Content Fragment Model - Make few options in dropdown Readonly for Specific users

[PoovithaSelvaraj]

Hi ,

We have requirement to have few content fragment dropdown values fully available for few users, for remaining users, few options need to be read only and few options can be available for them to edit. 

Is there any way to achieve this ?

We are currently using render condition privilege to display or not display the options  but we need to show read only to the user. 

Any suggestions would be really helpful.

Thanks,

Poovitha S

[Tethich · Accepted solution]

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:

• https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/custom-validation-for-dial...
• https://satyamblogs.medium.com/custom-multifield-validation-in-aem-18dbdd3e941f

[PoovithaSelvaraj]

Thanks @Tethich  for this insight. 

Regards,

Poovitha S