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

How to make the textfield readonly in Touch UI

Avatar

Avatar
Validate 25
Level 5
dragon2A
Level 5

Likes

50 likes

Total Posts

140 posts

Correct Reply

13 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Ignite 5
Ignite 3
View profile

Avatar
Validate 25
Level 5
dragon2A
Level 5

Likes

50 likes

Total Posts

140 posts

Correct Reply

13 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Ignite 5
Ignite 3
View profile
dragon2A
Level 5

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)

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,198 likes

Total Posts

6,375 posts

Correct Reply

1,147 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,198 likes

Total Posts

6,375 posts

Correct Reply

1,147 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

07-06-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.

Answers (5)

Answers (5)

Avatar

Avatar
Establish
MVP
Ravi_Pampana
MVP

Likes

192 likes

Total Posts

243 posts

Correct Reply

75 solutions
Top badges earned
Establish
Contributor
Shape 1
Ignite 5
Ignite 3
View profile

Avatar
Establish
MVP
Ravi_Pampana
MVP

Likes

192 likes

Total Posts

243 posts

Correct Reply

75 solutions
Top badges earned
Establish
Contributor
Shape 1
Ignite 5
Ignite 3
View profile
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"/>

Avatar

Avatar
Boost 1
Level 1
LuoanaKoble
Level 1

Likes

2 likes

Total Posts

2 posts

Correct Reply

1 solution
Top badges earned
Boost 1
Affirm 1
View profile

Avatar
Boost 1
Level 1
LuoanaKoble
Level 1

Likes

2 likes

Total Posts

2 posts

Correct Reply

1 solution
Top badges earned
Boost 1
Affirm 1
View profile
LuoanaKoble
Level 1

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.

 

 

Avatar

Avatar
Boost 1
Level 1
indrasish_b
Level 1

Like

1 like

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
View profile

Avatar
Boost 1
Level 1
indrasish_b
Level 1

Like

1 like

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
View profile
indrasish_b
Level 1

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.

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

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?

Avatar

Avatar
Validate 25
Level 5
dragon2A
Level 5

Likes

50 likes

Total Posts

140 posts

Correct Reply

13 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Ignite 5
Ignite 3
View profile

Avatar
Validate 25
Level 5
dragon2A
Level 5

Likes

50 likes

Total Posts

140 posts

Correct Reply

13 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Ignite 5
Ignite 3
View profile
dragon2A
Level 5

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?