Creating a layoutΒΆ

Layouts are used in conjunction with regions to organize the various component parts that will be placed on the page via live edit drag and drop. Layouts can be dropped into the page regions and then parts can be dragged into the layout. This allows multiple layouts (two-column, three-column, etc.) on the same page and web editors can change things around without touching any code. Layouts can even be nested. Making a layout is similar to making pages and part components. They require a descriptor, a controller, and a view. We will make a two column layout with the widths at 70% and 30%.

The layout descriptor defines regions within the layout where parts can be placed with live edit. First make a new folder layouts/layout-70-30. Within this folder, make a file called layout.xml as seen below.

<layout-component>
  <display-name>70/30</display-name>
  <config/>
  <regions>
    <region name="left"/>
    <region name="right"/>
  </regions>
</layout-component>

Also, create a file called controller.js in the layout-70-30 folder.

exports.get = function(req) {

  // Find the current component.
  var component = execute('portal.getComponent');

  // Resolve the view
  var view = resolve('./layout-70-30.html');

  // Define the model
  var model = {
    component: component,
    leftRegion: component.regions["left"],
    rightRegion: component.regions["right"]
  };

  // Render a thymeleaf template
  var body = execute('thymeleaf.render', {
    view: view,
    model: model
  });

  // Return the result
  return {
    body: body,
    contentType: 'text/html'
  };

};

To make the layout view, create a file in the layout-70-30 folder called layout-70-30.html.

<div class="row" data-th-attr="data-portal-component-type=${component.type}">
  <div data-portal-component-type="region" class="col-sm-8">
    <div data-th-each="component : ${leftRegion.components}" data-th-remove="tag">
      <div data-portal-component="${component.path}" data-th-remove="tag" />
    </div>
  </div>

  <div data-portal-component-type="region" class="col-sm-4" >
    <div data-th-each="component : ${rightRegion.components}" data-th-remove="tag">
      <div data-portal-component="${component.path}" data-th-remove="tag" />
    </div>
  </div>
</div>

Some CSS must be added to style the page for the layout columns to work. Create a css folder inside the assets folder. Boostrap is used in this example so go ahead and download the minified CSS file and put it in the assets/css folder. Now the head element of the view/my-first-page.html file must be updated so that it includes the bootstrap CSS file.

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link data-th-href="${portal.assetUrl({'_path=css/bootstrap.min.css'})}" href="../assets/css/bootstrap.min.css" rel="stylesheet"/>
</head>
    

After rebuilding the module, edit the page and click the Insert tab on the right. Then drag and drop a Layout to the main region. Then select the 70/30 layout from the dropdown. Now you can drag an image, text, or part into the layout regions.

../../_images/layout.png