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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

How can we add a link (<a href>LINK</a>) in fieldDescription ?

Avatar

Level 2

For one of the requirement, on a text field there is a help text with a reference link required to add, But with normal text with hyperlink it's showing as it is on hovering to [i] icon.

 

I have an understanding that hyperlink may not support here. Is there a way we can make a hyperlink ? or any alternative?

    

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@airnavin30 

Here is the solution 

1. Create one clientlibFolder 

2. set categories:[cq.authoring.editor]

3. create one add-field-desc.js

 

 

 

(function ($, $document) {
	"use strict";

	// Load Json on dialog ready event
	$document.on("dialog-ready", function () {
		var $dataAttr = $('[data-custom-field-description]');
        var fieldDescription = $dataAttr.data('custom-field-description');
        var $coralIcon = $dataAttr.siblings('coral-icon');

        $coralIcon.on('click', function(){
			$dataAttr.siblings('coral-tooltip').html(fieldDescription);
        });
	});

})($, $(document));

 

 

 

4. create js.txt and add add-field-desc.js path

5. Now go to your field where you want to add field description.

6. create one child node with name granite:data and set custom-field-description="Hey adding <a href="#">link" </a>

7. your structure should look like

 

 

 

<cq:dialog>
-----
   <your-field
        jcr:primaryType="nt:unstructured"
        fieldLabel="Your Field"
        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
        fieldDescription=""
        name="./yourField">
        <granite:data
          custom-field-description="hey adding <a href="#"> link <a/>" />
  </your-field>

       

 

 

 

 

View solution in original post

3 Replies

Avatar

Community Advisor

Hi @airnavin30

You can implement the rich text editor (rte) inside a dialog for this requirement. Go through below blogs

 

Also, You might think of giving the HTML itself in the text field and read in HTL using @context='html' but this is not recommended at all. I've seen many people doing this but this is not good from a security point of view. You will give the author to do anything.

 

Regards,

Arpit Varshney

Avatar

Level 2

Probably, it's misunderstood what I am asking about, we have a text field which has a property fieldDescription which consists a content say "For more information please refer to <a href = "https://helpx.adobe.com/support/experience-manager/6-5.html"> AEM Latest</a>" , So while hovering to the "i" icon of the text field the description is showing same as "For more information please refer to <a href = "https://helpx.adobe.com/support/experience-manager/6-5.html"> AEM Latest</a>" and not like  "For more information please refer to AEM Latest", So I don't have to make any changes inside the Text field but inside the fieldDescription which we provide as "i" where it shows help text while hovering

Avatar

Community Advisor
I understood it now, What is fieldDescription property? Is it a dialog property where you want to give hyperlink in the text?If yes, are you using classic or touch dialog?

Avatar

Community Advisor

Hi @airnavin30 , 

 

Yes it is possible. We can add link in filed description. 

It works fine for me. I have added anchor link navigation to google.com in field description and it works as expected. 

 

vaibhavi_235640_0-1595316521565.png

 

 

Please do have a check if you have made any syntax error. Also, please do inspect of anchor and verify if DOM for anchor is constructed fine.

 

Avatar

Community Advisor

Hello @airnavin30

You need to write custom JS to add text with a hyperlink by specifying the categories:[cq.authoring.editor]

 

Please let me know if you need more help with this. I am happy to help 🙂 

Avatar

Correct answer by
Community Advisor

@airnavin30 

Here is the solution 

1. Create one clientlibFolder 

2. set categories:[cq.authoring.editor]

3. create one add-field-desc.js

 

 

 

(function ($, $document) {
	"use strict";

	// Load Json on dialog ready event
	$document.on("dialog-ready", function () {
		var $dataAttr = $('[data-custom-field-description]');
        var fieldDescription = $dataAttr.data('custom-field-description');
        var $coralIcon = $dataAttr.siblings('coral-icon');

        $coralIcon.on('click', function(){
			$dataAttr.siblings('coral-tooltip').html(fieldDescription);
        });
	});

})($, $(document));

 

 

 

4. create js.txt and add add-field-desc.js path

5. Now go to your field where you want to add field description.

6. create one child node with name granite:data and set custom-field-description="Hey adding <a href="#">link" </a>

7. your structure should look like

 

 

 

<cq:dialog>
-----
   <your-field
        jcr:primaryType="nt:unstructured"
        fieldLabel="Your Field"
        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
        fieldDescription=""
        name="./yourField">
        <granite:data
          custom-field-description="hey adding <a href="#"> link <a/>" />
  </your-field>

       

 

 

 

 

Avatar

Level 2

I found one issue while doing that this solution is applicable mainly for one link Url added as tooltip, If you have to add different link urls as tooltip in multiple places in the same dialog, this is taking whole places as duplicate tooltip content, as reason being it's taking dataAttribute.siblings('coral.icon') which is taking all over place a same element of coral.icon

Avatar

Community Advisor
@airnavin30 Yes we can do that... By implementing the same using granite:id / granite:class by providing some unique id

Avatar

Administrator
@Suraj_Kamdi, Good to see you back. Always glad to have our great AEM SMEs back. Keep contributing.

Avatar

Community Advisor

Hi,

OOTB it is not possible, There are three options:

1. Remove fieldDescription encoding from render.jsp so that it can allow rich-text.

2. Use custom js solution similar suggested by @Suraj_Kamdi 

3. Use Heading for text and Hyperlink resourceType to create a link in the dialog.

 

I would say go for option 2 or 3 if the objective is just to show link.