Using portal widgets
Summarize
Summary of Using portal widgets
Widgets are the fundamental building blocks that define the content on your Service Portal pages. You can utilize the base system widgets provided by ServiceNow, clone and modify them, or create entirely custom widgets to meet your specific needs. Widgets are added to pages through the Service Portal Designer by searching in the widget filter and dragging them onto the page. All widget records are accessible through the platform interface.
Show less
Key Features
- Base system widgets: These read-only widgets come pre-installed with Service Portal and receive future updates from ServiceNow. While you cannot directly modify these widgets, you can configure instance-specific options for each widget added to a page.
- Widget instances: Adding a widget to a page creates an instance that includes location, properties, and CSS specific to that instance. Multiple instances of the same widget can exist on a page, each with unique configurations. Changes to the underlying widget affect all instances, but instance-specific changes only affect that particular instance.
- Widget context menu: Holding CTRL and right-clicking a widget on a rendered portal page reveals a context menu with options such as viewing widget performance, editing instance options, opening the widget in the Page Editor or Service Portal Designer, viewing customizations, editing container backgrounds, and accessing the widget editor for advanced configuration. Access to this menu requires admin or spadmin roles.
- Custom widgets: If you need to modify a base system widget, you can copy it to create a custom widget. Custom widgets do not receive future updates from ServiceNow. Alternatively, you can develop widgets from scratch to fit unique requirements.
- Widget loading optimization: You can configure the order in which widgets load on a page, deferring non-essential widgets to improve page load times and optimize resource usage.
Key Outcomes
- Enables rapid configuration and customization of portal page content using reusable widgets.
- Provides flexibility to tailor widget instances to specific page needs without altering the original widget.
- Offers administrative tools for in-context widget management and diagnostics, enhancing operational efficiency.
- Supports the development of custom widgets to address unique business requirements beyond standard offerings.
- Improves portal performance by allowing deferred loading of widgets, enhancing user experience.
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, 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 .
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.
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 to open a sample portal page. CTRL+right-click Knowledge Base on that page.
| Option | Description |
|---|---|
| Widget performance | How long it takes for a widget to load |
| Instance options | Specify an instance of a widget. Widget 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 enables you to 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 copy base system widgets. However, copied widgets are considered custom and don't benefit from future updates to the widgets they were copied from. You can also create widgets from scratch. To learn more about copying or creating widgets, see Developing custom widgets.