Help Center

Menu

Layout configuration file

The layout configuration file defines the metadata and content zones for your layout.

Configuration file example

The following example shows a three-column layout configuration:

{
  "name": "three-columns",
  "displayName": "Three columns",
  "description": "Three columns side-by-side 25-50-25 layout",
  "entry": "markup.hbs",
  "zones": [
    {
      "key": "lhs",
      "displayName": "Left panel",
      "description": "Left panel content area"
    },
    {
      "key": "main",
      "displayName": "Main panel",
      "description": "Primary content area"
    },
    {
      "key": "rhs",
      "displayName": "Right panel",
      "description": "Right panel content area"
    }
  ]
}

Configuration file structure

The configuration file contains:

name

The internal identifier for the layout. This must be unique within your DXP instance.

displayName

The name displayed to editors in the Page Builder.

description

A description of the layout’s purpose.

entry

The filename of the template file (typically markup.hbs).

zones

A JSON array defining the content zones available in the layout. Each zone has:

A zone identifier

For example, lhs, main, rhs.

displayName

The name displayed to editors for this zone.

description

A description of what content should go in this zone.

Layout properties

Properties increase layout flexibility. They enable a single layout to be configured for variations. For example, showing or hiding a sidebar, or setting column widths.

The three types of properties available are:

boolean

True or false values, for example, showSidebar.

string

Text values, for example, a default heading for the layout.

enumerator

A set of predefined values. For example, left, right or 25, 50, 75. Defined using the oneOf schema.

For oneOf (enumerator) properties, the default value must be the value (const), not the title.

Properties example

The following snippet shows how properties of different types are defined at the top level of the configuration:

{
  "properties": {
    "showSidebar": {
      "type": "boolean",
      "title": "Show Sidebar",
      "description": "Toggle the visibility of the sidebar zone",
      "default": true
    },
    "sidebarPosition": {
      "title": "Sidebar Position",
      "oneOf": [
        { "const": "left", "title": "Left" },
        { "const": "right", "title": "Right" }
      ],
      "default": "left"
    },
    "customHeading": {
      "type": "string",
      "title": "Custom Heading",
      "description": "A custom heading for this layout",
      "default": "Welcome"
    }
  }
}