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

Avatar

Avatar

airnavin30

Avatar

airnavin30

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)

Avatar

Avatar

Suraj_Kamdi

MVP

Avatar

Suraj_Kamdi

MVP

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)

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831
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.

Avatar

Avatar

Suraj_Kamdi

MVP

Avatar

Suraj_Kamdi

MVP

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 🙂 

Avatar

Avatar

Vaibhavi

MVP

Avatar

Vaibhavi

MVP

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.

 

Avatar

Avatar

ArpitVarshney

MVP

Avatar

ArpitVarshney

MVP

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