How to put an Icon next to the field label in a form?

[Arthur Bernardo]

Hello!
I'm trying to put an "?" help icon next to a specified field label.
Already trying to put using this kb: https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB0752116
Does not work.

I put with that onLoad script:

function onLoad() {

   //Type appropriate comment here, and begin script below

g_form.addDecoration("u_workaround_type", "icon-help", "help me");

}
And work's like a charm!

But the client wants the icon in the right position, like this:

I know that I can activate in the sys_user_preference table, by activating the "glide.ui.accessibility.accessible.tooltips", but in that way, the help icon will show up in all fields, and this is not what the client wants.

Can someone help me?

Thank you very much

[SergioRodrigues · Accepted solution]

Hi @Arthur Bernardo.

You listed all the possible ways, without customize the ui page (it is not recommended). In the sys_user_preference table, by activating the "glide.ui.accessibility.accessible.tooltips", will show the icon on the side that you want. With a client script onLoad type, with "addDecoration" the icon will show in the other side.

[Ramya Neelam1]

Hi @Arthur Bernardo,

I got a similar requirement, could you please let me know how were you able to achieve it? how to display the icon to the right side of the field?

Thanks

[Patilgajanans]

First I explain My Requirement 

I have to add this icon and when user click on that icon open new window in that show the data which are present in attribute field

Solution : 

We have to work OOB  

For create symbol or icon 

Search your image or icon in db_image this table you can add manually as well

Create UI Macro

After Adding Image You Have to create UI Macros in in sys_ui_macro  table 

<script language="javascript" >
	function myDemo(){

    var fieldName = 'attributes'; //select field
   	
	
    var labelElement = document.querySelector("#label\\." + g_form.getTableName() + "\\." + fieldName).firstChild; //select the path
			
	var htm =`<a id="tanble1.newICON" name="New Icon" class="Icon" tabindex="-1"><img src="sn_sow_admin.record-page-4-xl.svg"  alt="XML" title="XML" width="20" height="20" border="0" data-original-title="Icon"></img></a>`   // createing html element, replace the src name
	
	labelElement.insertAdjacentHTML("beforeend", htm);  //adding html element to the end of the label
	
	var newElement = labelElement.lastElementChild;  //targeting same element which was created new one
	newElement.addEventListener("click", abc);  //adding action
	newElement.style.paddingLeft = "10px";  //giving style
	function abc(){
		myWindow = window.open("", "JSON DATA", "width=800,height=500");
		myWindow.document.body.innerHTML = "";
		myWindow.document.write("<pre>"+g_form.getValue('attributes')+"</pre>"); //fetch the data from field
	
	}
				
	}
    var setTimer = '';   //this is using beacuse UI Macros executed first before loading entire form if we can access g_form then wont be get exact output 
    setTimer = setTimeout(setTimerDelay, 2000); /*to set the timer for 2 sec*/
    function setTimerDelay() {
        myDemo();
    }
</script>

Calling UI Macros

Then we have to configure from System UI > Formatters create new record and write in formatter field is uimacro name .xml 

Calling Formatter From Form

Go to form layout you will gate formatter name and just move and click on okay 

Final Output

Why I am not Calling UI Macros from any other way

1. If Field length is more than 255 then we cannot call from attribute

If it is helpful then mark as helpful or give suggestions

Regards,

Gajanan Patil