Hide referenced popup in new Service Portal in Helsinki

Kostya · ‎06-17-2016

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.

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

brett_karl · ‎07-15-2016

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:

Entire Portal
Per Page
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

Please let me know if you need any more help!

View solution in original post

Nick Inangelo1 · ‎12-08-2017

Found this at the right time and it worked like a charm! Thanks

Sri56 · ‎05-16-2019

Hi,

I need to display the information icon, where onclick of this button open up the record.

Is it possible to make all information inside read-only in service portal?

Thanks,

Sri

santhosh43 · ‎05-06-2021

Hi,

How to hide referenced popup for the external user or only one catalog item....!

Wes Farmer · ‎12-07-2017

Hello,

I am wanting to do this same thing. Which page/widget should this code get applied on?

Dave L · ‎01-31-2018

I wrote SCSS script that you can drop into your 'CSS Variables' and generate the CSS for your portal page.

1. Open up your Service Portal Set Up Page

2. Scroll down to 'CSS Variables'

3. Drop my snippet of code into the box

4. Add your ref field names to the $partial-class-list

5. 'Save' or 'Update'

When the CSS is generated for your portal page, it will loop through the list and generate the CSS based on the list.

Snippet:

$partial-class-list: 'assigned_to','created_by';



@each $partial-class in $partial-class-list {

         [for="sp_formfield_#{$partial-class}"] {

                   & + .type-reference {

                             .add-on>button.lookup {

                                       display: none;

                             }

                             .field-has-reference .reference {

                                       display: block !important;

                             }

                   }

         }

}

Output:

[for="sp_formfield_assigned_to"] + .type-reference .add-on > button.lookup {

   display: none;

}

[for="sp_formfield_assigned_to"] + .type-reference .field-has-reference .reference {

   display: block !important;

}



[for="sp_formfield_created_by"] + .type-reference .add-on > button.lookup {

   display: none;

}

[for="sp_formfield_created_by"] + .type-reference .field-has-reference .reference {

   display: block !important;

}