How to include container into another container dynamically in Hippo CMS, by drag'n'dropping them from catalog toolbar?

Question

I'm using Hippo CMS 10. Through console, in hst:catalog I've created hst:containeritemcomponent with hst:xtype, hst:referencecomponent, hst:iconpath, hst:label.
hst:referencecomponent references to hst:containercomponentfolder at hst:workspace/hst:containers/, which contain hst:containercomponent with hst:xtype set to HST.Span

I need container, that can contain (dynamically) variable amount of another different containers. For example, I want to be able to create this structure by drag'n'dropping components from catalog toolbar:

<!-- this must be main container, already positioned in page -->
<div class="content">

    <!-- this should appear when I drag'n'drop component from toolbar -->
    <!-- at the same time, it must be container for other components itself -->
    <div class="row">...</div>

    <!-- this also comes from drag'n'dropped component from toolbar -->
    <!-- and also container for other components -->
    <div class="home banner">...</div>

    <!-- any amount of containers -->
    ...
    ...
</div>

By this way, I should be able to create some page structure dynamically. Is it possible? If yes, how can I achieve it? If no, how to bypass it, what's the idea?
HippoCMS's site is very poor for such kind of examples, and there is no information about hippocms except for this site.

Answer 1

I think I know the problem: please have a look at this documentation that explains the configuration:

http://www.onehippo.org/library/concepts/hst-configuration-model/containers-configuration.html

This documentation page explains how to customize the HTML rendered by the containers: http://www.onehippo.org/library/concepts/template-composer/how-to-prevent-additional-html-elements-for-containers.html

The problems I see:

• you are missing an hst:include in your template. Such as for example:

  <hst:include ref="mycontainer" />

• you've created the hst:containeritemcomponent in the hst:catalog but to be editable containers must also be created in the hst:workspace.

• in your HST configuration you must also configure a reference to the container you have in the workspace. Such as this example:

The catalog is a palette of components. The components you see in the toolbar can only be drag&dropped on a template which have containers to handle those components. The xtype defines the kind of container that will handle the component(s) you drag&drop (table, , etc.). So you can do stuff like stacking.

You cannot include a container into another container dynamically.