Dynamic Menu Component
Class Name
The Dynamic Menu Component is implemented by the class
org.hippoecm.hst.component.support.bean.dynamic.MenuDynamicComponent
Purpose
This class provides all of the functionality of the Base Dynamic Component and extends it to render the contents of a single selected site menu tree.
Component Parameters
|
Name |
Type |
Default value |
Description |
|
* |
(Any other than JcrPath) |
- |
Parameter name and value will be rendered via the Page Model API |
|
* |
JcrPath |
- |
This component will process all parameters of this type, lookup the referenced document by its path, and include its content in the Page Model API. If the path references any node other than a document, only the path itself will be rendered. |
| menu | String | - | The JCR node name of a single site menu within the current channel. This field is rendered via a dropdown in the Channel Manager, which is out-of-the-box configured to use a specific ValueListProvider when populating its values, namely it uses the menu-list-provider. This provider is implementeed by org.hippoecm.hst.platform.provider.MenuListProvider, which populates the dropdown with the available HstSiteMenus from the preview channel. |
Below you can see how the MenuDynamicComponent renders its output in the JSON response in Page Model API. The menu that this component has been configured to use is referenced inside the models/menu object, and shown as well in the example below. This example menu has the following structure, as reflected in the response json as well:
- Home
- Contact
- About us
- Locations
- Search
{
"page": {
"uid0": {},
...
"uid3": {
"id": "r22_r1_r2",
"links": {
"self": {
"href": "http://localhost/site/resourceapi?_hn:type=component-rendering&_hn:ref=r22_r1_r2",
"type": "external"
}
},
"meta": {
"paramsInfo": {
"menu": "main"
},
"params": {}
},
"name": "examplemenucomponent",
"label": "Example Menu component",
"type": "container-item",
"componentClass": "org.hippoecm.hst.component.support.bean.dynamic.MenuDynamicComponent",
"models": {
"menu": {
"$ref": "/page/uid6"
}
}
},
...
"uid6": {
"type": "menu",
"links": {},
"meta": {},
"data": {
"name": "main",
"siteMenuItems": [
{
"depth": 0,
"repositoryBased": false,
"properties": {
"hst:referencesitemapitem": "root"
},
"name": "Home",
"parameters": {},
"childMenuItems": [],
"links": {
"site": {
"href": "/",
"type": "internal"
}
}
},
{
"depth": 0,
"repositoryBased": false,
"properties": {
"hst:referencesitemapitem": "contact",
},
"name": "Contact",
"parameters": {},
"childMenuItems": [
{
"depth": 0,
"repositoryBased": false,
"properties": {
"hst:referencesitemapitem": "contact/about-us"
},
"name": "About us",
"parameters": {},
"childMenuItems": [],
"links": {
"site": {
"href": "/contact/abous-us",
"type": "internal"
}
}
},
{
"depth": 0,
"repositoryBased": false,
"properties": {
"hst:externallink": "http://www.example.com"
},
"name": "Locations",
"parameters": {},
"childMenuItems": [],
"links": {
"site": {
"href": "http://www.example.com",
"type": "external"
}
}
}
],
"links": {
"site": {
"href": "/contact",
"type": "internal"
}
}
},
{
"depth": 0,
"repositoryBased": false,
"properties": {
"hst:referencesitemapitem": "search"
},
"name": "Search",
"parameters": {},
"childMenuItems": [],
"links": {
"site": {
"href": "/search",
"type": "internal"
}
}
}
...
]
}
}
}
}