Regions
Contents
Usage
Regions are declared statically within other components. Below is a sample definition of a page component with a single region main
:
Example - page component with a single region
<page>
<display-name>The main page</display-name>
<form/>
<regions>
<region name="main"/>
</regions>
</page>
And here is a layout defining three regions:
Sample layout with three regions
<layout>
<display-name>The main page</display-name>
<form/>
<regions>
<region name="left"/>
<region name="middle"/>
<region name="right"/>
</regions>
</layout>
From Content Studio, this is what regions look like in the page form:
![Component editor](/docs/xp/stable/cms/pages/regions/_/image/47b0b366-d6e3-4b66-aba8-3ab669aea06b:67ca93ab8d3219227d514d1206fe9915b02aee15/width-768/component-input-type.png)
And here is what the the exact same structure might look like in the visual page editor.
Ther dropzones are empty regions. |
![Layout with three empty regions](/docs/xp/stable/cms/pages/regions/_/image/e121b593-5d5d-49a2-9b94-b4e851bf1e15:12bafde9b1b43519ac4b43be2bed4ef6dad230b3/width-768/3-region-layout.png)
Output
Using the Content API, you may access a JSON version containing the hierarchical structure of components and regions on the page.
Sample JSON from the Content api
"page": {
"type": "page",
"path": "/",
"descriptor": "com.enonic.app.superhero:default",
"regions": {
"main": {
"components": [
{
"path": "/main/0",
"type": "layout",
"descriptor": "com.enonic.app.superhero:three-column",
"config": {},
"regions": {}
}
],
"name": "main"
}
}
}
Empty regions are never persisted. Region names are only determined from the component path. |