Widgets are what define the content of your portal pages. You can use the base system widgets provided with Service Portal, clone and modify widgets, or develop custom widgets to fit your own needs.

When you create or update a page in the Service Portal Designer, you easily add widgets by searching in the widget filter and dragging a widget onto the page. You can also access all widget records from the platform at All > Service Portal > Widgets.

Base system widgets

You can use the base system widgets included with Service Portal to get started configuring portal pages. Base system widgets are read-only so you can benefit from future updates. However, for each instance of a base system widget that you add to a page, you can configure the instance options available for that widget.

For a list of base system widgets and information about their instance options, see the Widget library.

Widget instances

When you add a widget to a page using the Service Portal Designer, it creates a widget instance. A widget instance is a reference to a widget that contains a location, properties, and CSS specific to that instance. Adding the same widget multiple times to the same page creates multiple instances.

All widget instances point to a widget. If you edit that widget, all of its widget instances receive that change as well. You can also make changes specific to a widget instance, and only that widget instance is affected.

For example, the following image includes four instances of the base system Icon Link widget with different configurations specific to each instance.

Figure 1. Icon link widgets
Icon link widgets from the Service Portal homepage with different icons and titles for each instance
Note: For widgets that do not contain any information by default, you must configure the options for their widget instances before they will appear on a portal page.

Widget context menu

From any rendered Service Portal page, you can CTRL+right-click a widget to see more configuration options in a context menu.

For example, navigate to Service Portal > Service Portal Home to open a sample portal page. CTRL+right-click Knowledge Base on that page.

Figure 2. Widget context menu
Icon Link widget context menu
Note: You must have the admin or sp_admin role to see the widget context menu. When you impersonate a user without one of those roles, you can still see the menu. However, a regular user signed in without those roles can’t see the menu.
Table 1. Widget context menu options
OptionDescription
Widget performance How long it takes for a widget to load
Instance options Specify an instance of a widget. Widgets instance options vary depending on the widget that you select. For example, the instance options for the cool clock widget include different time zones for each instance, so you can have the same clock four times on a page, but with all different time zones.
Instance in Page Editor Opens that instance of the widget in the Page Editor
Page Designer Opens the widget in the Service Portal Designer, which lets you add containers, columns, and widgets. You can add styling from the Service Portal Designer to the widget or to the page the widget lives on.
Show Widget Customizations Shows customization levels of widgets on the page so that you can diagnose page issues. For more information, see Widget diagnostics.
Edit Container Background Edit the layout in which the widget is located.
Widget Options Schema Define the options that you can select for an instance of a widget. For more information on configuring your own instance options, see Widget option schema.
Widget in Form Modal Opens the widget form in a pop-up window so you can make quick changes to the widget.
Widget in Editor Opens the widget in the Widget Editor. You can use the Widget Editor to configure HTML templates, CSS, client scripts, service scripts, and demo data for the widget.
Log to console: $scope.data The $scope.data object passes data from the server to the client-side controller. Instead of adding console.log messages or alerts into the controller code, you can log the $scope.data object to the browser console and view the data there.
Log to console: $scope Similar to the $scope.data object, except it logs everything in $scope to the console.

Custom widgets

Base system widgets are read-only so you can benefit from future updates. To make changes, you can clone base system widgets. However, cloned widgets are considered custom and don't benefit from future updates to the widgets they were cloned from. You can also create widgets from scratch. To learn more about cloning or creating widgets, see Developing custom widgets.