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.

Document generation

 https://docs.pega.com/bundle/example-word-template/resource/example-word-template.pdf

https://www.techpapers.online/post/ms-word-document-generation-from-pega

The issue was that HTMLToPDF accepts isClearCache as a parameter. By default it's set to false. If I set it to true it clears cache and loads css each time, otherwise it refers to the cache and does not refer to the updated CSS.

Pega Service, Connecor

When the session state in a service package is set to Stateful, the service returns a cookie in the response with the Set-Cookie HTTP header. The cookie contains the Requestor ID of the requestor that processed the first request, with the prefix "PegaRULES." For another request to access the same session data, the external application must include the PegaRULES cookie in the header of that request. 

Subsequent request

It works even if the UserIdentifier and Passwrod not passed to the API. It works by the sticky session

REST-Service

1. Map from Clipboard doesn't accept PageList.
2. Map from Clipboard, Key as Page or Property will make the response type as XML.
3. Map from Clibpard, Key can be Parameter page.
4. Map from JSON accept Page, PageList

Connect-REST

1. Map from Clipboard Page expects XMLstream data.
2. Map from JSON expect json stream data

If the content-type header of the REST response returned from the REST endpoint indicates that the response message body does not contain text, the system handles the message as an array of bytes rather than as an array of characters. To map an array of bytes, complete the following steps:

1. In the Message data section, in the Map to field, select Clipboard.
2. In the Map to key field, enter one of the following values:

• Text property: The system converts the text property to Base64-encoded text before writing it to the clipboard.
• Java object property: The system converts the java object property to a java byte array before writing it to the clipboard.

Create case

 import javax.net.ssl.*;

import java.io.*;

import java.net.HttpURLConnection;

import java.net.URL;

import java.net.ProtocolException;

import java.net.MalformedURLException;

import javax.net.ssl.HostnameVerifier;

import javax.net.ssl.HttpsURLConnection;

import javax.net.ssl.SSLContext;

import javax.net.ssl.SSLSession;

import javax.net.ssl.TrustManager;

import javax.net.ssl.X509TrustManager;

import java.security.KeyManagementException;

import java.security.NoSuchAlgorithmException;

import java.security.cert.X509Certificate;

public class Main {

    static String createCase() throws IOException, NoSuchAlgorithmException, KeyManagementException {

        String caseId=null;

        String messageContent = "";

        BufferedReader br = new BufferedReader(new FileReader(new File("CreateCase.json")));

        String line=null;

        while((line=br.readLine())!= null){

            messageContent += line;

        }

        // Printing the message

        System.out.println(messageContent);

        // URL of the API or Server

        String url = "<<URL>>";

        URL urlObj = new URL(url);

        TrustManager[] trustAllCerts = new TrustManager[] {new X509TrustManager() {

            public java.security.cert.X509Certificate[] getAcceptedIssuers() {

                return null;

            }

            public void checkClientTrusted(X509Certificate[] certs, String authType) {

            }

            public void checkServerTrusted(X509Certificate[] certs, String authType) {

            }

        }

        };

        // Install the all-trusting trust manager

        SSLContext sc = SSLContext.getInstance("SSL");

        sc.init(null, trustAllCerts, new java.security.SecureRandom());

        HttpsURLConnection.setDefaultSSLSocketFactory(sc.getSocketFactory());

        // Create all-trusting host name verifier

        HostnameVerifier allHostsValid = new HostnameVerifier() {

            public boolean verify(String hostname, SSLSession session) {

                return true;

            }

        };

        // Install the all-trusting host verifier

        HttpsURLConnection.setDefaultHostnameVerifier(allHostsValid);

        HttpsURLConnection postCon = (HttpsURLConnection) urlObj.openConnection();

        //postCon.setSSLSocketFactory(SSLCertificateSocketFactory.getInsecure(0, null));

        //postCon.setHostnameVerifier(getHostnameVerifier());

        postCon.setRequestMethod("POST");

        // Setting the message content type as JSON

        postCon.setRequestProperty("Content-Type", "application/json");

        postCon.setDoOutput(true);

        // for writing the message content to the server

        OutputStream osObj = postCon.getOutputStream();

        osObj.write(messageContent.getBytes());

        // closing the output stream

        osObj.flush();

        osObj.close();

        int respCode = postCon.getResponseCode();

        System.out.println("Response from the server is: \n");

        System.out.println("The POST Request Response Code :  " + respCode);

        System.out.println("The POST Request Response Message : " + postCon.getResponseMessage());

        if (respCode == HttpURLConnection.HTTP_CREATED)

        {

        // reaching here means the connection has been established

        // By default, InputStream is attached to a keyboard.

        // Therefore, we have to direct the InputStream explicitly

        // towards the response of the server

            InputStreamReader irObj = new InputStreamReader(postCon.getInputStream());

            br = new BufferedReader(irObj);

            String input = null;

            StringBuffer sb = new StringBuffer();

            while ((input = br .readLine()) != null)

            {

                sb.append(input);

            }

            br.close();

            postCon.disconnect();

            // printing the response

            String strResponse=sb.toString();

            caseId=strResponse.substring(strResponse.indexOf(" ")+1,strResponse.indexOf("\","));

        }

        else

        {

            // connection was not successful

            System.out.println("POST Request did not work.");

        }

        return caseId;

    }

    private static HostnameVerifier getHostnameVerifier() {

        HostnameVerifier hostnameVerifier = new HostnameVerifier() {

            @Override

            public boolean verify(String hostname, SSLSession session) {

                HostnameVerifier hv =

                        HttpsURLConnection.getDefaultHostnameVerifier();

                return hv.verify("com.example.com", session);

            }

        };

        return hostnameVerifier;

    }

    public static void main(String[] args) throws IOException, NoSuchAlgorithmException, KeyManagementException {

        String caseId = createCase();

        System.out.println("CaseId="+caseId);

    }

}

################CreateCase.json################

{

  "caseTypeID": "ING-WB-PAM-Work-BillableAgreement",

  "content": {

    "Country":"CzechRepublic",

    "AccountDetails":{

      "AccountBIC":"INGBCZPPXXX",

      "AccountName":"NABUURS S.R.O.",

      "AccountNumber":"",

      "AccountStartDate":"20170424",

      "AccountStatus":"O",

      "AccountType":"CACC",

      "BankCode":"3500",

      "Currency":"CZK",

      "StartDate":"20170424T000000.000 GMT",

      "SubAccountType":""

    },

    "AccountIdentifiers":{

      "BBAN":"CZ1535000000001000427519",

      "Currency":"CZK",

      "IBAN":"CZ1535000000001000427519"

    },

    "GridDetails":{

      "GRIDID":"479527870",

      "IBSSRNr":"",

      "pyID":"47952787"

    }

  }

}

Constellation

 Traditional UI

1. Required deeps skills in Accessibility
2. Customization - CSS & JS broke apps, Upgrade issues. Save-as
3. Performance

Theme-Cosmos

• Templated UX for employee case workers 
• Less “Save-As” (if you stayed with our OOTB design templates) 
• Small improvements in 
• UI upgrades 
• Performance 
• Accessibility 
• Consistency across app portfolio

Constellation UI

• Remove business logic from UI - no action sets
• seamless UI upgrades
• SPA
• Accessibility
• Complete UX system minimizes the development time (ootb)
• Bring your own UI - architecture
• Customization to Configuration

Action sets orchestrates the work to perform on the server, while interacting with an assignment UI

Constellation runs in the browser, orchestrates the work on the server through DX APIs

Debug tools

Redux : Client cache

XRay : LiveUI Inspector

    PCore.getDebugger().toggleXRay(true)

GetState : Same as Redux tool

Publish/Subscribe data pages

====================

https://support.pega.com/discussion/how-notify-users-refresh-outdated-list-view-constellation-ui

Pega constellation DX component

1. Install NodeJS
2. npm i @pega/custom-dx-components
3. npx @pega/custom-dx-components@~24.2 init
4. npm run create (To create component)
5. npm run startStorybook
6. npm run buildComponent

 For easier organization and maintenance, you can group components in libraries. The component libraries can be created in different rulesets, which in turn can be used for different applications.

When you publish a component to Pega Infinity™, it creates or updates a Rule-UI-Component instance. This instance is pushed by Pega Infinity to the configured Constellation App Static Service. The Rule-UI-Component instances are exported in a RAP file for deployment to other Pega Infinity environments.When a component is published, a zipped version of the component folder is stored as a Pega Infinity Rule-UI-Component rule instance. Pega Infinity automatically pushes this component zip file to the Constellation App Static Service for access during UI rendering.

The naming convention of the component key is <organization>_<library>_<component

• organization - This value is found in the organization property of the package.json file in your project's root folder.
• library - This value is requested when the component is created and can also be set as default in the tasks.config.json file.
• name - This value is requested when the component is created.

Types of constellation DX components

Field

Allows to configure interactive UI elements such as text boxes, buttons, and sliders.

Widget

Improves usability through built-in logic and functionality. For example, the attachment widget allows users to upload documents.

• PAGE (Portal widgets) - This widget can be used only in landing pages.Example, Todo and App announcements.
• CASE (Utilities pane widgets) - This widget can be used only in case views.
• PAGE & CASE (Both) - This widget can be used in portal landing pages, and the Utilities pane for both case and data views. Example, Pulse

Layout template

Provides layouts for the fields and widgets on a form. Grid, Flex are the basic React components for layouts. Layout templates provide slots called Regions. Authors can add fields, field groups, views, widgets into the regions. 

You can create three types of Constellation DX component layout templates using the Constellation DX Component Builder:

• Details : Applying the Details template renders the child components referenced in the Regions as read-only. Example: Details of Case view and Data type, Partial views use Details template use Details template.
• Form : Forms are designed to efficiently collect data from the users of your application
• Page : Page layout templates control the layout of landing pages. 

https://github.com/pegasystems/constellation-ui-gallery

https://github.com/pegasystems/constellation-ui-gallery/releases