Page History
...
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 have 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:
| Code Block | ||||
|---|---|---|---|---|
| ||||
{
"name": "String componentname",
"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 js 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
}
} |
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.
| Code Block | ||||
|---|---|---|---|---|
| ||||
{
"layoutName":"The name of the layout component",
"class":"The css class to be applied to the layout container (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:
| Code Block | ||||
|---|---|---|---|---|
| ||||
{
"name": "3columns",
"displayName":"Row with 3 Columns",
"version": 1,
"icon": "12grid/3columns.png",
"designStyleClass" : "rowDesign",
"definition": "3columns.json",
"contains": ["column"],
"topContainer": true
} |
| Code Block | ||||
|---|---|---|---|---|
| ||||
{
"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"
}
}
]
} |
Overview
Content Tools
Activity