UI Builder - How to get rid of blank header?

kyle51
Tera Contributor

Hello,

 

I'm currently working on a UI Builder experience. I wasn't the original creator of the experience, but it was created as a "Portal App Shell". Ever since I've been working on it, I have had 55 pixels of whitespace at the top, which is identified as "sn-canvas-header-nav". Not only can I not get rid of it, but I also can't seem to populate it with anything. I've tried modifying the chrome_header and chrome_menu records, but it has no change at all.

 

Can anyone help me with just completely getting rid of this blank header? Thank you!

 

Screenshot 2023-10-03 at 3.15.22 PM.png

3 REPLIES 3

Fernando K
Kilo Sage

Hi everyone,

I realize this is an older thread, but I came across it while working on a similar use case—a simple game-related UI Builder portal where I don’t currently need a menu.


I tried several settings in UI Builder and modified the chrome_header and menu records as you did, but the header remained blank. I eventually discovered that the sn-canvas-header-nav is inserted directly by the app shell macroponent—in this case, the Portal App Shell.

Here’s the workaround I implemented (until I find a better way and/or decide I want a menu again):

  1. Locate the Portal App Shell:
    In the sys_ux_macroponent table, find the out-of-the-box (OOTB) "Portal App Shell" definition.

  2. Create a Copy:
    Open the record and use Insert and Stay to create a copy (ensure it’s in your application scope).

  3. Modify the Composition:
    In your copied record, edit the Composition field and remove the content from around lines 34–206 (which defines the sn-canvas-header macroponent). Save your changes.

  4. Update the UX Application Record:
    Navigate to your UX Application record (the corresponding sys_ux_page_registry record that contains your chrome_header UX properties). Change the App Shell UI reference from "Portal App Shell" to the sys_id of your modified app shell (i.e., the copy without the header menu).

  5. Handle Read-Only Fields:
    To update the App Shell UI sys_id (which is read-only), I temporarily cleared the admin panel field (setting it to “table workspace” and document “none”). I then used SN Utils to update the field, saved the record, and finally restored the admin panel setting back to UX App Configuration.

Hope this workaround helps anyone facing a similar issue, or someone might post an easier way to remove it. 🙂

Curtis7
Tera Contributor

Thanks @Fernando, this worked like a charm.

Jonas Svensson
Tera Expert

Hello!

 

I found another way of getting rid of the header:

 

  1. Create an experience using the UXR Base Experience Shell
  2. View the experience settings (or open it up in sys_ux_page_registry)
  3. Advanced settings
  4. Create a new UX Parent Application in sys_ux_app
    1. Name: Something
    2. App Shell Root UI: UXR Base Unified AppShell
    3. Base theme: Polaris
    4. Leave the rest of the fields blank
  5. Change Parent App to your new UX Parent Application
    It seems like you also could to use the OOTB Parent App "Playbook Portal App" if you don't want to create your own. I don't know if it may have any other effects though.