Page History

...

{
	"name": String layout name,
	"displayName": String more descriptive name that is shown in the designer,
	"version": the version, the same as for the components (integer),
	"definition": A reference to the json file of this layout,
	"icon": A reference to the icon shown in designer,
    "preview": A reference to the preview gif to be displayed, default is null ,
	"designStyleClass" : A css class to be added when wireframethe exploded view is enabled in designer, if not specified it fallbacks to 'customDivDesign'
	"contains": ["Specifies an array of components/layouts which can be added to this layout container"], //the first one should be the one which is most used
	"excludes": ["Used to specify that a layout can contain any component or layout except this list.
                  If present, the 'contains' property is ignored. 
				  See the column.spec example below for more details."]
	"topContainer": Used to determine whether this layout container can be added directly into the root of the form. The default value is false,
	"tagType":The tag type for HTML output. The default value is 'div',
	"model":  { 		 "propertyNamedeprecated": typestring description, optional default value -to mark the modelcomponent propertiesas aredeprecated generated
					     on the tag as HTML attributes
         "tagType": "string"  // optional attribute if the tagType should be configurable in the developer
	}
}

It is worth to mention that the 'tagType' property is a bit more special. It is a top level property which specifies the default value for the tagType, but it can also be a model property. In this case, it shows in the properties view and the user is able to change its value.

...

- if it is deprecated, default value null (not deprecated)
    "replacement": "package-layout", (optional) in case of deprecation, developer will provide a quick fix for such layouts to be automatically changed to the given replacement. 
                   The default value is null
	"model": {
		 "propertyName": type description, optional default value - the model properties are generated
					     on the tag as HTML attributes
         "tagType": "string"  // optional attribute if the tagType should be configurable in the developer
	}
}

It is worth to mention that the 'tagType' property is a bit more special. It is a top level property which specifies the default value for the tagType, but it can also be a model property. In this case, it shows in the properties view and the user is able to change its value.

The json config file is for the default properties (class="row") which are not changeable by the servoy developer (if the model area of the spec file doesn't  specify them) but also for making composite layouts, so you can drop full structures at once.

{
	"layoutName":The real name of the toplevel layout if this layout is a composition of layouts (optional),
	"class":A sample property that will be set as the attribute when such a layout container is created (optional),
	"children": An array of child components/layouts with their default values (optional)
}

For instance, the "row with 3 columns" layout is defined as follows:

{
	"layoutNamename":The real name of the toplevel layout if this layout is a composition of layouts (optional),
	"class":A sample property that will be set as the attribute when such a layout container is created (optional) "3columns",
	"displayName":"Row with 3 Columns",
	"version": 1,
	"icon": "12grid/3columns.png",
	"designStyleClass" : "rowDesign",
	"definition": "3columns.json",
	"contains": ["column"],
	"topContainer": true
}

{
	"layoutName":"row",
	"class":"row",
	"children" : An[
array of child components/layouts with their default values (optional)
}

For instance, the "row with 3 columns" layout is defined as follows:

{
	"name": "3columns",
	"displayName":"Row with 3 Columns",
	"version": 1,
	"icon": "12grid/3columns.png",
	"designStyleClass" : "rowDesign",
	"definition": "3columns.json",
	"contains": ["column"],
	"topContainer": true
}		{
			"layoutName":"column",
			"model": {
				"class":"col-md-4"
			}
		},
		{
			"layoutName":"column",
			"model": {
				"class":"col-md-4"
			}
		},
		{
			"layoutName":"column",
			"model": {
				"class":"col-md-4"
			}
		}
	]
}

In the following example, it is specified that the 'column' layout can contain any layout from the current package and any component except the one named or with layoutName "container". 

{
	"layoutName":"row",{
	"classname": "rowcolumn",
	"children" : [
		{
			"layoutNamedisplayName": "columnColumn",
			"modelversion": {1,
				"classicon":"col-md-4"
			}
		},
		{
			"layoutName":"column",
		 "12grid/column.png",
	"definition": "column.json",
	"excludes": ["container"],
	"model": {
				"class":"col-md-4"
			}
		},
		{
			"layoutName":"column",
			"model": {
				"class":"col-md-4"
			}
		}
	]
}

In the following example, it is specified that the 'column' layout can contain any layout from the current package and any component except the one named or with layoutName "container". 

{
	{
	"name": "column",
	"displayName": "Column",
	"version": 1,
	"icon": "12grid/column.png",
	"definition": "column.json",
	"excludes": ["container"],
	"model": {
	}
}


}

We can also disallow adding any component with "excludes": ["component"]. However, if we want to allow all components but a specific one, then we need to use the "contains" property instead of "excludes", in which we enumerate all possible components that this layout accepts.

More Examples on "contains" and "excludes" properties

The possible values of the "contains" property are illustrated in the table bellow, it can either contain everything "*" or it can be an array containing layout names or the string "component":

...

<layoutName>

...

...

If a specific layout can contain everything except a few other layouts or it cannot contain components, then it is better to use the excludes property instead of contains:

...

"excludes": ["row"]

...

}
}


}

We can also disallow adding any component with "excludes": ["component"]. However, if we want to allow all components but a specific one, then we need to use the "contains" property instead of "excludes", in which we enumerate all possible components that this layout accepts.

More Examples on "contains" and "excludes" properties

The possible values of the "contains" property are illustrated in the table bellow, it can either contain everything "*" or it can be an array containing layout names or the string "component":

Contains Values	Explanation	Example 12grid package	The Add menu
*	may contain any layouts from the current package and any components from any packages	"contains": ["*"]	Image Added
<layoutName>	may contain layout with name <layout_name> or with the layoutName property <layout_name> from the current package	"contains": ["container"]
		"contains": ["row"]	Image Added
component	may contain any components from any package	"contains": ["component"]	Image Added
enummeration of <layoutName> and optionally component	may contain the enummerated layouts from the current package and components from any packages	"contains": ["row","container","component"]	Image Added

If a specific layout can contain everything except a few other layouts or it cannot contain components, then it is better to use the excludes property instead of contains:

Excludes values	Explanation	Example 12grid package	The Add menu
<layoutName>	may contain any layouts from the current package and any components except the layout with name <layout_name> or with the layoutName property <layout_name>	"excludes": ["row"]	Image Added
component	may only contain layouts from the current package, excludes all components	"excludes":["component"]	Image Added
enummeration of <layoutName> and optionally component	may contain all layouts from the current package except the ones enummerated; if components is specified, then the current layout cannot contain any components	"excludes": ["row","container","component"]	Image Added

Layouts in NG2 supports also simple behavior through Angular Directives

{
	"name": "collapsible",
	"displayName": "Collapsible Container",
	"version": 1,
	"icon": "12grid/collapsible/collapsible.png",
	"definition": "collapsible/collapsible.json",
	"designStyleClass" : "rowDesign",
	"categoryName":"Templates",
	"contains": ["12grid.div"],
	"topContainer": true,
	"directives": ["gridCollapse"],
    "tagType":"div"
}

The above spec says with the "directives" tag that this tag (which is just a div according to the tagType) should have a Angular directive also generated on its tag that is the created at runtime and can influence the behavior of the collapsible div and/or its children.

This is done by saying in the manifest of the grid package that it is also an npm package with a angular module:

NPM-PackageName: @servoy/12grid
NG2-Module: GridModule

Then the layout package must provide this angular npm package having that GridModule as a class an example can be seen here: 12grid/project at master · Servoy/12grid (github.com) with a the collapsible directive that adds behavior to the layout tag here: 12grid/collapse.directive.ts at master · Servoy/12grid (github.com)

The designStyleClass

The designStyleClass property is used to express how the layout container is displayed in the Exploded view. The Exploded view makes the structure of layout containers more visible in the designer.

...