Question

Hiding specific Service Items from Service Catalog


Userlevel 3
Badge +7

Hi all,

I have a need of hiding a few specific Service Items from the service catalog list view in the portal interface.

Has anyone done this in the community and can share the script? 

The result I’m after is to be able to hide specific items from normal category views because they only need to be visible through a bundled item. Using Requester groups etc will not solve this as they will not be visible from the bundle when using this method.


12 replies

Userlevel 4
Badge +4

Hi @maghed,

 

There is no rock solid solution for this. If you hide specific service items via a script, you can still search for them and see them in the results and open it from here.

To hide them in the listing, you can add the ones to one specific category and place the category at the bottom of the category list.

In the “Custom Stylesheet” section of the Portal designer you can add the following script to hide the last category from the list:

/* Catalog: Hide LAST category in list */
#categories-list > li:last-child{
visibility: hidden;
}

 

Kind regards,

 

Rutger Bockholts

Freshworks

Userlevel 3
Badge +2

The easier way to do this that I have utilized is to create a requester group with no requesters. The in the Service Item, Requster Visability, just select the empty requester group. Agents will still see it, but you could limit that to just the admins if you needed to.

Badge

Hi @maghed,

 

There is no rock solid solution for this. If you hide specific service items via a script, you can still search for them and see them in the results and open it from here.

To hide them in the listing, you can add the ones to one specific category and place the category at the bottom of the category list.

In the “Custom Stylesheet” section of the Portal designer you can add the following script to hide the last category from the list:

/* Catalog: Hide LAST category in list */
#categories-list > li:last-child{
visibility: hidden;
}

 

Kind regards,

 

Rutger Bockholts

Freshworks


Thanks for this Rutger, this helped solve part of a problem we are having. Do you know if we can hide specific service items by using the same method in the custom stylesheet? We have 3 service items that we only want to be available as child services within a parent service and not visible in any other location. Hoping you can guide us on how to do this if it is possible. 

Thanks Much!

-Chris

Badge +1

Hi @maghed,

 

There is no rock solid solution for this. If you hide specific service items via a script, you can still search for them and see them in the results and open it from here.

To hide them in the listing, you can add the ones to one specific category and place the category at the bottom of the category list.

In the “Custom Stylesheet” section of the Portal designer you can add the following script to hide the last category from the list:

/* Catalog: Hide LAST category in list */
#categories-list > li:last-child{
visibility: hidden;
}

 

Kind regards,

 

Rutger Bockholts

Freshworks


Thanks for this Rutger, this helped solve part of a problem we are having. Do you know if we can hide specific service items by using the same method in the custom stylesheet? We have 3 service items that we only want to be available as child services within a parent service and not visible in any other location. Hoping you can guide us on how to do this if it is possible. 

Thanks Much!

-Chris

Ditto!

Also, my service category will not always be the last because we have some people who can’t see it based on requester visibility

 

Hi ​​​​​​@picassoappz

 

There is no rock solid solution for this. If you hide specific service items via a script, you can still search for them and see them in the results and open it from here.

To hide them in the listing, you can add the ones to one specific category and place the category at the bottom of the category list.

In the “Custom Stylesheet” section of the Portal designer you can add the following script to hide the last category from the list:

/* Catalog: Hide LAST category in list */
#categories-list > li:last-child{
visibility: hidden;
}

 

Kind regards,

 

Rutger Bockholts

Freshworks

in the custom stylesheet when i am placing the code it says there is error in the code can you elaborate more?

Hi @maghed,

 

There is no rock solid solution for this. If you hide specific service items via a script, you can still search for them and see them in the results and open it from here.

To hide them in the listing, you can add the ones to one specific category and place the category at the bottom of the category list.

In the “Custom Stylesheet” section of the Portal designer you can add the following script to hide the last category from the list:

/* Catalog: Hide LAST category in list */
#categories-list > li:last-child{
visibility: hidden;
}

 

Kind regards,

 

Rutger Bockholts

Freshworks

This is great! is there a way to hide ‘All Service Items’ so that users have to select the categories? I have bundled items and don’t want the users seeing the single items.

 

You can hide specific Service Items in the service catalog by creating a UI policy or using a catalog client script. Use conditions to check the item's name or sys_id and then set the visibility to false. This approach ensures items are hidden in category views but accessible in bundles.

Badge +1

Thanks George. That sounds very useful and we definetely want it.

 

Is it documented anywhere or should I engage a developer?

 

You can hide specific Service Items in the service catalog by creating a UI policy or using a catalog client script. Use conditions to check the item's name or sys_id and then set the visibility to false. This approach ensures items are hidden in category views but accessible in bundles.

Thank you, I was going to ask the same question as above, do you have documentation on setting this up?

Badge +1

Here is the code to hide the All Service Items category (need to change default SR card to another service category URL) from another solution.

/* Hides All Service Items Category */
#categories-list > li:nth-child(1){
visibility: hidden;}

Here is the code earlier in this thread now more digestable

/* Catalog: Hide LAST category in list */
#categories-list > li:last-child{
visibility: hidden;}

 

So we know nth-child and last-child, but will someone tell us the damn selector used to choose a category to hide based on its ID!?  Where is the common sense for support articles on here or replies that explain how to do it beyond “I did it this way”.

Badge +1

Here is the code that changes the default SR card for the service catelogue to a specific category.  However, this solution is not acceptable as inserting it on the common layout Footer as instructed does not apply the script at the correct time, since it needs to run on the homepage when the card is clicked to function properly (otherwise it still loads all service items until some action occurs on that page).

<!-- Change the default service request card to open a specific category -->
<script>
CARDS.map(function (card){
if (card.url == '/support/catalog/items') {
card.url = "/support/catalog/items?category_id=21000275###";
}
});
jQuery(document).ready(function(){
jQuery("a[href='/support/catalog/items']").attr('href', '/support/catalog/items?category_id=21000275###');
});
</script>

I ended up disabling this code and swapping the Default SR Card for a Custom Card to link to a Specific Category, since we cannot edit the links of the default cards.  Perhaps placing this code on Page Layout instead of Footer is the proper location for it to operate in sequence, but I cant justify spending anymore of my time trying to figure out a real solution here instead of all these workarounds.

Hi @maghed,

 

There is no rock solid solution for this. If you hide specific service items via a script, you can still search for them and see them in the results and open it from here.

To hide them in the listing, you can add the ones to one specific category and place the category at the bottom of the category list.

In the “Custom Stylesheet” section of the Portal designer you can add the following script to hide the last category from the list:

/* Catalog: Hide LAST category in list */
#categories-list > li:last-child{
visibility: hidden;
}

 

Kind regards,

 

Rutger Bockholts

Freshworks

This is great! is there a way to hide ‘All Service Items’ so that users have to select the categories? I have bundled items and don’t want the users seeing the single items.

 

You can hide the consolidated Service Catalogue items list and replace it with text advising the requestor to select a category.

This can be achieved by utilizing the below code in the Page Layout section of your support portal.

<script>
jQuery(document).on('PageUpdate', function() {
setTimeout(function() {
if (window.location.href.endsWith("support/catalog/items")) {
jQuery("#catalog-list-items").hide();
jQuery("<h3 style='padding: 20px'>Please select a service category.</h3>").insertAfter("#catalog-list-items");
jQuery("#categories-list").click(function () {
jQuery("#catalog-list-items").show();
jQuery("h3:contains('Please select a service category')").hide();
});
}
});
});
</script>

For hiding child items, you can create a ‘Hidden’ category and either set the requestor visibility to an empty requestor group, or, if using the above snippet you would also then be able to hide your hidden category. To obtain the category ID navigate to your support portal and then click on the category. Your address bar will update to contain the ID of the category being displayed. Once you have the ID you can hide the category containing only items to be hidden by using the following ensuring to replace CATEGORYID with the ID of the category you intend to hide.

<script>
jQuery(document).on('PageUpdate', function() {
jQuery("a[href='/support/catalog/items?category_id=CATEGORYID']").hide();
});
</script>

 

Reply