Hi everyone,
I’m facing an issue with one of our Content Fragment Models in AEM where a few text fields were intentionally disabled using disabled=true and renderReadOnly=false at the field node level under /conf/<project>/settings/dam/cfm/models/<model-name>/jcr:content/model/cq:dialog/content/items/textfield. In the old Content Fragment Editor (Granite UI), these fields appear correctly disabled and are not editable, but after moving to the new Content Fragment Editor (which is React-based and built on Adobe React Spectrum), the same fields appear editable and authors are able to modify them. It seems the new editor doesn’t respect the traditional disabled or renderReadOnly properties that used to work in the old UI. Could someone please guide me on how to make these fields appear disabled or read-only in the new React Spectrum–based Content Fragment Editor? Any official documentation or best practice would be really helpful.
Thanks,
Abhishek A.
Solved! Go to Solution.
Views
Replies
Total Likes
Hello @AbhishekAb4
You can write a custom AEM CF Editor extension using the UIX SDK :
https://developer.adobe.com/uix/docs/services/aem-cf-editor/api/field-properties/
Within your extension, you can programmatically mark fields as disabled or readOnly, typically by field name.
You can also use the getContentFragment API to fetch the content fragment’s model and data, and then decide which fields to disable
https://developer.adobe.com/uix/docs/services/aem-cf-editor/api/commons/#get-content-fragment
Views
Replies
Total Likes
There is no OOTB solution in AEM to persist or enforce a disabled state for Content Fragment Model fields in the new editor. The architectural shift from Granite UI dialogs to React Spectrum components means the new editor relies on different mechanisms for field configuration and doesn't read the traditional disabled or renderReadOnly properties from the model's dialog structure.
My recommended approach is to try creating a custom field implementation using Adobe's UI extensibility framework. This involves:
Building a custom field component using Adobe React Spectrum that controls editability through the component's own logic
Registering the custom field through AEM's extension capabilities using Adobe App Builder or Adobe Runtime
Implementing read-only behavior directly in your React component by controlling the field's disabled state programmatically
Here are some references to look into:
Views
Replies
Total Likes
Hello @AbhishekAb4
You can write a custom AEM CF Editor extension using the UIX SDK :
https://developer.adobe.com/uix/docs/services/aem-cf-editor/api/field-properties/
Within your extension, you can programmatically mark fields as disabled or readOnly, typically by field name.
You can also use the getContentFragment API to fetch the content fragment’s model and data, and then decide which fields to disable
https://developer.adobe.com/uix/docs/services/aem-cf-editor/api/commons/#get-content-fragment
Views
Replies
Total Likes
Hello @muskaanchandwani ,
Thank you, that really helped!
If the requirement is only to make fields readOnly, you can avoid creating the custom AEM CF Editor extension for the new CF Editor
The new CF editor supports UI Schema rules based on JSON Forms schema https://jsonforms.io/docs/uischema/rules
So you can add in the CF Model definition some rules to disable or hide some fields from the UI
Unfortunately, in the old CF Model editor, there is no UI to edit these UI Schema rules, but you can do it with the recently released new Content Model Admin UI (only for new models).
For old CF models, you have the option to add UI Schema rules by using Content Fragment API , see createOrUpdateUISchema method
Views
Replies
Total Likes
Views
Likes
Replies