How to make the textfield readonly in Touch UI

[dragon2A]

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.

[dragon2A]

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]

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?

[RickSnac]

I think I have a good use case for this. Client want's to fetch youtube data by video id so their content managers don't have to add the same content twice. Data should not be editable to prevent Google duplicates.

[kautuk_sahni · Accepted solution]

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.

[indrasish_b]

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]

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]

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.

[kautuk_sahni]

Well written reply.

[RickSnac]

I added a timeout (500ms) before the form submit, because my form was submitted while the disabled-attributes were not fully removed. 

    $(document).on("click", ".cq-dialog-submit", function (e) {
        e.preventDefault();

        const form = $(e.target).closest("form.cq-dialog");
        const items = $(e.target).closest(".cq-dialog").find(".disabledField");
        items.removeAttr("disabled");

        setTimeout(function () {
            form.submit();
        }, 500);
    });