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

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

Avatar

Avatar
Validate 1
Level 2
airnavin30
Level 2

Likes

4 likes

Total Posts

14 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 2
airnavin30
Level 2

Likes

4 likes

Total Posts

14 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Boost 1
View profile
airnavin30
Level 2

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?

    

View Entire Topic

Avatar

Avatar
Seeker
MVP
Suraj_Kamdi
MVP

Likes

146 likes

Total Posts

157 posts

Correct Reply

41 solutions
Top badges earned
Seeker
Bedrock
Engage 1
Springboard
Validate 1
View profile

Avatar
Seeker
MVP
Suraj_Kamdi
MVP

Likes

146 likes

Total Posts

157 posts

Correct Reply

41 solutions
Top badges earned
Seeker
Bedrock
Engage 1
Springboard
Validate 1
View profile
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>