- /
-
- User Experiences /
- Service Portal /
- Widget
Widget
Service Portal widgets are the building blocks of portal pages
Last modified 2026-03-16
Jace Benson
Widgets are the content blocks that make up Service Portal pages. Add them via the Service Portal Designer or access all widgets at Service Portal > Widgets.
Base System vs Custom
| Type | Description |
|---|---|
| Base System | Read-only widgets that receive future updates. Configure via instance options. |
| Custom | Cloned or created from scratch. You own the code but miss future updates. |
Widget Instances
When you drag a widget onto a page, you create a widget instance — a reference with its own location, properties, and CSS. Multiple instances of the same widget can have different configurations.
Debugging with Context Menu
Ctrl+Right-click any widget on a portal page (requires admin or sp_admin role):
| Option | Purpose |
|---|---|
| Instance options | Configure this specific instance |
| Widget in Editor | Open in Widget Editor (HTML, CSS, Client Script) |
| Log to console: $scope.data | See server data in browser console |
| Log to console: $scope | See entire scope object |
| Widget performance | Check load times |
Quick Debug Trick
Inspect any widget element, then in console:
angular.element($0).scope()
This shows all variables from the client controller. Via Travis Toulson
Testing Widgets Outside the Portal
Test widgets directly on UI16 pages without building a full portal:
Widget Editor
Access via Service Portal > Widgets or from the context menu. The editor has tabs for:
- HTML Template - Widget markup
- CSS - Scoped styles
- Client Script - Angular controller
- Server Script - Data retrieval
- Demo Data - Sample data for testing