Add navigation menu for catalog item
For this demo, I have added one more navigation menu for the catalog, you can copy the following JSON and paste it to your page property for the chrome_menu we created in the last tutorial. Once you add this, you will have one more navigation menu for Catalog.
[
{
"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"
}
}
}
}
]
}
}
]
}
},
{
"value": {
"label": {
"translatable": true,
"message": "Request"
}
},
"children": {
"action": {
"label": {
"translatable": true,
"message": "Request something else"
},
"type": "route",
"rightIcon": "chevron-right-fill",
"value": {
"route": "catalog",
"fields": {}
}
},
"items": [
{
"value": {
"label": {
"translatable": true,
"message": "Popular items"
}
},
"children": {
"action": {
"label": {
"translatable": true,
"message": "Browse All"
},
"type": "route",
"rightIcon": "chevron-right-fill",
"value": {
"route": "catalog",
"fields": {}
}
},
"items": [
{
"value": {
"label": {
"translatable": true,
"message": "External Monitor"
},
"type": "route",
"value": {
"route": "catalog",
"fields": {},
"params": {
"sysId": "e1be6dcb4f7b4200086eeed18110c74c"
}
}
}
},
{
"value": {
"label": {
"translatable": true,
"message": "New Email Account"
},
"type": "route",
"value": {
"route": "catalog",
"fields": {},
"params": {
"sysId": "186d917a6fab7980575967ddbb3ee4f2"
}
}
}
}
]
}
}
]
}
}
]There few snippets I would like to highlight from the JSON above.
"action": {
"label": {
"translatable": true,
"message": "Browse All"
},
"type": "route",
"rightIcon": "chevron-right-fill",
"value": {
"route": "catalog",
"fields": {},
"params": {}
}
},In the above snippet, we have a route catalog with no fields. We are going to show the list of all the catalog items we have available.
"items": [
{
"value": {
"label": {
"translatable": true,
"message": "External Monitor"
},
"type": "route",
"value": {
"route": "catalog",
"fields": {
"sysId": "e1be6dcb4f7b4200086eeed18110c74c"
}
}
}
},
{
"value": {
"label": {
"translatable": true,
"message": "New Email Account"
},
"type": "route",
"value": {
"route": "catalog",
"fields": {
"sysId": "186d917a6fab7980575967ddbb3ee4f2"
}
}
}
}
]In the above snippet, we have a route catalog with fields. We are going to show the catalog item form to submit. In the next tutorial, we are going to create a new page to handle route catalog.
Great!! We have successfully added a Navigation menu for the catalog to our Panda Tech portal