Chapter 02
Constellation
Here is the one idea that makes Constellation make sense: Pega does not send your browser a finished screen. It sends a description, and your browser draws it.
Pega 24 – 26
Words you will meet
- DX API
- JSON metadata
- React
The big idea
The server describes. The browser draws.
Think of a recipe card against a plated meal. In older Pega applications the server did the cooking and sent a finished screen. In Constellation, the server sends the recipe: “a form with these three fields and a Submit button.” Your browser is the cook that turns it into something you can see.
The recipe is written in JSONA plain-text way of writing structured data, with names and values, that every programming language can read., and it travels through a front door called the DX APIPega's Digital Experience API: the doorway the browser uses to ask Pega for cases, screens and data.. The cook is a set of ReactA very popular JavaScript library for building screens out of small reusable pieces. components from Pega's design system, called Cosmos.
Watch
One round trip, step by step.
Follow a single click all the way to Pega and back. Use Next, or press play to watch it run.
Step 1 of 7 · You
You click “Open case”
Nothing is drawn yet. The browser only knows what you asked for, not what the screen should look like.
Nothing is sent yet
// the click is a request in waiting
Play
Change the description. Watch the screen.
This is the part to feel in your hands. On the left is a tiny description, the kind of thing Pega sends. On the right is what the browser draws from it. Change something on the left.
1 · What Pega sends (the description)
{
"type": "button",
"label": "Send for approval",
"disabled": false
}2 · What the browser draws
The shape above is simplified so you can read it. The real response is bigger, but the idea is the same: Pega describes, the browser draws.
Why it matters
This is where your component plugs in.
Because the browser draws from descriptions, Pega can say “draw a text box here” and your browser looks up which piece of code knows how. Constellation ships with a built-in piece for every standard control.
A custom DX component is simply a new piece of code you hand to the browser, so that when a description names yours, yours is the one that draws. Nothing mystical: a React component, a settings file that tells Pega what it is, and a way to publish both.
First, though, a map of the vocabulary: what exactly is a view, a template, a field?
Your turn
Questions and comments
Stuck on something, or have a thought? Write it here. To talk about one part, use the Comment button under that section's heading.