How to make the textfield readonly in Touch UI | Community
Skip to main content
D
dragon2A
Level 5
June 5, 2017
Solved

How to make the textfield readonly in Touch UI

  • June 5, 2017
  • 6 replies
  • 16130 views

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.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by kautuk_sahni

    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.

    6 replies

    D
    dragon2AAuthor
    Level 5
    June 6, 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?

      smacdonald2008
      smacdonald2008
      Level 10
      June 7, 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?

        RickSnac
        RickSnac
        Level 2
        October 4, 2024

        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
        Community Manager
        kautuk_sahniCommunity ManagerAccepted solution
        Community Manager
        June 7, 2017

        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.

        Kautuk Sahni
          indrasish_b
          indrasish_b
          February 5, 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.

            Ravi_Pampana
            Community Advisor
            Ravi_PampanaCommunity Advisor
            Community Advisor
            February 6, 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"/>

              L
              LuoanaKoble
              Level 2
              June 12, 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.

               

               

                RickSnac
                RickSnac
                Level 2
                October 4, 2024

                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); });

                 

                 

                Terms & ConditionsAccessibility statement

                Loading footer...