Component hierarchy JSON representation
A page is typically built up as a hierarchy of components. This hierarchy is serialized as a flattened list of all components, each with a unique identifier as name.
For example, a page component hierarchy with a parent and two child components would be serialized as follows:
"root":{
"$ref":"/page/uid1"
},
"page":{
"uid1":{
"id":"r3",
"links":{
...
},
"meta":{
...
},
"name":"homepage",
"type":"component",
"componentClass":"org.hippoecm.hst.core.component.GenericHstComponent",
"children":[
{
"$ref":"/page/uid2"
},
{
"$ref":"/page/uid3"
}
]
},
"uid2":{
"type":"component"
...
},
"uid3":{
"type":"component"
...
}
}
In the example above, uid1 is the root component as specified by the JSON reference in the root top level object. The uid1 component's children property contains JSON references to the two other component objects in the flattened list, uid2 and uid3.
Component parameters
A component can have configuration parameters. Parameters which are reflected by the Define Configuration Parameters for Components are serialized in the paramsInfo property of a component. Residual parameters are serialized in the params section.
For example:
"root":{
"$ref":"/page/uid1"
},
"page":{
"uid1":{
"id":"r3",
"type":"component",
"links":{
...
},
"meta":{
"paramsInfo" : {
"pageSize" : "5"
},
"params" : {
"color" : "red"
}
},
Component ParamsInfo for referenced content items
If paramsInfo contains a reference to a content item, that content item will be serialized as separate object in the page representation and the parameter value will be serialized as a JSON reference to that object.
"page" : {
"uid1":{
"meta":{
"paramsInfo" : {
"relPath" : "/page/uid6"
"absPath" : "/page/uid6"
}
}
},
"uid6":{
"type":"imageset"
...
}
}
This is important for Experience Page Documents, since those typically have a set of components which reference other documents, banners, and ecommerce products to be included.
Content items referenced by components
If a component has a reference to a menu or content item, that menu or content item gets serialized flattened as well. If multiple components have a reference to the same menu or content item, they all get the same reference and the document gets serialized only once.
For example:
"root":{
"$ref":"/page/uid1"
},
"document":{
"$ref":"/page/uid3"
},
"page":{
"uid1":{
"id":"r3",
"links":{
"self":{
"href":"https://localhost/site/resourceapi?_hn:type=component-rendering&_hn:ref=r3",
"type":"external"
}
},
"meta":{
"definitionId":"hst:pages/homepage",
"params":{
}
},
"name":"homepage",
"type":"component",
"componentClass":"org.hippoecm.hst.core.component.GenericHstComponent",
"children":[.......],
"models" : {
"menu" : {
"$ref" : "/page/uid2"
},{
"document" : {
"$ref" : "/page/uid3"
},
"news" : {
"$ref" : "/page/uid4"
},
"news-again" : {
"$ref" : "/page/uid4"
},
}
},
"uid2":{
"type":"menu"
...
}
"uid3":{
"type":"document"
...
},
"uid4":{
"type":"document"
...
}
}
Content embedded in a component
If a component is page-specific and has embedded content, the embedded content will be serialized as a separate content item and referenced from the component's content property, as in the following example:
{
...
"page":{
"uid1":{
"id":"p1_p2_p1_p2",
"links":{
...
},
"meta":{
...
},
"name":"titleandtext1",
"label":"Title & text",
"type":"container-item",
"ctype":"TitleAndText",
"componentClass":"org.hippoecm.hst.component.support.bean.dynamic.BaseHstDynamicComponent",
"content":{
"$ref":"/page/uid2"
}
},
...
"uid2":{
"type":"componentcontent",
"data":{
"name":"titleandtext-a2b2",
"displayName":"titleandtext-a2b2",
"text":{
"contentType":"hippostd:html",
"value":"<p>Lorem ipsum</p>"
},
"title":"",
"contentType":"brxsaas:titleandtext"
}
},
...
}
}
Component ctype
A ctype field can be present in the serialized JSON for a component. The ctype typically is useful for an SPA to 'know' what kind of component it is dealing with. The ctype can be used as the contract between the SPA and the backend components.