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

How to make the textfield readonly in Touch UI

dragon2A
Level 6
Level 6

I would like to make the text field read-only in Granite UI.  I used disabled but this option is not saving the values in the repository after the dialog submission.

In classical UI I am using the readonly="true" I am looking for the similar option. Any suggestions on this?

Thanks In Advance.

1 Accepted Solution
kautuk_sahni
Correct answer by
Community Manager
Community Manager

Is your case similar to this "in cq dialog, disable textfield when checkbox is not ticked - Stack Overflow"?

If not, why not make Text-field a label? What is the need of Read only Text-field?

You can also disable the Text-field.

View solution in original post

7 Replies
dragon2A
Level 6
Level 6

I can be able to use the renderReadOnly property but it just displaying 2 times the same one with the read-only and one with the editable option. How can I avoid displaying the editable control on the dialog? Any ideas on this?

smacdonald2008
Level 10
Level 10

This data type is typically used in a dialog of a component that lets an author enter information. If you want it  read only - you are using it somewhere else. What is your use case to make it read only?

kautuk_sahni
Correct answer by
Community Manager
Community Manager

Is your case similar to this "in cq dialog, disable textfield when checkbox is not ticked - Stack Overflow"?

If not, why not make Text-field a label? What is the need of Read only Text-field?

You can also disable the Text-field.

View solution in original post

indrasish_b
Level 1
Level 1

This is valid and required sometimes. For example I am trying to fetch the image path and show it in the touch ui dialog of image component. Now if I use label or something else, the property value i.e "fileReference" won't get updated or be saved in the node. Only when I use some input field and assign it "fileReference" , I can see the value of that property and that property can be updated. But I want my users not to manually edit the image path so I need the text field to be readonly which is not possible to do. Please suggest a workaround.

Ravi_Pampana
Community Advisor
Community Advisor

I used below property in AEM 6.2 for textfield in touch ui to make it read only (non editable) in dialog

disabled="{Boolean}true"

<textfield

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/form/textfield"

                                required="true"

                                fieldLabel="Text Field

                                disabled="{Boolean}true"

                                name="./textfield"/>

LuoanaKoble
Level 1
Level 1

Hi @dragon2A ,

I know my answer is "too little too late", but maybe it will help you or others in the future, for similar situations.

This is the solution that I came up with:

- I used a disabled (not readonly) textfield inside the multifield

- I added a class on that field, to be able to target it easily from js

granite:class="disabledField"

- I wrote a super small client lib that removes the disabled attribute just before closing the dialog:

$(document).on("click", ".cq-dialog-submit", function (e) {
var items = $(e.target).closest(".cq-dialog").find(".disabledField");
items.removeAttr("disabled");
});

 

Another option that I found was to use a hidden field instead of a textfield, but then the authors can't see what is the value that is being used.