Service Catalog widgets

Use the Service Catalog widgets to build a catalog for your portal.

The service catalog widgets are part of the Service Portal Service Catalog [com.glide.service-portal.service-catalog] plugin, which is activated automatically with the Service Portal for Enterprise Service Management [com.glide.service-portal.esm] plugin.

Most of the configuration for the Service Catalog widgets takes place in the Service Catalog application of the platform. For more information on Service Catalog, see Service Catalog.

SP Variable Editor widget

The Variable Editor widget allows you to change the specifications you chose for an item in the Service Catalog.

You can embed the variable editor widget in the shopping cart widget, to allow users to edit and make changes to their cart items. The options included in the widget are determined by the specific catalog item and the variables that have been configured for it.

For more information on the service catalog variables that are available in Service Portal, see service catalog variable types.

Figure 1. Variable Editor widget
Variable Editor widget

Instance Options

The Variable Editor widget is embedded as part of the shopping cart widget, therefore no instance options are included.

Catalog Content widget

The Catalog Content widget is part of the Service Catalog and includes a tiled list of all the content items available in the catalog.

The items that appear on the page are grouped by category alphabetically. Catalog items and categories are defined in the Service Catalog application in the platform. For more information on creating catalog items to appear in the catalog, see Create a catalog item.

Figure 2. Catalog Content widget
Catalog Content widget containing example catalog content such as Password Reset and New Hire Order Guide

Instance Options

The Catalog Content widget does not include instance options.

Request Fields widget

The Request Fields widget display information about any request a user has made.

Fields for the Request Fields widget are defined by the HTML template and the server.

Figure 3. Request Fields widget
Request Fields widget

Instance options

Table 1. Request fields widget instance options
Field Description
Pickup message Information that appears at the bottom of the widget. Make sure any changes you make are within the curly braces. The default is ${Requests are picked up within <br/> 4 hours (M-F 9-5)}

Requested Items widget

Describes at what stage of the order a requested item is.

You can define different workflows for items directly within the Service Catalog module. For more information on Service Catalog workflows, see Service Catalog request fulfillment .

Figure 4. Requested Items widget
Requested Items widget

Instance options

Table 2. Requested Items instance options fields
Field Description
Title Name of the widget. The title appears in the header of the widget.
Bootstrap color Color scheme for the widget. The default colors are defined by the portal theme, but if you want the instance to have a specific color, select the option from the list.
Display field Determine what information displays as the title for each requested item. Short description is the default.
Filter Limit what appears in the list using a filter. You can add a filter by opening the Requested Items record in the platform (From the context menu, click Open in platform) and using the condition builder.
Table Table that displays the item when the user clicks an entry
Link to this page Page that opens when the user clicks an item
Maximum entries Max number of entries that appear in the list of requested items

SC Catalog Item widget

Describe catalog items and add options for users to select from.

Configure catalog items using the Service Catalog in the platform UI by navigating to Service Catalog > Catalog Definitions > Maintain items. Catalog items must have Availability set to Desktop or Desktop and Mobile.

Any specialized font or formatting added in the description field for the catalog item within the platform, appears the same way in the portal.

Catalog variables determine what information your users are allowed to pick from, for example, color, size, or price. For more information on defining the variables in the catalog item, see Create a service catalog variable.

Determine whether users can add this item to the shopping cart by selecting the Show Add Cart button check box in the widget instance options.

Figure 5. SC Category Item widget
Service Catalog Catalog item widget

Instance options

Table 3. Instance options
Field Description
Bootstrap color Color of the widget based on the selections made in the Branding Editor.
Show Add Cart button Includes the option to add the item to the shopping cart. If this check box is cleared the Add to Card button does not appear on the form.
Custom URL format Enter a web page for the page to redirect to upon successful completion of an order.
  • Enter a custom portal URL, that is relative to the root. For example, if you enter sp?id=sc_home, the page redirects to <instance_name>.servicenow.com/sp?id=sc_home.
  • Append a custom portal URL such as sp?id=sc_home
  • You can also include a full web address such as https://google.com
  • If the Auto Redirect on Successful Order is selected, the page redirects to the URL listed. If the option is cleared, clicking the click here to view in the confirmation banner redirects to that URL.
  • Custom URL takes precedence over Page and Table selection
Successful Order Page Select a page in the portal to redirect to after a successful order completion. If Auto Redirect on Successful Order is selected, the page redirects to the URL listed. If the option is cleared, clicking the click here to view in the confirmation banner redirects to that page.
Successful Order Table Select a specific table on a page to direct a user to after the order is completed. The page ID and the table name are coupled to form a URL. If you set the page ID to Requests and the table name to Requested Item, the page opens with a URL similar to <instance_name>.servicenow.com/sp/?id=requests&table=sc_req_item.
Auto Redirect on Successful Order Select this option to redirect users to a new page automatically. If this option is not selected, the user stays on the catalog item page after submitting.

SC Categories widget

The SC Categories widget displays Service Catalog categories.

The system renders the categories available in this widget from the Categories table in Service Catalog [sc_category].

Figure 6. SC Categories widget
SC Categories widget including Can We Help You?, Hardware, Office, Peripherals, Quick Links, and Software as categories

Instance options

Table 4. Categories widget instance options fields
Field Description
Bootstrap color Color scheme for the widget. The default colors are defined by the portal theme, but if you want the instance to have a specific color, select the option from the list.
Hide at XS Hides the categories option on small screens, for example, on smart phones. The default is set to false.
Omit badges Show or hide the number of items included in each category
Check canView per item Verifies with each item that the user has the right roles to view the catalog item.
Category Layout Select a flat or nested layout. A flat layout shows all of the available categories. A nested layout shows only the parent categories. Use a nested layout if you have a large number of categories to prevent an unnecessarily long list. Click to folder icon (Folder icon) that appears next to a category with nested topics to expand the sub-categories.

The widget only supports three levels of nesting. After level four, categories appear in the flat view.

Page Defines what page opens when a user clicks a category. By default, this option redirects to the page for the selected category.
Note: If a category contains more than 200 items, update the following instance options on this widget for better performance:
  • Category Layout: Flat
  • Omit badges: True

SC Category Page widget

Lists the catalog items available within a certain category. Categories are determined within the Service Catalog module.

Note:
  • Order Guides do not display when viewed in a browser on a mobile device.
  • Catalog items are sorted in ascending order by their Order value. If catalog items have the same order, they are sorted by the Name field.
Figure 7. SC Category Page widget
Service Catalog Category page widget

Instance options

Table 5. Category page widget instance options fields
Field Description
Click event name The name of the event that is emitted when a user clicks a catalog item.

You can override the default behavior when clicking on a catalog item by providing a different event name. This would be in a situation where you embedded the category page in another widget.

The default value is $sp.cat_item_list.click.

SC Order Guide widget

Standardized order guide for the catalog items. This widget compiles several commonly ordered items into an order guide for a specific purpose, for example, new hires.

Figure 8. SC Order Guide widget
Service Catalog Order Guide widget

Instance Options

Table 6. Order Guide instance options fields
Field Description
Bootstrap color Color scheme for the widget. The default colors are defined by the portal theme, but if you want the instance to have a specific color, select the option from the list.
Title The name of the order guide.

SC Save Bundles widget

The Save Bundles widget allows you to save specific catalog items together for reuse.

The Save Bundles widget is embedded within the SC Shopping Cart widget.
Figure 10. SC Save Bundles widget
SC Save Bundles widget with Apple iPhone5, Logitech headset, and Sales Laptop saved as a bundle

Instance Options

The Save Bundles widget does not have any included instance options.

SC Saved Carts widget

The Saved Carts widget shows previously created and saved bundles from the Service Catalog.

Figure 11. SC Saved Cart widget
Saved Cart widget with a New sales hire bundle saved
When you add an existing cart bundle to a shopping cart, you have two options. You can:
  • Replace the items in the shopping cart with the items in the bundle.
  • Add the bundle in addition to the rest of the items in the cart.
Figure 12. Add bundle items to a cart
Bundle with options to replace cart items or add to the cart highlighted

Instance Options

The Saved Carts widget does not have any included instance options.

SC Shopping Cart widget

The shopping cart widget, used in combination with Service Catalog, stores all of your orders in one place.

Figure 13. Shopping cart widget
Shopping cart widget opened in the Service Portal Designer
With the shopping cart widget, you can:
  • Control the quantity of items going into the cart.
  • Add items to a cart. This information gets stored in the sc_cart table.
  • Define who the items are being requested for.
  • Save specific items together as a bundle, which can be reloaded at a later time.
  • Use the Clear Cart option to remove all the items from your cart.

If you want to add a bundle to your cart from the saved cart, you have the option of replacing all of the existing cart items with the bundle items, or including the bundle items with the cart items.

The shopping cart respects most Service Catalog properties.

Instance options

Table 8. Shopping cart instance options fields
Field Description
Bootstrap color Color scheme for the widget. The default colors are defined by the portal theme, but if you want the instance to have a specific color, select the option from the list.
Cart template Enter the name of an ng-template you want to use to provide a different template for the shopping cart. By default, two ng-templates are provided: small_shopping_cart.html and large_shopping_cart.html.

Enable the Shopping Cart widget

The shopping cart widget is enabled automatically for instances upgrading to Istanbul, however, there are several ways to manually enable or disable the widget.

To enable the shopping cart for a catalog item:
  1. Navigate to a catalog item on the Service Catalog page in Service Portal.
  2. CTRL+right-click a catalog item widget to open the widget instance options.
  3. Select or clear the Show Add Cart Button option to enable or disable the shopping cart for that particular catalog item.
Figure 14. Catalog item cart option
Catalog item widget with the shopping cart item selected
To enable to shopping cart in the portal header:
  1. From the Service Portal configuration page, select the Portal editor.
  2. Select the SP Header Menu in the portal hierarchy.
  3. In the Additional options section, make sure the enable cart value is set to true. Set the value to false to hide the shopping cart.
Figure 15. Shopping cart in the header menu
Header menu with shopping cart value set to true in the additional options section