Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Using Granite condition to make the field read-only

test1234567
Level 2
Level 2

Hello All - I have a use-case to make the checkbox readonly in a dialog based on sling:resourceType using granite:RenderCondition. Can someone advise on this?

1 Accepted Solution
Anudeep_Garnepudi
Correct answer by
Community Advisor
Community Advisor

@test1234567 

As @kunal23  said granite:renderCondition is server side implementation. Only if the condition satisfies the field will be rendered on to the dialog. The name renderCondition say it all, based on condition field will be rendered. Use below listener to disable the checkbox.

(function ($, $document, Ga) {

    $document.on("dialog-ready", function() {
		let checkbox = $("coral-checkbox[name='./checkbox']");
        if (window.location.pathname.indexOf("/content/test/") >= 0) { //your condition
			checkbox[0].disabled = true;
        }
    });

})(jQuery, jQuery(document), Granite.author);

- AG

View solution in original post

4 Replies
kunal23
Level 10
Level 10

You can hide a check box using a render condition and not make it read only. Render conditions are evaluated server side by Granite UI framework to show or hide a UI component. 

You can write a custom render condition to hide the checkbox based on the resource type. For more details see the following blog- http://www.nateyolles.com/blog/2016/07/aem-granite-custom-render-conditions 

test1234567
Level 2
Level 2
@kunal - I am able to show / hide the option based on the path. is there any way to make it read-only based on a path instead of hiding the section.
kunal23
Level 10
Level 10

Instead of using granite render condition you can write custom JS code to make the checkbox read only.

 

Example - var checkbox= $("[name='./hideInNav']").adaptTo("foundation-field"); checkbox.setDisabled(true);

Anudeep_Garnepudi
Correct answer by
Community Advisor
Community Advisor

@test1234567 

As @kunal23  said granite:renderCondition is server side implementation. Only if the condition satisfies the field will be rendered on to the dialog. The name renderCondition say it all, based on condition field will be rendered. Use below listener to disable the checkbox.

(function ($, $document, Ga) {

    $document.on("dialog-ready", function() {
		let checkbox = $("coral-checkbox[name='./checkbox']");
        if (window.location.pathname.indexOf("/content/test/") >= 0) { //your condition
			checkbox[0].disabled = true;
        }
    });

})(jQuery, jQuery(document), Granite.author);

- AG

View solution in original post