How can I customize the Portal App Shell header, or change the App Shell after Experience creation?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
2 hours ago
Hello,
I am using Portal App Shell in UI Builder on a Zurich instance.
The Portal App Shell header area is currently displayed as a blank area above the page content. I do not intend to remove the header. I would like to use it as a branding header by displaying a company logo and applying a background color.
The original value of the chrome_header UX Page Property is:
{
"privatePage": {
"userPrefsEnabled": false,
"searchEnabled": false,
"currentScreenLinkConfiguration": {},
"globalTools": {
"collapsingMenuId": 0,
"primaryItems": [],
"secondaryItems": []
}
},
"publicPage": {
"menuEnabled": false,
"searchEnabled": false,
"logoRoute": {},
"actionButtons": []
}
}
I have already tried the following:
- Modifying the JSON value of the chrome_header UX Page Property
- Adding a logo property such as:
"logo": {
"imageSrc": "/approval_request_logo.svg",
"altText": "Approval Portal"
}
- Copying the chrome_header configuration from Service Operations Workspace
- Checking the Experience and Parent App theme settings
However, the company logo and background color were not applied.
I also confirmed that the Portal App Shell Composition contains the sn-canvas-header element, so the header area appears to be generated by the App Shell itself.
Could you please advise on the supported way to:
1. Display a custom company logo in the Portal App Shell header
2. Change the header background color
3. Use the header as a branding bar without affecting the page content below
My understanding is that the App Shell selected when creating an Experience cannot be changed afterward.
If Portal App Shell does not support the required branding customization, would I need to create a new Experience using a different App Shell?
If so, is there a supported way to reuse, copy, or migrate the pages and configurations from the existing Experience, rather than rebuilding everything from scratch?
Thank you.
- Labels:
-
UI Builder : Next Experience