How to make the textfield readonly in Touch UI

dragon2A

05-06-2017

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.

Accepted Solutions (1)

Accepted Solutions (1)

Answers (5)

Answers (5)

Ravi_Pampana

MVP

05-02-2018

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

12-06-2020

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.

 

 

indrasish_b

05-02-2018

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.

smacdonald2008

06-06-2017

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?

dragon2A

06-06-2017

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?