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

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!


Hi Brett,



ah, did even think about this possibility. I do not know, if I do realy like this option of configuration. But it makes me very flexible. Thanks


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

Hello Brett,



I am facing one issue when I use below css in Portal:



.add-on > button.lookup {  


  display:none;  


}  


.field-has-reference .reference {  


      display: block;  


}



Here is the screenshot of issue:


find_real_file.png


the size of the field is getting changed.



Can you please help in resolving this issue.



Thanks,


Jaikumar


It worked well when I added the CSS on page level instead of portal.



Thanks,


Jaikumar