Navigate to experience
- Navigate to Now Experience Framework > Experiences.
- Open the Experience for Panda Tech.
Create new page property for the header
- Goto Related list > UX Page Properties
- Click New.
- Fill in the fields, as appropriate.
- Page – Leave it as is (This is the reference to experience record)
- Name – chrome_header
- Type – json
- Route – blank (This means the property is available to all the pages)
- Description – Default header for Panda Tech
- Value – Copy the following JSON
{
"privatePage": {
"searchEnaabled": true,
"userPrefsEnabled": true,
"logoRoute": {
"type": "route",
"value": {
"route": "home",
"fields": {}
}
},
"globalTools": {
"collapsingMenuId": 0,
"primaryItems": [
{
"label": "UserMenu",
"icon": "user",
"type": "menu",
"primaryDisplay": "icon",
"value": {
"children": [
{
"condition": {
"roles": [
"admin"
]
},
"label": {
"translatable": true,
"message": "Configure"
},
"type": "navigation",
"position": 200,
"primaryDisplay": "none",
"value": {
"type": "external",
"opensWindow": "true",
"value": {
"href": "/nav_to.do?uri=/sys_ux_app_config.do?sys_id=c5bbbde2c3121010f46b42583c40dd06"
}
}
},
{
"label": {
"translatable": true,
"message": "Logout"
},
"position": 500,
"type": "navigation",
"value": {
"type": "AUTH_ROUTE_BINDING",
"binding": {
"address": [
"logout"
],
"params": {
"reload": true
},
"default": "/logout.do"
}
}
}
]
}
}
],
"secondaryItems": []
}
},
"publicPage": {
"menuEnabled": true,
"logoRoute": {
"type": "route",
"value": {
"route": "home",
"fields": {}
}
}
}
}Now this might seem confusing at first but if you look at it closely when we see the result, most of them would make sense. We will have one more post around where all of these are defined. In a nutshell, these are all defined in the portal app shell we selected when we created our experience in this post
- Click Save
- End result should be something like this. (You should see search bar and user Avatar with menu)
Add Theme
- Navigate to Now Experience Framework > Experiences.
- Open the Experience for Panda Tech.
- Open Admin Panel record
- Goto Related list > Themes > New
- Fill in the fields, as appropriate.
- Name – Panda tech theme
- Description – Demo theme for panda tech
- Extends – Default
- Active – true
- Click Save
Add header logo
- Openthe theme record we created.
- Goto Related list > UX Theme Assets > New.
- Fill in the fields, as appropriate.
- Asset – Create new record
- Category – image
- Name – panda_tech_logo
- Attachment – Attach the image below
- Asset properties
- Asset – Create new record
{ "position": "header_logo"}
- Click Save
- End result should be something like this.
Great!! We have successfully added a header and logo it our Panda Tech portal.