Properties

Name	Description	Required	Example
title	The text that is in the "tab" is indicated here. Translations can also be entered here.		`"title":` `"{{{Server.Allgemein}}}"`
visible	This property indicates whether the component is visible (true) or not (false). If no specification is made, the region is visible by default.
renderHeader	This boolean property specifies whether the region header should be rendered as well. If the region header is not rendered, the region cannot be collapsed. If no specification is made, the header is displayed.
breakStart	Specifies at which sheet width the region is wrapped. The constant that is also used to display the size of the sheet is selected as the value (see here).		`{` `"breakStart":"medium"` `}`
size	See here.
extendedView	This property specifies whether the region should be hidden by default and can only be shown via a corresponding action.		`"extendedView":` `true`

Behaviour of the width

With the property "size", rules can be defined that state how much space the region should take up. The width of the region is then determined by the width of the sheet.

If no rules are given, the regions behave as follows:

Sheet width	Width of the Regions
0px < x < 800px	100%
800px<= x < 1200px	50%
1200px <= x < 1600px	33.333%
1600px <= x < 2400px	25%
2400px <= x	16.666%

(The percentages refer to the width of the sheet).

It is possible to set up one or more rules. To do this, assign an array of objects whose properties are "container" and "width" to the property "size". The property "container" then describes the width of the sheet. Here you can choose from five possibilities:

Name	Width of the Sheets
extrasmall	0px < x < 800px
small	800px<= x < 1200px
medium	1200px <= x < 1600px
large	1600px <= x < 2000px
extralarge	2000px <= x

For each width, you can use the "width" property to specify how wide the region should be depending on the sheet width. There are a total of 12 setting options for the "width" property:

Name	Size of the region
"1/12"	8.333%
"2/12"	16.666%
"3/12"	25%
"4/12"	33.333%
"5/12"	41.666%
"6/12"	50%
"7/12"	58.333%
"8/12"	66.666%
"9/12"	75%
"10/12"	83.333%
"11/12"	91.666%
"12/12"	100%

Example

"size": [
	{
		"container": "extrasmall",
        "width": "12/12"
    },
    {
    	"container": "small",
        "width": "8/12"
    },
    {
    	"container": "medium",
        "width": "8/12"
    },
    {
    	"container": "large",
        "width": "8/12"
    },
    {
    	"container": "extralarge",
     	"width": "8/12"
    }
]

Fields

In a region, fields can be implemented with which the properties of the entity can be displayed and edited. More information about the fields can be found here. The fields are assigned as an array to the property "fields".

"fields":[
	{
		...
	},
	{	
		...
	},
	{	
		...
	}
]