Background
Now experience is entirely based on components and components rely on JSON input to surface content. During this tutorial, we will see the power of JSON inputs and how it creates wonders for the components.Throughout the tutorial, we will talk about Navigation Menu component which comes with default Portal App Shell.
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_menu
- Type – json
- Route – blank (This means property is available to all the pages)
- Description – Navigation menu
- Value – Copy following JSON
[
{
"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"
}
}
}
}
]
}
}
]
}
}
]- Copy JSON into nice JSON Editor.
- Observe the hierarchy of the JSON and you notice it is pretty simple to understand when you compare with results. Basically they are links which takes you to the route you define. (Routes are nothing but the pages we are going to create in future. In the above example we are using article which we are going to create in subsequent posts).
- You can have a type called External with following JSON as value which takes you to any external site.
"value": {
"href": "www.servicenowninjas.blog"
}- End result should be something like this.
Great!! We have successfully added a Navigation menu to our Panda Tech portal