Conversation
SIEMENS
IN
Last activity: 11 Aug 2025 2:36 EDT
How to Customize portal header in Constellation Applications to include Custom DX components
We have a requirement to customize the Constellation portal header for the following reasons, and would appreciate your expert guidance on how best to proceed:
- To display dynamic date and time
- To include a Help Menu that provides quick access to resources such as the ticketing system, application documentation, and other support links.
We have already reached out to the Pega Community for input but have not yet received a definitive solution. For reference, here is the Link to our post.
Pegasystems Inc.
GB
@HarshaKonduru there is a reason you are having difficulty finding this answer - this is not an authorable configuration. Editing the JSON Views of Pega portals can lead to unintended consequences and future maintenance problems.
- If you start adding things, you'll likely break the accessibility and responsiveness of the portal header.
- I've recently been involved in a project where we attempted to break apart the out of the box portal and it lead to all sorts of bugs, so I'm not just saying this but have lived it.
IF your use case requires your own portals with your own design system, then you might want to explore SDK route. You could then take full ownership of the portal, accessibility and resposiveness for the features you want to add.
- https://docs.pega.com/bundle/constellation-sdk/page/constellation-sdks/…
- https://academy.pega.com/topic/constellation-sdks/v2
I'd strongly advise against treating Constellation like UI Kit, where customisation of Pega provided sections like this portal header were common place.
@HarshaKonduru there is a reason you are having difficulty finding this answer - this is not an authorable configuration. Editing the JSON Views of Pega portals can lead to unintended consequences and future maintenance problems.
- If you start adding things, you'll likely break the accessibility and responsiveness of the portal header.
- I've recently been involved in a project where we attempted to break apart the out of the box portal and it lead to all sorts of bugs, so I'm not just saying this but have lived it.
IF your use case requires your own portals with your own design system, then you might want to explore SDK route. You could then take full ownership of the portal, accessibility and resposiveness for the features you want to add.
- https://docs.pega.com/bundle/constellation-sdk/page/constellation-sdks/…
- https://academy.pega.com/topic/constellation-sdks/v2
I'd strongly advise against treating Constellation like UI Kit, where customisation of Pega provided sections like this portal header were common place.
- You could consider making help a landing page to work with the out of the box design system.
- I don't have an alternative for the clock, inside pega, most operating systems and mobile devices can show people the time without need to embed this.
- You could look at web embed Constellation if you need the app to live inside a larger design system.
Caveats aside, this article might be of interest to you. I'd still strongly advise against it.
SIEMENS
IN
Thank you for the detailed insights and references.
I’d like to share that I have already explored all the options mentioned, including the SDK route and the web embed approach. I understand the complexities and limitations involved, and I fully agree that editing the JSON views of Pega portals is not a recommended or supported configuration.
There is indeed a reason why this solution is difficult to find—this is not an authorable or intended customization path. As you rightly pointed out, modifying core components like the portal header can lead to significant issues with accessibility, responsiveness, and long-term maintainability.
I appreciate your guidance and the shared resources. They reaffirm the conclusions I’ve reached through my own investigation and experience.
I had hoped someone might suggest a new or different solution here if one exists.
Updated: 16 Jul 2025 7:28 EDT
Pegasystems Inc.
GB
@HarshaKonduru you might also want to explore the Self Service Portal. The name can be misleading, if you've tackled "external user self service" use cases before but this is meant to be more intuitive for occasional users of your application.
https://docs.pega.com/bundle/platform/page/platform/user-experience/cre…
This is just the portal in 24.2.2 BUT in '25 you can start to tailor the case UX for these portals as well, so trying to get more and more focused on these occasional users who need extra guidance or help.
Not explicitly your UI requirement but could be used to achieve your business outcome - "make the experience easier for less experienced personas"
SIEMENS
IN
@MarcCheong Thanks, We are aware of this capabilities. However unfortunately it doesn't support our requirement
Updated: 15 Jul 2025 7:29 EDT
Pegasystems Inc.
PL
@HarshaKonduru agreeing with what Marc said.
If you still want to customize while keeping ootb portal, then Java Script manipulating DOM is your only option. Not elegant but in certain situation would do the trick like adding date and time. Adding Help menu will be challenging in terms of accessibility and styling.
SIEMENS
IN
Dear @Kamil Janeczek we already tried manipulation DOM and it has several difficulties rendering elements properly. Hence we don't think as good option either for our requirements.
Pegasystems Inc.
PL
@HarshaKonduru can you elaborate what issues you faced?
SIEMENS
IN
@Kamil Janeczek We used pyPortalIcon rule to inject custom JavaScript for the clock, but it didn’t allow us to manipulate the DOM as intended, since the clock was rendered before the portal rendering began. Do you know of a better place to inject code that needs to interact with the DOM to render complete DX components—ideally without relying on JavaScript and encountering these kinds of issues?
Pegasystems Inc.
PL
@HarshaKonduruI think there are a lot of cons of this solution. You can hook up your own JS but are able to work on already generated DOM, so there might be some issues, like flickering UI etc.
It is not an ideal solution, never said that :)
And exactly as you are point out with the issue with clock being render before the portal. You need to listen for and event telling you that DOM is ready and then run your code to generate clock. The issue you might see is the layout shift after adding clock to DOM.