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.
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.”
- View metadata defining layout, fields, and components.
- Data payload with the actual case or assignment information. This is lightweight JSON, not HTML.
- The screen loads instantly without full-page refresh.
- Navigating to another case reuses the layout, changing only the content.

