Routing table

 Understanding the Routing Table in Pega Constellation 🚦

Pega Constellation is built on a cutting-edge, React-based UI architecture where everything is metadata-driven. Unlike traditional Pega UI, which handled layouts and navigation through sections and harnesses, Constellation uses a routing table to seamlessly translate user actions and URLs into the right view handlers—and ultimately, the correct React screen.

Think of the routing table as your Google Map App: Every click or navigation request takes the “destination” (user action) and maps it to the right “path” (route configuration), ensuring users always land on the right screen.

How does it work?

• When you click a button or open a page, Constellation consults the routing table to figure out.
• This process leads to a consistent, high-performance, and maintainable user experience across web, mobile, and embedded SDK apps.

Why does this matter?

• Consistency: Same URL behaves the same on all platforms.
• Performance: The app always knows exactly which handler and API to use, reducing overhead.
• Maintainability: Centralized routing logic means upgrades and new features are easier and safer to implement.

Routing flow in a Constellation: User Click → Navigation Manager → Routing Table → View Handler → DX API → React View

Whether you’re opening a case or navigating between screens, the routing table ensures the right handler calls the right API to fetch the right data—instantly updating the UI through React, with no full-page refresh.

Here is a clear, step-by-step explanation of the routing flow in Pega Constellation, suitable for sharing as content:

---

Routing Flow in Pega Constellation : Step-by-Step

Step 1: User Click When a user clicks a button, link, or opens a URL (e.g., /cases/12345/assignment), the browser doesn’t directly know which data or view to load. For example, clicking "Open Case" triggers a navigation request handled by the Constellation shell.

Step 2: Routing Table This is where the mapping starts. The routing table matches the navigation request to the right route definition by:

• Checking the URL pattern (like /cases/:caseID).
• Determining which view type to load — Case View, Assignment View, or Landing Page.
• Identifying the correct view handler that will fetch needed data and metadata. So, your click translates to: “User wants to open a case → use Case View Handler → fetch data via /cases/{ID} endpoint.”

Step 3: DX API Call Once the view handler is identified, it calls the DX API (Digital Experience API) to retrieve everything needed for rendering. The API returns:

• View metadata defining layout, fields, and components.
• Data payload with the actual case or assignment information. This is lightweight JSON, not HTML.

Step 4: React View Rendering The React engine uses the metadata and data to dynamically build the UI through the PConnect framework.

• The screen loads instantly without full-page refresh.
• Navigating to another case reuses the layout, changing only the content.

Step 5: User Sees Updated Screen The user instantly sees the correct screen. Copying and reopening the URL later triggers the same routing logic to render the updated view with the latest data.

In short: The routing table is the backbone of navigation in Pega Constellation—enabling smooth, dynamic, and maintainable UI experiences for all users.