Responsive Containers

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

URL of image that is displayed inside the control. Any image type (.gif, .jpg, ...) that your browser does understand is valid.

Use the following options to specify the URL:

(A) Define the URL relative to your page. Your page is generated directly into your project's folder. Specifiying "images/xyz.gif" will point into a directory parallel to your page. Specifying "../HTMLBasedGUI/images/new.gif" will point to an image of a neighbour project.

(B) Define a complete URL, like "http://www.softwareag.com/images/logo.gif".

Name of adapter parameter that provides as value the URL of the image that is shown inside the control.

Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically.

If the visibility of the control is determined dynamically by an adapter property then there are two rendering modes if the visibility is "false":

(1) "invisible": the control is not visible.

(2)"cleared": the control is not visible but it still occupies space.

invisible

disabled

cleared

CSS style classes separated by a blank.

bg-light

ml-*

mr-*

mx-*

mx-sm-*

mx-md-*

mx-lg-*

mx-xl-*

mt-*

mb-*

my-*

border border-primary

border border-secondary

border border-dark

border border-light

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

CSS style classes separated by a blank.

img-circle

img-rounded

img-thumbnail

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

The position of the image within it's container. Valid values are "top" and "bottom".

top

bottom

left

right

If set to TRUE the image will be used as card background and overlayed with the card body.

true

false

Index that defines the tab order of the control. Controls are selected in increasing index order and in source order to resolve duplicates.

-1

0

1

2

5

10

32767

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead.

Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead.

Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead.

Name of adapter parameter which dynamically provides the text that is shown inside the control.

Name of adapter parameter which dynamically provides the text that is shown inside the control.

Name of adapter parameter which dynamically provides the text that is shown inside the control.

CSS style classes separated by a blank.

bg-light

ml-*

mr-*

mx-*

mx-sm-*

mx-md-*

mx-lg-*

mx-xl-*

mt-*

mb-*

my-*

border border-primary

border border-secondary

border border-dark

border border-light

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

CSS style classes separated by a blank.

font-italic

font-weight-bold

font-weight-bolder

font-weight-light

font-weight-lighter

text-lowercase

text-uppercase

text-danger

text-info

text-primary

text-secondary

text-success

text-warning

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

CSS style classes separated by a blank.

font-italic

font-weight-bold

font-weight-bolder

font-weight-light

font-weight-lighter

text-lowercase

text-uppercase

text-danger

text-info

text-primary

text-secondary

text-success

text-warning

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

CSS style classes separated by a blank.

font-italic

font-weight-bold

font-weight-bolder

font-weight-light

font-weight-lighter

text-lowercase

text-uppercase

text-danger

text-info

text-primary

text-secondary

text-success

text-warning

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

Name of adapter parameter which dynamically provides the text that is shown inside the control.

Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead.

Multi language dependent text that is displayed inside the control. The "textid" is translated into a corresponding string at runtime.

Do not specify a "name" inside the control if specifying a "textid".

If the text of the control contains HTML tags then these are by default interpreted by the browser. Specifiying STRAIGHTTEXT as "true" means that the browser will directly render the characters without HTML interpretation.

Example: if you want to output the source of an HTML text then STRAIGHTTEXT should be set to "true".

true

false

CSS style classes separated by a blank.

d-none d-md-block

d-none d-lg-block

text-uppercase

font-italic

font-weight-bold

font-weight-bolder

font-weight-light

font-weight-lighter

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

Name of adapter parameter which dynamically provides the text that is shown inside the control.

Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead.

Multi language dependent text that is displayed inside the control. The "textid" is translated into a corresponding string at runtime.

Do not specify a "name" inside the control if specifying a "textid".

If the text of the control contains HTML tags then these are by default interpreted by the browser. Specifiying STRAIGHTTEXT as "true" means that the browser will directly render the characters without HTML interpretation.

Example: if you want to output the source of an HTML text then STRAIGHTTEXT should be set to "true".

true

false

CSS style classes separated by a blank.

d-none d-md-block

d-none d-lg-block

text-uppercase

font-italic

font-weight-bold

font-weight-bolder

font-weight-light

font-weight-lighter

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically.

This property has three possible values:

(1) "invisible": the control is not visible without occupying any space.

(2) "disabled": the control is deactivated: it is "grayed" and does not show any roll over effects any more.

(3)"cleared": the control is not visible but it still occupies space.

invisible

disabled

cleared

CSS style classes separated by a blank.

bg-light

ml-*

mr-*

mx-*

mx-sm-*

mx-md-*

mx-lg-*

mx-xl-*

mt-*

mb-*

my-*

border border-primary

border border-secondary

border border-dark

border border-light

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

This property has three possible values:

(1) "invisible": the control is not visible without occupying any space.

(2) "disabled": the control is deactivated: it is "grayed" and does not show any roll over effects any more.

(3)"cleared": the control is not visible but it still occupies space.

invisible

disabled

cleared

Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically.

CSS style classes separated by a blank.

col-auto

col

col-*

col-sm-*

col-md-*

col-lg-*

col-xl-*

offset-*

offset-sm-*

offset-md-*

offset-lg-*

offset-xl-*

mx-auto

btn-group

btn-group-vertical

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

The "folding"-function that is available by clicking on the title of the area can be switched off ("false"). "True" is the default.

true

false

Name of adapter parameter which controls whether the content of the ROWAREA is folded (true) or displayed (false).

By using this property you can dynamically control the "folded"-status of the control at runtime.

Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically.

Index that defines the tab order of the control. Controls are selected in increasing index order and in source order to resolve duplicates.

-1

0

1

2

5

10

32767

If the visibility of the control is determined dynamically by an adapter property then there are two rendering modes if the visibility is "false":

(1) "invisible": the control is not visible.

(2)"cleared": the control is not visible but it still occupies space.

invisible

disabled

cleared

CSS style classes separated by a blank.

panel-warning

panel-success

panel-danger

panel-info

ml-*

mr-*

mx-*

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

This property has three possible values:

(1) "invisible": the control is not visible without occupying any space.

(2) "disabled": the control is deactivated: it is "grayed" and does not show any roll over effects any more.

(3)"cleared": the control is not visible but it still occupies space.

invisible

disabled

cleared

Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically.

CSS style classes separated by a blank.

no-gutters

row-cols-*

row-cols-sm-*

row-cols-md-*

row-cols-lg-*

row-cols-xl-*

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

If set to "true" then the control takes all available horizontal width as its width. If set to "false" then the control does not have a predefined width but grows with its content.

true

false

Indicates if the content of the control's area gets the full available height.

If you use percentage sizing inside the control's area then this property must be switched to 'true'. If you use no explicit vertical sizing at all - or you use vertical pixel sizing for your controls - the property must be switched to 'false'.

Background information: container control's internally open up a table in which you place rows (ITR/TR) which then hold controls (e.g. LABEL/FIELD). The table that is opened up normally has no explicit height and grows with its content as consequence. By specifying "takefullheight=true" the table itself is sized to fill the maximum height of the available area.

true

false

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

CSS style classes separated by a blank.

bg-light

ml-*

mr-*

mx-*

mx-sm-*

mx-md-*

mx-lg-*

mx-xl-*

mt-*

mb-*

my-*

border border-primary

border border-secondary

border border-dark

border border-light

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

If set a role attribute is added to the html for screen readers. Example values are: banner, main, navigation.

main

banner

contentinfo

complementary

navigation

If set to true, the FIELD will not be accessible for input. It is just used as an output field.

true

false

If the visibility of the control is determined dynamically by an adapter property then there are two rendering modes if the visibility is "false":

(1) "invisible": the control is not visible.

(2)"cleared": the control is not visible but it still occupies space.

invisible

disabled

cleared

Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically.

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

CSS style classes separated by a blank.

d-none d-md-block

d-none d-lg-block

ml-*

mr-*

mx-*

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

Use this attribute to assign a fixed control identifier that can be later on used within your test tool in order to do the object identification

If set to true, the FIELD will not be accessible for input. It is just used as an output field.

true

false

If the visibility of the control is determined dynamically by an adapter property then there are two rendering modes if the visibility is "false":

(1) "invisible": the control is not visible.

(2)"cleared": the control is not visible but it still occupies space.

invisible

disabled

cleared

Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically.

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

CSS style classes separated by a blank.

d-none d-md-block

d-none d-lg-block

ml-*

mr-*

mx-*

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

Use this attribute to assign a fixed control identifier that can be later on used within your test tool in order to do the object identification

A caption shown for the formarea.

The name of the adapter parameter which dynamically defines the caption of the formarea at runtime.

Multi language dependent text that is displayed inside the control. The "textid" is translated into a corresponding string at runtime.

Do not specify a "name" inside the control if specifying a "textid".

If the visibility of the control is determined dynamically by an adapter property then there are two rendering modes if the visibility is "false":

(1) "invisible": the control is not visible.

(2)"cleared": the control is not visible but it still occupies space.

invisible

disabled

cleared

Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically.

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

CSS style classes separated by a blank.

bg-light

ml-*

mr-*

mx-*

mx-sm-*

mx-md-*

mx-lg-*

mx-xl-*

mt-*

mb-*

my-*

border border-primary

border border-secondary

border border-dark

border border-light

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

Use this attribute to assign a fixed control identifier that can be later on used within your test tool in order to do the object identification

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

CSS style classes separated by a blank.

d-none d-md-block

d-none d-lg-block

ml-*

mr-*

mx-*

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

If the visibility of the control is determined dynamically by an adapter property then there are two rendering modes if the visibility is "false":

(1) "invisible": the control is not visible.

(2)"cleared": the control is not visible but it still occupies space.

invisible

disabled

cleared

If set to TRUE FLABEL and corresponding FFIELD will be rendered horizontally in a row. If set to false they will be stacked vertically. Only supported for Bootstrap 4 and higher. Default is TRUE.

true

false

Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically.

Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead.

If set to TRUE then the first label control in the form group is used as label for the following input controls. This association is understood by creenreaders. Default is FALSE.

true

false

If set to TRUE then the name of the form group is only made accessible to screenreaders. It is not visually rendered. Default is FALSE.

true

false

Use this attribute to assign a fixed control identifier that can be later on used within your test tool in order to do the object identification

Name of the adapter parameter that provides the content of the control.

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

Name of the adapter parameter providing a value which indicates whether the control should be refreshed with new data on the client or not. A different value than the previous triggers the refresh. It does not need to be a higher value.

Name of the adapter parameter that dynamically defines if the control is disabled or enabled at runtime. If the value at runtime is set to TRUE the control is visible but disabled. In COLTABAREA controls this property is only supported for IE.

Name of the adapter parameter that dynamically defines the name of the event that is sent to the adapter when the user selects the item.

Name of the adapter parameter which dynamically provides the text for the marker at runtime.

Name of the adapter parameter that dynamically defines the title of the control. The title is displayed as tool tip when ther user moves the mouse onto the control.

CSS style definition, which is applied to all items in the list

Examples:

border: 1px solid #FF0000

background-color: #808080

You can combine style settings by separating them with a semicolon.

CSS style classes separated by a blank. These classes are applied to all items in the list.

list-group-item-primary

list-group-item-secondary

list-group-item-success

list-group-item-danger

list-group-item-warning

list-group-item-info

list-group-item-light

list-group-item-dark

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

CSS style classes separated by a blank.

list-group-flush

If the text of the control contains HTML tags then these are by default interpreted by the browser. Specifiying STRAIGHTTEXT as "true" means that the browser will directly render the characters without HTML interpretation.

Example: if you want to output the source of an HTML text then STRAIGHTTEXT should be set to "true".

true

false

If the text of the control contains HTML tags then these are by default interpreted by the browser. Specifiying STRAIGHTTEXT as "true" means that the browser will directly render the characters without HTML interpretation.

Example: if you want to output the source of an HTML text then STRAIGHTTEXT should be set to "true".

true

false

Name of the adapter parameter which dynamically provides the text of the badge for an item at runtime.

Position where a badge is rendered. Valid values are right and left. Default is right.

right

left

Name of the adapter parameter which dynamically provides the url of the icon for an item at runtime.

Position where an icon is rendered. Valid values are right and left. Default is left.

right

left

Use this attribute to assign a fixed control identifier that can be later on used within your test tool in order to do the object identification

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

CSS style classes separated by a blank.

bg-light

ml-*

mr-*

mx-*

mx-sm-*

mx-md-*

mx-lg-*

mx-xl-*

mt-*

mb-*

my-*

border border-primary

border border-secondary

border border-dark

border border-light

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

A string value which can be used in the BMOBILE:TOGGLER to toggle the visibility. The specified id must be unique within this layout.

CSS style classes separated by a blank.

bg-dark

bg-light

bg-primary

bg-secondary

border border-primary

border border-secondary

border border-dark

border border-light

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

Text that is shown as tooltip for the control.

Either specify the text "hard" by using this TITLE property - or use the TITLETEXTID in order to define a language dependent literal.

Use this attribute to assign a fixed control identifier that can be later on used within your test tool in order to do the object identification

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

CSS style classes separated by a blank.

ml-*

mr-*

mx-*

mx-sm-*

mx-md-*

mx-lg-*

mx-xl-*

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

CSS style classes separated by a blank.

fixed-bottom

bg-dark navmenu-dark

bg-light navmenu-light

navmenu-light

navmenu-dark

bg-primary

bg-secondary

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

Text that is shown as tooltip for the control.

Either specify the text "hard" by using this TITLE property - or use the TITLETEXTID in order to define a language dependent literal.

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

CSS style classes separated by a blank.

bg-light

ml-*

mr-*

mx-*

mx-sm-*

mx-md-*

mx-lg-*

mx-xl-*

mt-*

mb-*

my-*

border border-primary

border border-secondary

border border-dark

border border-light

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

There are several rendering modes. For example set this property to nav-pills if you want the tabs to be rendered as pills.

nav-tabs

nav-pills

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

CSS style classes separated by a blank.

col-*

col-sm-*

col-md-*

col-lg-*

col-xl-*

border border-primary

border border-secondary

border border-dark

border border-light

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

Defines the proportional relationship between width and height of the control. Example: 4by3

1by1

16by9

21by9

4by3

Width of the control.

There are three possibilities to define the width:

(A) You do not define a width at all. In this case the width of the control will either be a default width or - in case of container controls - it will follow the width that is occupied by its content.

(B) Pixel sizing: just input a number value (e.g. "100").

(C) Percentage sizing: input a percantage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a width this control can reference. If you specify this control to have a width of 50% then the parent element (e.g. an ITR-row) may itself define a width of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect.

100

120

140

160

180

200

50%

100%

Height of the control.

There are three possibilities to define the height:

(A) You do not define a height at all. As consequence the control will be rendered with its default height. If the control is a container control (containing) other controls then the height of the control will follow the height of its content.

(B) Pixel sizing: just input a number value (e.g. "20").

(C) Percentage sizing: input a percentage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a height this control can reference. If you specify this control to have a height of 50% then the parent element (e.g. an ITR-row) may itself define a height of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect.

100

150

200

250

300

250

400

50%

100%

If set to true a small button is added to hide and show the navigation tabs.

true

false

There are several rendering modes. For example set this property to nav-pills if you want the tabs to be rendered as pills.

nav-tabs

nav-pills

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

CSS style classes separated by a blank.

Inline CSS style settings applied to the pane.

CSS style classes separated by a blank applied to the pane. For responsive pages it is recommended to apply one of the col-* classes to define the width.

col-*

col-sm-*

col-md-*

col-lg-*

col-xl-*

border border-primary

border border-secondary

border border-dark

border border-light

Inline CSS style settings applied to the navigation tabs.

CSS style classes separated by a blank applied to the navigation tabs. For responsive pages it is recommended to apply one of the col-* classes to define the width.

col-auto

col

col-*

col-sm-*

col-md-*

col-lg-*

col-xl-*

offset-*

offset-sm-*

offset-md-*

offset-lg-*

offset-xl-*

mx-auto

btn-group

btn-group-vertical

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

Defines the proportional relationship between width and height of the control. Example: 4by3

1by1

16by9

21by9

4by3

Width of the control.

There are three possibilities to define the width:

(A) You do not define a width at all. In this case the width of the control will either be a default width or - in case of container controls - it will follow the width that is occupied by its content.

(B) Pixel sizing: just input a number value (e.g. "100").

(C) Percentage sizing: input a percantage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a width this control can reference. If you specify this control to have a width of 50% then the parent element (e.g. an ITR-row) may itself define a width of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect.

100

120

140

160

180

200

50%

100%

Height of the control.

There are three possibilities to define the height:

(A) You do not define a height at all. As consequence the control will be rendered with its default height. If the control is a container control (containing) other controls then the height of the control will follow the height of its content.

(B) Pixel sizing: just input a number value (e.g. "20").

(C) Percentage sizing: input a percentage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a height this control can reference. If you specify this control to have a height of 50% then the parent element (e.g. an ITR-row) may itself define a height of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect.

100

150

200

250

300

250

400

50%

100%

If set to true a small button is added to hide and show the navigation tabs.

true

false

Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead.

Name of adapter parameter which dynamically provides the text that is shown inside the control.

Multi language dependent text that is displayed inside the control. The "textid" is translated into a corresponding string at runtime.

Do not specify a "name" inside the control if specifying a "textid".

If the text of the control contains HTML tags then these are by default interpreted by the browser. Specifiying STRAIGHTTEXT as "true" means that the browser will directly render the characters without HTML interpretation.

Example: if you want to output the source of an HTML text then STRAIGHTTEXT should be set to "true".

true

false

This property has three possible values:

(1) "invisible": the control is not visible without occupying any space.

(2) "disabled": the control is deactivated: it is "grayed" and does not show any roll over effects any more.

(3)"cleared": the control is not visible but it still occupies space.

invisible

disabled

Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically.

Name of the event that is sent to the adapter when the user does a "tab" selection. The index of the "tab" that is opened can be transferred to the adapter by using the property OPENEDINDEXPROP.

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

CSS style classes separated by a blank.

bg-light

ml-*

mr-*

mx-*

mx-sm-*

mx-md-*

mx-lg-*

mx-xl-*

mt-*

mb-*

my-*

border border-primary

border border-secondary

border border-dark

border border-light

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

Name of the adapter parameter that provides the content of the control.

There are several rendering modes. For example set this property to nav-pills if you want the tabs to be rendered as pills.

nav-tabs

nav-pills

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

CSS style classes separated by a blank.

bg-light

ml-*

mr-*

mx-*

mx-sm-*

mx-md-*

mx-lg-*

mx-xl-*

mt-*

mb-*

my-*

border border-primary

border border-secondary

border border-dark

border border-light

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

Defines the proportional relationship between width and height of the control. Example: 4by3

1by1

16by9

21by9

4by3

Width of the control.

There are three possibilities to define the width:

(A) You do not define a width at all. In this case the width of the control will either be a default width or - in case of container controls - it will follow the width that is occupied by its content.

(B) Pixel sizing: just input a number value (e.g. "100").

(C) Percentage sizing: input a percantage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a width this control can reference. If you specify this control to have a width of 50% then the parent element (e.g. an ITR-row) may itself define a width of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect.

100

120

140

160

180

200

50%

100%

Height of the control.

There are three possibilities to define the height:

(A) You do not define a height at all. As consequence the control will be rendered with its default height. If the control is a container control (containing) other controls then the height of the control will follow the height of its content.

(B) Pixel sizing: just input a number value (e.g. "20").

(C) Percentage sizing: input a percentage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a height this control can reference. If you specify this control to have a height of 50% then the parent element (e.g. an ITR-row) may itself define a height of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect.

100

150

200

250

300

250

400

50%

100%

Flag indicating whether the adapter should be triggered if the user switches between pages. If set to true, method trigger() inside the TABSUBPAGESInfo object is called - before switching the page. Therefore the adapter can abort a page switch - maybe a user has to enter some data first on the current page before switching to another one.

true

false

If set to true a small button is added to hide and show the navigation tabs.

true

false

If set to true tabs can have drop-down menus. An additional Natural field level is generated.

true

false

There are several rendering modes. For example set this property to nav-pills if you want the tabs to be rendered as pills.

nav-tabs

nav-pills

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

CSS style classes separated by a blank.

Inline CSS style settings applied to the pane.

CSS style classes separated by a blank applied to the pane. For responsive pages it is recommended to apply one of the col-* classes to define the width.

col-*

col-sm-*

col-md-*

col-lg-*

col-xl-*

border border-primary

border border-secondary

border border-dark

border border-light

Inline CSS style settings applied to the navigation tabs.

CSS style classes separated by a blank applied to the navigation tabs. For responsive pages it is recommended to apply one of the col-* classes to define the width.

col-auto

col

col-*

col-sm-*

col-md-*

col-lg-*

col-xl-*

offset-*

offset-sm-*

offset-md-*

offset-lg-*

offset-xl-*

mx-auto

btn-group

btn-group-vertical

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

Defines the proportional relationship between width and height of the control. Example: 4by3

1by1

16by9

21by9

4by3

Width of the control.

There are three possibilities to define the width:

(A) You do not define a width at all. In this case the width of the control will either be a default width or - in case of container controls - it will follow the width that is occupied by its content.

(B) Pixel sizing: just input a number value (e.g. "100").

(C) Percentage sizing: input a percantage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a width this control can reference. If you specify this control to have a width of 50% then the parent element (e.g. an ITR-row) may itself define a width of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect.

100

120

140

160

180

200

50%

100%

Height of the control.

There are three possibilities to define the height:

(A) You do not define a height at all. As consequence the control will be rendered with its default height. If the control is a container control (containing) other controls then the height of the control will follow the height of its content.

(B) Pixel sizing: just input a number value (e.g. "20").

(C) Percentage sizing: input a percentage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a height this control can reference. If you specify this control to have a height of 50% then the parent element (e.g. an ITR-row) may itself define a height of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect.

100

150

200

250

300

250

400

50%

100%

If set to true a small button is added to hide and show the navigation tabs.

true

false

If set to true tabs can have drop-down menus. An additional Natural field level is generated.

true

false

Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead.

Name of adapter parameter which dynamically provides the text that is shown inside the control.

Multi language dependent text that is displayed inside the control. The "textid" is translated into a corresponding string at runtime.

Do not specify a "name" inside the control if specifying a "textid".

If the text of the control contains HTML tags then these are by default interpreted by the browser. Specifiying STRAIGHTTEXT as "true" means that the browser will directly render the characters without HTML interpretation.

Example: if you want to output the source of an HTML text then STRAIGHTTEXT should be set to "true".

true

false

This property has three possible values:

(1) "invisible": the control is not visible without occupying any space.

(2) "disabled": the control is deactivated: it is "grayed" and does not show any roll over effects any more.

(3)"cleared": the control is not visible but it still occupies space.

invisible

disabled

Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically.

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

CSS style classes separated by a blank.

bg-light

ml-*

mr-*

mx-*

mx-sm-*

mx-md-*

mx-lg-*

mx-xl-*

mt-*

mb-*

my-*

border border-primary

border border-secondary

border border-dark

border border-light

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

CSS style classes separated by a blank.

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

Maximum number of pager buttons. Each pager button holds a link for the last clicked tab.