This page includes demos using a two column layout.

Two Column Layout

This example defines an inline custom view that extends bootstrapedit-horizontal. It tells the view to use a specific layout template (two-column-layout-template.html). The bindings block then tells the view where to place field elements within the template.

The layout template file (two-column-layout-template.html) has two DIV blocks with IDs leftcolumn and rightcolumn. The properties are placed into each column as defined by the bindings block.

This example loads data, schema and options parameters through ajax calls.

Three Column Layout

This example provides a three-column layout for properties. As in Example #1, the layout template is provided and the fields are bound to specific DIV elements within the layout file using the bindings properties.

In this case, we provide the template inline (as a string). We could provide this string as either the view’s layout.template property or as a property of our choosing under templates.

Here we take the latter path. We define a general purpose view template called threeColumnGridLayout and then reference it from our view’s layout.template property. The Alpaca view compiler discovers this and reuses the template.