Using portal widgets
Summarize
Summary of Using portal widgets
Widgets define the content and functionality of your Service Portal pages. You can use built-in base system widgets, clone and customize them, or create entirely new custom widgets to meet your specific business requirements. Widgets are added to pages through the Service Portal Designer by searching and dragging them onto the page, and all widgets are accessible via the platform’s widget records.
Show less
Key Features
- Base system widgets: These are provided read-only to ensure you receive future updates. You can configure instance-specific options for each widget added to a page without altering the base widget itself.
- Widget instances: Each widget added to a page creates an instance with unique location, properties, and CSS. Editing the base widget updates all instances, but individual instances can be customized separately to behave differently.
- Widget context menu: By CTRL+right-clicking a widget on a rendered portal page, users with admin or spadmin roles can access configuration options such as viewing performance, editing instance options, opening the widget in the Page Editor or Widget Editor, and more. This menu aids quick diagnostics and customization.
- Custom and cloned widgets: While base widgets are read-only, you can clone them to create custom widgets tailored to your needs. Cloned widgets, however, do not receive future updates from the original base widgets. You can also develop widgets from scratch for full control.
- Logging for debugging: Use the $scope.data and $scope objects to log data passed between server and client scripts to the browser console, aiding in widget development and troubleshooting.
Practical Application
ServiceNow customers can efficiently build and tailor Service Portal pages by leveraging base widgets for stable, update-friendly components and customizing widget instances to suit specific page needs. The widget context menu provides quick access to configuration and diagnostic tools, streamlining portal management. For unique business requirements, cloning or developing custom widgets enables full flexibility.
Understanding the distinction between base widgets and widget instances ensures that customers can maintain update compatibility while still fine-tuning individual widget behavior and appearance on their portals.
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 .
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. 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.