You can separate widgets into reusable elements. This allows you to reposition individual fragments on a widget without requiring knowledge of, or access to, the underlying presentation code. Extension bundles can similarly deliver stand-alone widgets, or stand-alone elements, or a combination of widgets and elements. You can have stand-alone elements shared across different widgets, or elements local to a particular widget. The example below shows how the modified extension structure would look when supporting elements:
<EXTENSION NAME> : the root folder of your extension ext.json readme.txt element/ <element-name>/ templates/ template.txt element.json widget/ <widget-type>/ widget.json readme.txt elements/ <element-name>/ templates/ template.txt element.json templates/ display.template edit.template js/ <widget type>.js less widget.less locales/ en/ ns.<widget type>.json de/ ns.widget type>.json images/
You can define elements either as stand-alone (shared) by creating a top level directory in your extension, or as part of a widget directory. Typically an element directory will contain one or more named directories containing the HTML, Less, and locale fragments related to the element. There is also an element manifest file. The contents of element.json might look like this:
{
"title": "Product Title",
"inline" : true,
"supportedWidgetType" : ["product-details", "sale-carousel", ...],
}The attributes available for element manifests are:
title - a name for the element which does not need to be unique.
inline - flag denoting whether the element should be inserted as a span (inline=true) or div (inline=false) when added to a widget instance.
supportedWidgetType - a list of widget-type names which will determine the availability of the element to widget layout pages in design view. This is required when the elements are not supplied under a widget directory in the extension.
