Channel Editor Containers

In Bloomreach Content, you can define specific regions of a web page as containers. Containers allow webmasters to edit and manage the components within these regions through the Channel Editor.

Layout Controlled by xtype

A container organizes multiple components. The layout—horizontal (row) or vertical (column)—is determined by the container's xtype. The Channel Editor supports the following xtype values:

xtype	Built-in Rendering Template	Default Rendering Orientation
hst.vbox	Renders a <div> element with each child component wrapped in a <div>.	vertical
hst.unorderedlist	Renders a <ul> element with each child component wrapped in an <li>.	vertical
hst.orderedlist	Renders an <ol> element with each child component wrapped in an <li>.	vertical
hst.span	Renders a <div> element with each child component wrapped in a <span>.	horizontal
hst.nomarkup	Renders no markup elements. The parent template and all container items must meet specific conditions (see below).	vertical

The default rendering orientation determines how components are arranged by default. You can override this orientation with custom CSS, but this is not recommended. The Channel Editor UI relies on the default orientation to position components accurately.

HST Configuration

Define a container in the HST configuration using a node of type hst:containercomponent. For example, to add a vertical box container to a page:

/main:
  jcr:primaryType: hst:containercomponent
  hst:xtype: hst.vbox
copy

All child nodes of an hst:containercomponent must be of type hst:containeritemcomponent. When a CMS user adds a component to the container, HST creates a corresponding child node. To add containers to a page, configure them in the HST workspace.

Note: hst:xtype values are case-insensitive.

Component Toolbar

You can configure which components are available to add to a container. These components appear in the Components tab of the Channel Editor's side navigation. Users select a component from this tab and add it to any container. Each item in the tab represents an HST component. To make a component available, add its configuration to the HST catalog.

Built-in Rendering Templates

If the hst:containercomponent node does not specify a template using the hst:template property, the built-in rendering template for the container's xtype is used. The table above lists the default rendering for each xtype. For details, review the implementation of the built-in rendering templates.

You can override the built-in template by setting the hst:template property to reference a custom rendering template. To ensure compatibility with the Channel Editor's add, remove, and move operations, your custom template must meet the two conditions described in the next section. The built-in templates satisfy these conditions by default.

Example HST configuration that uses the built-in template for hst.vbox:

/hst:workspace:
  /hst:containers:
    /homepage:
      /main:
        jcr:primaryType: hst:containercomponent
        hst:xtype: hst.vbox
        /list1:
          jcr:primaryType: hst:containercomponentitem
          hst:xtype: hst.item
        /list2:
          jcr:primaryType: hst:containercomponentitem
          hst:xtype: hst.item
copy

Using the hst.nomarkup xtype

The hst.nomarkup xtype, available since version 11.0, uses a built-in template that outputs no HTML elements. This xtype gives you full control over the element type (such as div or span) and attributes (such as class). However, it requires that your component templates follow specific HTML structure rules.

To ensure the Channel Editor can add, move, and remove components in containers of this type, you must meet both of the following conditions:

1. The content of the HST container must be rendered as the only child HTML element of its enclosing HTML element in the parent component's template.
2. All HST container components (catalog components) used inside this container must render their content inside a single root HTML element.

The following examples illustrate these requirements.

A valid Freemarker template for the parent component of an hst.nomarkup container:

[...]
<div>
  <!-- optional comment -->
  <@hst.include ref="nomarkup-container"/>
</div>
[...]
copy

The following example does not meet condition 1 and will not work correctly in the Experience Manager:

[...]
<div>
  <@hst.include ref="nomarkup-container"/>
  <div class="additional-sibling-element-breaking-channel-manager-ui">
    [arbitrary content]
  </div>
</div>
[...]
copy

A valid template for a container item component used inside an hst.nomarkup container:

[optional Freemarker tags such as #assign, #include etc]
<!-- optional comment -->
<div class="nomarkup-container-item-root">
  [arbitrary content]
</div>
copy

The following example does not meet condition 2 and will not work correctly in the Experience Manager:

[optional Freemarker tags such as #assign, #include etc]
<div class="nomarkup-container-item-root">
  [arbitrary content]
</div>
<div class="additional-root-level-element-breaking-channel-manager-ui>
  [more arbitrary content]
</div>
copy