Adding regionsΒΆ

To be able to add components like images, component parts, or text to our page via the live edit drag and drop interface, we need to create at least one region. To do this we will first modify the page descriptor (page.xml) to support one region called main.

<page-component>
  <display-name>My first page</display-name>
  <config />
  <regions>
    <region name="main"/>
  </regions>
</page-component>

Next, our controller must send the region data to the view.

// Get the current content. It holds the context of the current execution
// session, including information about regions in the page.
var content = execute('portal.getContent');

// Include info about the region of the current content in the parameters
// list for the rendering.
var mainRegion = content.page.regions["main"];

// Extend the model from previous example
var model = {
    name: "Michael",
    mainRegion: mainRegion
};

Finally, we need to modify the view to render all components inside the region. To make live-edit understand that an element is a region, we need an attribute called data-portal-component-type with the value region.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>My first page, with a view!</h1>
    <h2>Hello <span data-th-text="${name}">World</span></h2>
    <div data-portal-component-type="region">
      <div data-th-each="component : ${mainRegion.components}" data-th-remove="tag">
        <div data-portal-component="${component.path}" data-th-remove="tag" />
      </div>
    </div>
  </body>
</html>

We can now use the live edit drag and drop interface to drag components onto our page. Lets look into how we can create components.