Week 9: Service Portal Architecture: Portals, Pages & Rows

1. What Service Portal Is

Everything up to this point has lived in the classic UI — the interface built for agents. Service Portal is a separate, fully custom front-end framework for building end-user-facing experiences: self-service catalogs, knowledge bases, status dashboards, anything you'd want to look and behave nothing like the classic agent workspace.

Structurally, a portal is a tree: a Portal record contains one or more Pages, each page is built from Rows containing Columns containing Containers, and containers hold Widgets — the actual units of UI and logic you'll spend the next six weeks building.

2. Portals, Pages, Rows, Columns & Containers

conceptual structure

Portal ("Employee Self-Service")
└── Page ("Homepage")
    └── Row
        ├── Column (width: 8/12)
        │   └── Container
        │       └── Widget: "My Open Requests"
        └── Column (width: 4/12)
            └── Container
                └── Widget: "Quick Links"

This is a Bootstrap-style 12-column grid system underneath — familiar if you've worked with Bootstrap or any similar grid before. A row can hold multiple columns side by side; each column's width (in twelfths) determines its share of the row's horizontal space.

3. The Service Portal Designer

Application Navigator → Service Portal > Portals lists existing portals (the platform ships one named sp out of the box); opening one and clicking "Open Designer" gives a drag-and-drop editor for arranging rows, columns and widgets on a page without hand-editing records. Under the hood, every drag-and-drop change is still just writing rows to the sp_page, sp_row, sp_column and sp_container tables — the designer is a UI over the same table structure you could edit directly if you needed to.

4. Why Service Portal Still Runs on AngularJS 1.5

Service Portal launched years ago on what was then a current framework — AngularJS 1.x — and ServiceNow has kept the underlying framework stable ever since rather than doing a breaking rewrite, since Service Portal implementations across thousands of customer instances depend on it not changing shape under them. That means the concepts you're about to learn — $scope, directives, two-way binding, the digest cycle — are AngularJS 1.x concepts, not modern Angular (2+) concepts, even though the vocabulary overlaps.

This is a deliberate, useful detour

If your instinct is "why learn an old framework," the honest answer is: because this specific old framework is still what tens of thousands of live ServiceNow portals run on, and the platform's own newer alternative (UI Builder, covered in Week 22) hasn't fully replaced it yet. Understanding both, and how they differ, is exactly the kind of range that makes a ServiceNow developer with an Angular background valuable.

5. Hands-on Exercise

Hands-on

Build a portal and a page from scratch

Requirements:

Create a new Portal record named something like "Learning Portal," cloning the out-of-box sp portal's theme as a starting point.
Open the Designer and add a new page called "Dashboard."
Build a layout: one row with two columns (8/12 and 4/12 split), each containing an empty container.
Drag any two out-of-box widgets (e.g. "Bookmarks" and "Featured Items Carousel") into the two containers, just to see real widgets render.
Load the portal's public URL and confirm your two-column layout renders correctly at desktop width, then resize the browser narrow and observe how the columns respond.

6. Knowledge Check

Four quick questions. Expand each to check your answer.

What is Service Portal, and how is it different from the classic UI you've used through Week 8?

Service Portal is a separate, fully custom front-end framework for end-user-facing experiences — self-service catalogs, dashboards, knowledge bases — distinct from the classic UI built for agents. Where the classic UI's forms and lists are auto-generated from table dictionaries, Service Portal pages are hand-assembled from rows, columns, containers and widgets.

What is the structural hierarchy from a Portal down to an actual widget?

Portal contains Pages, each Page is built from Rows, Rows contain Columns, Columns contain Containers, and Containers hold Widgets — the actual units of UI and logic. It's a Bootstrap-style 12-column grid underneath, with column widths expressed in twelfths of a row's width.

Why does Service Portal still run on AngularJS 1.5 instead of a newer framework?

ServiceNow has kept the underlying framework stable since launch rather than doing a breaking rewrite, because thousands of live customer portals depend on it not changing shape underneath them. The platform's newer alternative, UI Builder, exists alongside it rather than having fully replaced it.

What's the practical implication of AngularJS 1.5 (not modern Angular 2+) being the framework underneath widgets?

The concepts and vocabulary you'll learn for widgets — $scope, directives, two-way binding, the digest cycle — are AngularJS 1.x's, which overlap in name but differ in mechanics from modern Angular's component model, dependency injection and change detection. Prior Angular experience is a genuine head start on the concepts, but the specific APIs need to be learned as their own thing.