How to set the image icon beside priority field?

prasannakumard
Tera Guru

Hi Team,

I tried to set one icon beside the Priority field. I used the following onload script (taken from Service now guru: https://www.servicenowguru.com/system-ui/ui-macros/add-macro-non-reference-field/ )

But, it is showing like this:

find_real_file.png

How to set this to beside to field.

function onLoad() {

      //Add a UI macro to a non-reference field

      //Set the name of the field in the 'field' variable

      var field = 'priority';

      //Append the table name to get the field id

      field = g_form.tableName + '.' + field;

      try{

      //Create the image element and add to the dom

      $(field).insert({

                      after: '<a onclick="doSomething()" name="my_custom_macro" id="my_custom_macro"><img src="orange-arrow.png" alt="Show Macro" title="Show Macro" style="padding-left:4px;"></a>'

              });

      }

      catch(e){

      //alert('Error');

      }

}

//onclick event to fire when the image is clicked

function doSomething() {

    alert('You clicked me!');

}

Please suggest me how can I set this?

Thanks & Regards,

Prasanna Kumar

1 ACCEPTED SOLUTION

Finally, I fixed the issue by using following script:



function onLoad() {


      //Add a UI macro to a non-reference field


      //Set the name of the field in the 'field' variable


var field = 'priority';


      //Append the table name to get the field id


      field = g_form.tableName + '.' + field;




      try{


      //Create the image element and add to the dom


      $(field).insert({


                      after: '<a onclick="doSomething()" name="my_custom_macro" id="my_custom_macro" style="display: block;position: absolute;top:0;right: -68px;width: 60px;height: 60px;"><img src="info-icon.png" width="32" height="32"/></a>'



              });


      }



      catch(e){


      //alert('Error');


      }


}




//onclick event to fire when the image is clicked


function doSomething(){


//HR WorkBench View and Default view


if(getView() == 'hr_workbench' || getView() == ''){


window.open('/Priority Defination - HR Fulfiller View.do','_blank');


}


else if(getView() == 'ess'){


window.open('/Priority Defination - Customer View.do','_blank');


}


}


View solution in original post

7 REPLIES 7

Okay, can try setting height and width of the image? say height="16" width="16"


Thank you Ashish, Still it is not working.


Finally, I fixed the issue by using following script:



function onLoad() {


      //Add a UI macro to a non-reference field


      //Set the name of the field in the 'field' variable


var field = 'priority';


      //Append the table name to get the field id


      field = g_form.tableName + '.' + field;




      try{


      //Create the image element and add to the dom


      $(field).insert({


                      after: '<a onclick="doSomething()" name="my_custom_macro" id="my_custom_macro" style="display: block;position: absolute;top:0;right: -68px;width: 60px;height: 60px;"><img src="info-icon.png" width="32" height="32"/></a>'



              });


      }



      catch(e){


      //alert('Error');


      }


}




//onclick event to fire when the image is clicked


function doSomething(){


//HR WorkBench View and Default view


if(getView() == 'hr_workbench' || getView() == ''){


window.open('/Priority Defination - HR Fulfiller View.do','_blank');


}


else if(getView() == 'ess'){


window.open('/Priority Defination - Customer View.do','_blank');


}


}