Question
SIEMENS
IN
Last activity: 23 Jun 2025 6:09 EDT
How Can we Customize portal header in Constellation Applications
We have a requirement to use Custom DX Components in Constellation header. Unfortunately i do not see any options right now. Any Ideas?
Pegasystems Inc.
CA
The link below could help you to explore on the possibilities to extend the portal header for your requirements(watch from 1:20 onwards). However, it's not a recommended best practice to customize the portal header.
https://community.pega.com/event/clsa-community-advanced-constellation-whats-new-24
SIEMENS
IN
Thanks for sharing the details. There are two options available based on recommended video:
- pyPortalIcon: This allows us to add specific code to the portal, but it doesn't give us control over where the code can be loaded like next to global search or profile icon etc.
- pyC11CustomFonts.css: This is primarily used for customizing fonts and backgrounds.
Do you have any insights on how to customize elements next to the global search or profile icon?
Altimetrik
IN
To customize the portal header in Pega Constellation to display the environment type (such as Dev, QA, or Prod), you can start by creating an Application Setting, for example EnvironmentType, and assign it a value appropriate to each environment. Then, navigate to App Studio → Channels & Interfaces, select your portal, and within the JSON configuration of the header, reference the setting using @settings.EnvironmentType to display it dynamically. If the header configuration isn’t immediately visible or explicitly named “Header,” use the Live UI tool to inspect the header section and locate the component or shell responsible for rendering it. In some cases, it may be part of a shared layout or navigation structure. For more advanced requirements, such as dynamic fetching or interactive UI elements, you can create a custom React component using the Constellation SDK, and retrieve the environment type via a data page or REST API, then include it in your custom header. As an alternative for simpler use cases, you can use theming or branding options to add a styled environment label near the header without altering the structure directly.
SIEMENS
IN
Thanks for sharing the information. Could you please guide me on locating the JSON configuration for the header in Constellation?
We intend to create a custom DX component and include it in the header. Unfortunately, we are unable to find how to customize the header in Constellation and incorporate the DX component into it.