logo

NJP

UI Builder: Add Header Menu

Developing Creative Business Solutions On ServiceNow on CodeCreative | A ServiceNow Blog · Jul 14, 2021 · article

Purpose: How to add a header menu to a Portal Experience in ServiceNow UI Builder. The header menu is displayed at the top of every page in a Portal Experience. Open Experience in UI Builder Click “Menu” Click “Edit Experience Settings” Click “Navigation and Menus” Click “Advanced Footer Settings” Note: Currently the Advanced Navigation Menu Settings link is broken Complete UX Page Property form as follows: Page: current Portal Experience name Name: chrome_menu Route: leave blank Description: any text Value: [ { "value": { "label": { "translatable": true, "message": "Knowedge" } }, "children": { "action": { "label": { "translatable": true, "message": "Report an issue" }, "type": "route", "rightIcon": "chevron-right-fill", "value": { "route": "catalog", "fields": { "sysId": "3f1dd0320a0a0b99000a53f7604a2ef9" } } }, "items": [ { "value": { "label": { "translatable": true, "message": "Categories" } }, "children": { "action": { "label": { "translatable": true, "message": "Browse All" }, "type": "route", "rightIcon": "chevron-right-fill", "value": { "route": "article", "fields": { "sysId": "3020c9b1474321009db4b5b08b9a712d" } } }, "items": [ { "value": { "label": { "translatable": true, "message": "IT" }, "type": "route", "value": { "route": "article", "fields": { "sysId": "3020c9b1474321009db4b5b08b9a712d" } } } }, { "value": { "label": { "translatable": true, "message": "Benefits" }, "type": "route", "value": { "route": "article", "fields": { "sysId": "3020c9b1474321009db4b5b08b9a712d" } } } } ] } } ] } } ] Click Submit Close the current browser tab to return to the UI Builder browser tab Close portal settings Click “Open” to test page Special thanks to Ninja Bytes

View original source

https://codecreative.io/notebook/ui-builder-add-header-menu/