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

SOLVED

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

airnavin30
Level 2
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
Suraj_Kamdi
Correct answer by
Community Advisor
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

13 Replies
ArpitVarshney
Community Advisor
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

airnavin30
Level 2
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

ArpitVarshney
Community Advisor
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?
Vaibhavi
Community Advisor
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.

 

Suraj_Kamdi
Community Advisor
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 🙂 

Suraj_Kamdi
Correct answer by
Community Advisor
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

airnavin30
Level 2
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

Suraj_Kamdi
Community Advisor
Community Advisor
@airnavin30 Yes we can do that... By implementing the same using granite:id / granite:class by providing some unique id
kautuk_sahni
Community Manager
Community Manager
@Suraj_Kamdi, Good to see you back. Always glad to have our great AEM SMEs back. Keep contributing.
Arun_Patidar
Community Advisor
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.