Hide referenced popup in new Service Portal in Helsinki

Kostya
Tera Guru

Hi,

Does anyone know, how to disable the Referenced Icon / Magnifying glass in the new Service Portal (Helsinki) on a Record Producer. The popup should stay available globaly, only for some purposes, f.e. on some Record Producers the popup of Referenced Variables should be deactivated. I did not found any hint in wiki, docs or serviceportal.io.

find_real_file.png

Maybe there is a way to set options in the widget. I would like to avoid any kind of client scripts and DOM manipulations

Hit the Thumb Icon and/or mark as Correct, if my answer was correct. So you help others to see correct responses and I get fame 🙂

Cheers,
Kostya
1 ACCEPTED SOLUTION

brett_karl
ServiceNow Employee
ServiceNow Employee

Hi Konstantin,


You won't have to do DOM manipulation, but you would have to use some CSS. You have a few options as to where to apply this in your portal:


  1. Entire Portal
  2. Per Page
  3. Per Widget

Take the following CSS code and apply it to one of those areas.


.add-on > button.lookup {


  display:none;


}


.field-has-reference .reference {


      display: block;


}



This will affect all reference fields on the portal/site/widget (whatever you decide). If you would like to specify a single item, you will need to right click on your element in the portal, select "inspect element" and obtain the sys_id or field id, if possible, to be more specific.



#\31 30077b64f2ca200ef61f9718110c7ba > fieldset > span > span > div.add-on.ng-scope > button {


display: none;


}


.field-has-reference .reference {


      display: block;


}


Final result


incident_no_reference.png



Please let me know if you need any more help!


View solution in original post

23 REPLIES 23

RPerala
Tera Expert

Hi,

 In Kingston, we are able to hide the reference 'i' icon using the below code.But there is a white space showing in the same place(highlighted in yellow).The same code has worked in Helsinki.


.add-on > button.lookup {

  display:none; }

.field-has-reference .reference {
      display: block; }

 

find_real_file.png

Dave L
Tera Contributor

make sure there is an '!important' at the end of display: block. 

.field-has-reference .reference {
       display: block !important; }

Hi ,

Thank you for your reply.I have tried with below code and worked.Use below for Kingston

.field-has-reference .add-on
{
display: block !important;
}

Hi, you may have found a solution after few years but I have not in this thread so posting it here.

The only CSS you need to add is:

 

.field-has-reference > .add-on{

 display:none;

}

 

As per

https://hi.service-now.com/kb_view.do?sysparm_article=KB0714594

miriamberge
Tera Guru

This is very helpful, thank you!

I added this to my theme:

.add-on > button.lookup {
   display:none;
}
.field-has-reference .reference {
   display: block !important;
}

There is still white space in front of the field.  Any ideas how to troubleshoot?  Thanks!