Now that you have an element-based widget, it is possible to structure it so that an Oracle Commerce Cloud Service user can customize the layout of elements on the widget instance. First, add an additional directory structure to the widget:

widget/
    <widget-type>/
        layouts/
            layout1
                widget.template
                preview.template

For each layout scheme you wish to provide, you need to define the template for site display (widget.template), and for the layout display in the Design tab (preview.template). For a simple single panel layout, the widget.template might look like this:

<div class="myWidget">
  <!-- oc layout: panels -->
    <div class="oc-panel panel-1" data-oc-id="panel-1">
    </div>
  <!-- /oc -->
</div>

This example designates a panel using ‘oc layout’. This translates into a slot on your widget into which available elements can be dragged. At present the layout of widget panels is fixed to the layouts provided by each layout template. For example, if you want a two-panel vertical or two-panel horizontal layout, you would add two subdirectories under layouts which contain the HTML templates for these views.

The preview HTML for the widget configuration dialog is defined in preview.template:

<div class="myWidgetPanelLayout">
  <div class="panel-1"><span class='panel_title'>Panel One</span></div>
</div>

Important: When you use the element binding, you must ensure that the current binding context is the widget, or that you can return easily to the widget. There are currently problems if you try to use the element binding within a ‘ko foreach’ as each iteration of the loop is bound to a list item.