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

airnavin30

20-07-2020

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?

    

Accepted Solutions (1)

Accepted Solutions (1)

Suraj_Kamdi

MVP

21-07-2020

@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>

       

 

 

 

 

Answers (4)

Answers (4)

Arun_Patidar

MVP

21-07-2020

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.

Suraj_Kamdi

MVP

21-07-2020

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 🙂 

Vaibhavi

MVP

21-07-2020

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.

 

ArpitVarshney

MVP

20-07-2020

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