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 do we add a newline in the fieldlable of dialog in AEM 6.4

Avatar

Avatar
Validate 1
Level 2
nileshdchavan
Level 2

Likes

10 likes

Total Posts

27 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile

Avatar
Validate 1
Level 2
nileshdchavan
Level 2

Likes

10 likes

Total Posts

27 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile
nileshdchavan
Level 2

26-07-2018

I have a dialog in 5.6. where the field label has newline by the use of <br> tag. Now we have converted this dialog to AEM 6.4 (touch UI), but the <br> to get new line does not seem to be working. Instead the <br> is appearing on the page. I tried with <p/> tag as well. Any idea how do we get new line in fieldlable in AEM 6.4?

Sample example -

<selectPath

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/form/pathbrowser"

                                fieldLabel="Mobile Image <br> Note: saadsfcads "

                               fieldDescription="Some Text In Line One. I want This text in Line Two. This Text in Line Three"

                                rootPath="/content"

                                name="./selectPath"/>

Please suggest. Thank you.

-Nilesh.

Replies

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,279 likes

Total Posts

3,155 posts

Correct Reply

889 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,279 likes

Total Posts

3,155 posts

Correct Reply

889 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

26-07-2018

Hi,

It is not working because fieldDescription property value is getting encoded. If anyhow you've managed to make it work with help of JS and decoded again on dialog load. The tooltip is not going to look good and you need to go for additional changes.

For example, if I put tooltip text in 2 or 3 para or as <br>, then it would not be look good, first part is getting trimmed like below

Screen Shot 2018-07-26 at 12.35.26 PM.png

Thanks

Arun

Avatar

Avatar
Validate 1
Level 2
nileshdchavan
Level 2

Likes

10 likes

Total Posts

27 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile

Avatar
Validate 1
Level 2
nileshdchavan
Level 2

Likes

10 likes

Total Posts

27 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile
nileshdchavan
Level 2

26-07-2018

I'm interested in fieldlabel and not in fielddescription.

There were no custom code changes to make it work in CQ 5.6. Are you saying all these properties encoded in 6.4 and hence it will never apply any html tags in there?

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,279 likes

Total Posts

3,155 posts

Correct Reply

889 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,279 likes

Total Posts

3,155 posts

Correct Reply

889 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

26-07-2018

It still works in classic UI but not Touch UI.

Thanks

Arun

Avatar

Avatar
Validate 1
Level 2
nileshdchavan
Level 2

Likes

10 likes

Total Posts

27 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile

Avatar
Validate 1
Level 2
nileshdchavan
Level 2

Likes

10 likes

Total Posts

27 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile
nileshdchavan
Level 2

26-07-2018

Arun - I know it works in 5.6 and not in 6.4. and stated the same in the question.

Point of raising this question is to know why it wont work in AEM 6.4.

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,279 likes

Total Posts

3,155 posts

Correct Reply

889 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,279 likes

Total Posts

3,155 posts

Correct Reply

889 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

26-07-2018

Both the UI, Touch and Classic based on different framework, doesn't matter which AEM version you are using 5.6 or 6.4.

For Coral and Granite UI, these properties are getting encoded, may be as part of design don't know, you can raise this with day care or overlay the existing functionality.

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 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,406 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

26-07-2018

Whats wrong with the default behavior anyhow - it works fine. As Arun stated - Touch UI is a different framework then Classic UI where you could use <br>. I ahve not seen any examples in the Touch UI where label and textfield are on different lines.

Avatar

Avatar
Validate 1
Level 1
hits1208
Level 1

Likes

0 likes

Total Posts

4 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Affirm 1
View profile

Avatar
Validate 1
Level 1
hits1208
Level 1

Likes

0 likes

Total Posts

4 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Affirm 1
View profile
hits1208
Level 1

18-09-2018

Hi Nilesh,

Did you get any solution for this ?

Avatar

Avatar
Validate 1
Level 10
edubey
Level 10

Likes

273 likes

Total Posts

1,502 posts

Correct Reply

392 solutions
Top badges earned
Validate 1
Give Back 50
Give Back 5
Give Back 3
Give Back 25
View profile

Avatar
Validate 1
Level 10
edubey
Level 10

Likes

273 likes

Total Posts

1,502 posts

Correct Reply

392 solutions
Top badges earned
Validate 1
Give Back 50
Give Back 5
Give Back 3
Give Back 25
View profile
edubey
Level 10

18-09-2018

AFAIK, Touch UI fieldDescription does not support this.

Avatar

Avatar
Validate 1
Level 1
hits1208
Level 1

Likes

0 likes

Total Posts

4 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Affirm 1
View profile

Avatar
Validate 1
Level 1
hits1208
Level 1

Likes

0 likes

Total Posts

4 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Affirm 1
View profile
hits1208
Level 1

19-09-2018

So it seems that it is not possible to add a line break directly. Although, new line character i.e. "\n" does seem to be having some effect.

So in case somebody really needs to achieve this they can use "\n" along with whitespace css property. Something like :

.coral-Form-fieldset-legend {

  white-space : pre-line;

}