Alternate Design System for Portal

User Experience
, , , ,
1

When configuring a portal in the App Studio, you have the option of activating the “Use alternate design system” checkbox. If the checkbox is activated, a URL is expected.
What exactly is this checkbox for and what kind of URL is expected?

Does anyone already use an alternative design system?

2

@FranziskaFink The “Use alternate design system” checkbox in Pega App Studio allows you to configure a portal to use a custom design system instead of the default Pega Constellation design system. When you enable this option, you need to provide a URL, which typically points to resources like a stylesheet (CSS), JavaScript file, configuration file (e.g., JSON), or custom web component libraries. This URL helps load the external design system dynamically at runtime, allowing you to replace the default styles and components with your custom design. Organizations use this feature to align their applications with corporate branding, integrate third-party frameworks like Bootstrap or Material Design, or implement advanced UI components. While it provides flexibility, it’s important to ensure compatibility with Pega’s structure, optimize performance, and test thoroughly to avoid issues. By leveraging this option, you can achieve a unique, branded look and feel while still using Pega’s powerful backend capabilities

3

@Sairohith Assuming I have downloaded the Constellation SDK from Angular and customized it to our needs, how do I reference this in the portal?

4

@FranziskaFink To use your customized Constellation SDK for Angular in the portal, first, host your modified SDK on a web server or hosting service, such as AWS S3, Azure, or an internal server, making it accessible via a URL. In Pega App Studio or Dev Studio, go to the portal configuration, enable the “Use alternate design system” checkbox, and provide the URL pointing to your hosted SDK (e.g., https://your-domain.com/custom-sdk/main.js). Ensure that your SDK is set up to communicate with Pega’s runtime API for fetching data and rendering components. After configuring the portal, test thoroughly to confirm that the custom UI works as intended and integrates seamlessly with Pega. Also, maintain version control for your SDK to ensure compatibility with future Pega updates. If needed, implement a fallback mechanism to revert to the default design system in case of issues. This setup ensures your portal uses the customized design while leveraging Pega’s backend.

5

@Sairohith Looking at the architecture setup, have a few questions:

  • Does this also interact with Pega CDN and appstatic services? Can this be achieved without either of those?
  • Does this also allow to use an alternate design system (so not react) for Pega native portals (ones configured in Channels & Interfaces) and within App Studio?