launchpad-ux-custom-frontend
Building a React Front-End for Pega Launchpad with the Pega React SDK
A practical guide for building custom React UIs on top of Pega Launchpad using the Pega React SDK (@pega/react-sdk-components). This approach uses the SDK's Constellation engine to handle rendering, data binding, case management, and API communication — rather than making direct DX API calls.
Before proceeding, validate that building a custom front-end is necessary. Launchpad's out-of-the-box Constellation components and templates may meet requirements without this complexity.
When implementing a front-end, proceed incrementally. Always ask what folder to create the project in, don't assume or guess the location.
Ask for validation and questions at each step to ensure that the user understands what was built and why, and to confirm that it meets their needs before moving on to the next step.
0. When to Build a Custom Frontend
Prefer out-of-the-box Constellation components and templates whenever they meet the business and UX requirements.
Consider a custom frontend only when:
- The business needs visualizations or interaction patterns not available out of the box
More from pegasystems/pega-launchpad-agent-skills
launchpad-dx-apis
Explains how to use the Create Case DX API, including scalar content payloads, reference fields, allowed fields, and when to use this pattern.
25launchpad-webembed
Explains how to embed Launchpad applications into external websites and custom front-end apps using the pega-embed web component. Covers CORS policy setup, OAuth authentication (Client Credentials and PKCE), embed attributes, theming, events, and complete code examples for React/Next.js integration.
18launchpad-ux-custom-components
Introduces Custom UX in Pega Launchpad / Constellation, when to build custom components, and what design information is needed.
11launchpad-custom-function
Custom Functions are a type of Function that extends LaunchPad with code written in Java 11, Python 3.12, or Node.js 20 via AWS Lambda. Use this skill whenever the user asks what is a custom function, what types of functions exist, how to create or extend Launchpad with custom logic, or when troubleshooting handler naming conventions (Java package.Class::method, Python file.function), signature mismatches, AWS Lambda execution limits, or timezone/null handling in date or list functions. Use when the user needs to parse Excel files, perform advanced date manipulations, integrate external libraries, or handle specialized data transformations. Use when user asks for Callable rules.
10