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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

How to make the textfield readonly in Touch UI

Avatar

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

Avatar

Correct answer by
Administrator

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

Avatar

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?

Avatar

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?

Avatar

Correct answer by
Administrator

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.

Avatar

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.

Avatar

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"/>

Avatar

Level 2

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.