How do we add a newline in the fieldlable of dialog in AEM 6.4 | Community
Skip to main content
Level 2
July 26, 2018

How do we add a newline in the fieldlable of dialog in AEM 6.4

  • July 26, 2018
  • 4 replies
  • 10245 views

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.

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

4 replies

arunpatidar
Community Advisor
Community Advisor
July 26, 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

Thanks

Arun

Arun Patidar
Level 2
July 26, 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?

arunpatidar
Community Advisor
Community Advisor
July 26, 2018

It still works in classic UI but not Touch UI.

Thanks

Arun

Arun Patidar
September 18, 2018

Hi Nilesh,

Did you get any solution for this ?

edubey
Level 10
September 18, 2018

AFAIK, Touch UI fieldDescription does not support this.

September 19, 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;

}

August 10, 2021

You should render the property as html:

${model.fieldLabel @ context="html"}