WebLayouts

Layout containers enable the developers to easily structure responsive forms. Servoy provides by default a Bootstrap 12-grid layouts package, but component developers can also add their own layouts.

WebLayouts are similar to WebComponents in the sense that they can be dragged on forms, with the difference that they are not AngularJS directives and do not provide any business logic. Their html markup is generated, so an html file is not needed either.

A Web Layout Container is comprised of a spec file and a json file:

layout spec file definition

{
	"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,
	"contains": ["Specifies an array of components/layouts which can be added to this layout container"],
	"topContainer": Used to determine whether this layout container can be added directly into the root of the form,
	"tagType":The tag type for HTML output. The default value is 'div',
	"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.

layout json definition file

{
	"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:

3columns.spec

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

3columns.json

{
	"layoutName":"row",
	"class":"row",
	"children" : [
		{
			"layoutName":"column",
			"model": {
				"class":"col-md-4"
			}
		},
		{
			"layoutName":"column",
			"model": {
				"class":"col-md-4"
			}
		},
		{
			"layoutName":"column",
			"model": {
				"class":"col-md-4"
			}
		}
	]
}

Child pages

WebLayouts