Custom Editor Layout - BloomReach Experience - Open Source CMS

This article covers a Hippo CMS version 10. There's an updated version available that covers our most recent release.

13-05-2015

Custom Editor Layout

Introduction

In the Document Type Editor document types can be created and edited. A document type consist of

  • the fields, their type and their order
  • the layout in which documents of that type are presented to an author in the document editor

The layout of a document type is selected when a new document type is created. The default layouts are '2 Column', '1 Column' and 'Horizontal List'. This page explains how to add a custom layout to that list.

Example: three column layout

We will create a '3 Column' layout that can be selected when creating a new document type:

1. hippoecm-layouts.xml

First, add a layout index file to the CMS module of your project with the name of our layout: "example.ThreeColumn".

cms/src/main/resources/hippoecm-layouts.xml:

<?xml version="1.0" encoding="UTF-8"?>
<layouts>
  <layout>
    <plugin>example.ThreeColumn</plugin>
  </layout>
</layouts>

2. Layout descriptor

Add the layout description in the 'example' package below the CMS resources:

cms/src/main/resources/example/ThreeColumn.layout.xml:

<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <pad name="left" orientation="vertical" />
  <pad name="middle" orientation="vertical" />
  <pad name="right" orientation="vertical" />
  <transition name="left-middle right" source="left" target="middle" />
  <transition name="middle-left left" source="middle" target="left" />
  <transition name="middle-right right" source="middle" target="right" />
  <transition name="right-middle left" source="right" target="middle" />
</layout>

The descriptor defines three 'pads' in our layout that can contain fields: left, middle, and right. The 'transition' elements define how fields can be moved from one pad to another. The names of the transitions should be unique. These names are also used as CSS classes on the rendered icon that trigger the transition; including 'left', 'right', 'up' or 'down' in the name ensures that the proper arrow icon is rendered.

3. Layout markup

Add the layout markup next to the descriptor:

cms/src/main/resources/example/ThreeColumn.html:

<html xmlns:wicket="http://wicket.apache.org/">
  <wicket:head>
    <link rel="stylesheet" type="text/css" href="skin/ThreeColumn.css"/>
  </wicket:head>
  <wicket:panel>
    <div class="column-wrapper">
      <div class="col3 col3-40 col3-left" wicket:id="extension.left">left column</div>
      <div class="col3 col3-40 col3-left" wicket:id="extension.middle">middle column</div>
      <div class="col3 col3-20 col3-right" wicket:id="extension.right">right column</div>
    </div>
  </wicket:panel>
</html>

The markup references a CSS file that defines the classes that will render our markup in three columns.

cms/src/main/resources/skin/ThreeColumn.css:

.col3-20 {
  width: 20%;
}

.col3-40 {
  width: 40%;
}

.col3-left {
  float: left;
}

.col3-right {
  float: right;
}

Note that the CSS file is put in the folder "skin" instead of the package "example". That's because everything in the "skin" folder will be served by the SkinResourceServlet defined in the CMS web.xml file, which makes it easy to reference the CSS file from the HTML markup.

4. Layout icon and name

Finally, we'll give our three-column layout a nice icon:

cms/src/main/resources/example/ThreeColumn.png

Also include a resource bundle with the display name of our layout.

cms/src/main/resources/example/ThreeColumn.properties:

ThreeColumn=3 Column

5. Use the new layout

Rebuild and restart the project. Login as admin, navigate to "Content > Document Types" and create a new document type. The dialog should now display the "3 Column" layout. Select it and have fun with three columns!

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?