Using portal widgets
Summarize
Summary of Using portal widgets
Portal widgets are essential for defining the content of your Service Portal pages. You can utilize base system widgets, clone them, or develop custom widgets to tailor user experiences. Adding widgets is straightforward with the Service Portal Designer, allowing you to search and drag widgets onto your page easily.
Show less
Key Features
- Base System Widgets: Read-only widgets that receive future updates. You can configure instance options for each widget added to a page.
- Widget Instances: Each time you add a widget, a unique instance is created, allowing for individual properties and styles while still being linked to the base widget.
- Widget Context Menu: Access additional configuration options by CTRL+right-clicking a widget on the rendered page, provided you have the admin or spadmin role.
- Custom Widgets: You can clone or create widgets from scratch, though cloned widgets won't receive future updates from their original versions.
Key Outcomes
By effectively using portal widgets, you can create personalized and dynamic user experiences in your Service Portal. Configuration options allow for flexibility, while the context menu enhances control over widget instances. Understanding how to manage both base and custom widgets ensures that your portal remains current and aligned with your business needs.
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.