Layouts

A layout is a template that makes it possible for you to render content in a wide variety of ways. You can add rows, columns, tables, tabs and other such HTML elements. Using a layout you can create both simple and complex designs that present a wide variety of information. Once a layout is created, it is available for Editors to add to a content item from the Insert menu the same way that they add content elements. A layout can include loops, which are reusable content structures, like a tab or a column. When a loop is available in a layout, the editor can add more of the same structure and add content to it.

Layouts use the Histone template engine for rendering content. The Histone template engine uses its own proprietary language for defining templates. Please note that there is scant information on Histone scripting available. Many of the links to more thorough documentation that worked in the past are no longer valid. If you find a good link to more thorough Histone docuentation, please add it as a comment to this page.

Creating a Layout

To add a new layout, click [Add Layout] in the upper right corner of the Layouts panel. After the new layout has been added, its default name is "Layout (language version)" and it is selected by default in the Layouts list with default text appearing in the English and Dutch "Name" and "Description" fields. For example:

You can toggle between showing and hiding the list of layouts by clicking the "Hide List" or "Show List" link in the upper left part of the Layouts panel. The following basic properties for a layout are shown in the list:

Item	Description

Item	Description
Name	The name of the layout.
Status	The status of the layout. The possible statuses are "Active" and "Inactive". Layouts that are "Inactive" do not appear in the Insert menu.
Last Modified By	The name of the user who last modified the layout and the date and time when the modifications occurred.

Back to top

Defining a Layout

The definition of a layout determines the structure within which content can be added. You also define the behavior of the layout, for example whether a sub-element within the layout (column, tab, and so forth) is static or whether more can be added by the Editor. The definition of a layout consists of a template and fields and loops, described in Advanced Layout Properties. Define the following basic properties for a layout:

Property	Description

Property	Description
English - Name	The name of the layout as it appears in the list of layouts in the English GUI.
English - Description	The text that appears with the layout in the Insert menu in the English GUI.
Nederlands - Name	The name of the layout as it appears in the list of layouts in the Dutch GUI.
Nederlands - Name	The text that appears with the layout in the Insert menu in the Dutch GUI.
State	The status of the layout. The possible statuses are "Active" and "Inactive". When you change the status of a layout from "Active" to "Inactive", it will no longer be available from the Insert menu. Any instance of the layout that has already been added to a content item will still appear on the website frontend.
Authorization roles	Specifies which role(s) within XperienCentral have permission to insert the Layout into a content item. You can either make it available to all roles or to one or more specific roles. To limit permission to a Layout to one or more roles, follow these steps: Select "Define custom role permissions for this Layout". Click the [Select Role] drop-down button. Select the role to add from the list. Click [Add Role]. The role is added and appears in the "Role" table. Repeat the above steps for each role you want to add. Click [Save]. The Layout fields are editable. The Layout can be moved. The Layout can be cut, copied and pasted (also to other content items). The Layout can be deleted.
Template	Defines the structure, look and feel, and behavior of the layout. See https://github.com/MegafonWebLab/histone-documentation for complete information on using the Histone language to define a template engine. In the template, you can also use CSS for styling and rendering HTML as well as raw HTML to render the design (H1, H2, lists, and so forth). You can also include images in the template engine. If you do add images to your layout, be sure to point to the correct part of the file system where the image is located. In XperienCentral, layout fields and layout variant parameters are declared in a specific way. Fields are denoted using the notation `{{}}` and parameters are denoted using the `{-–}` notation. For example, the field "body" is declared in the Histone template as follows: `{{body}}` The parameter "backgroundColor" is delcared in the Histone template as follows: `{-backgroundColor-}` See Layout Variants for more information. Layout fields cannot be rendered inside of an <a> tag.