Responsive Containers

#### Search Results

Search

# Responsive Containers

- BMOBILE:CARD

- BMOBILE:CARDCONTAINER

- BMOBILE:COL

- BMOBILE:PANEL

- BMOBILE:ACCORDION

- BMOBILE:ROW

- BMOBILE:CONTAINER

- BMOBILE:FORM, BMOBILE:FORMINLINE

- BMOBILE:FORMAREA

- BMOBILE:FORMGROUP

- BMOBILE:LISTGROUP

- BMOBILE:OFFCANVAS

- BMOBILE:DYNCANVAS

- BMOBILE:SIDEBARCONTAINER, BMOBILE:SIDEBAR, BMOBILE:SIDEBARGROUP, BMOBILE:HORIZONTALBAR, BMOBILE:CONTENT

- BMOBILE:TABPANE, BMOBILE:VERTICALTABPANE and BMOBILE:TAB

- BMOBILE:TABSUBPAGES, BMOBILE:VERTICALTABSUBPAGES, BMOBILE:STRAIGHTTAB and BMOBILE:PAGER

## BMOBILE:CARD

- BMOBILE:CARDBODY

- BMOBILE:CARDFOOTER

- BMOBILE:CARDHEADER

A card is a box with an optional header, an optional footer, an optional image, and a body with textual content, a list group, or both.

You can arrange multiple cards in a BMOBILE:CARDCONTAINER. You can also add them to other controls into a BMOBILE:ROW.

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
imageurl | 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. specifying "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". | Optional |
imageurlprop | Name of adapter parameter that provides as value the URL of the image that is shown inside the control. | Optional |
visibleprop | 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. | Optional |
oncontextmenumethod | Name of the event that is sent to the adapter when the user presses the right mouse button in an empty area of the client tree. | Optional |
Appearance
invisiblemode | 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. | Optional | invisible disabled cleared
styleclasses | CSS style classes separated by a blank. | Optional | 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
style | 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. | Optional |
imagestyleclasses | CSS style classes separated by a blank. | Optional | baricon-svg icon-svg-primary w-* p-* mx-auto
imagestyle | 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. | Optional |
imageposition | The position of the image within it's container. Valid values are "top" and "bottom". | Optional | top bottom left right
imageoverlay | If set to TRUE the image will be used as card background and overlayed with the card body. | Optional | true false
tabindex | Index that defines the tab order of the control. Controls are selected in increasing index order and in source order to resolve duplicates. | Optional | -1 0 1 2 5 10 32767
Miscellaneous
testtoolid | 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 | Optional |

### BMOBILE:CARDBODY

A cardbody renders contextual content in a card.

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
name | Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead. | Optional |
namestraighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. specifying 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". | Optional | true false
subname | Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead. | Optional |
subnamestraighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. specifying 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". | Optional | true false
text | Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead. | Optional |
textstraighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. specifying 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". | Optional | true false
nameprop | Name of adapter parameter which dynamically provides the text that is shown inside the control. | Optional |
subnameprop | Name of adapter parameter which dynamically provides the text that is shown inside the control. | Optional |
textprop | Name of adapter parameter which dynamically provides the text that is shown inside the control. | Optional |
Appearance
styleclasses | CSS style classes separated by a blank. | Optional | 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
style | 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. | Optional |
namestyleclasses | CSS style classes separated by a blank. | Optional | 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
namestyle | 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. | Optional |
namehtmlheading | The rendering of the heading: H1-H6 | Optional | h1 h2 h3 h4 h5 h6
subnamestyleclasses | CSS style classes separated by a blank. | Optional | 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
subnamestyle | 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. | Optional |
subnamehtmlheading | The rendering of the heading: H1-H6 | Optional | h1 h2 h3 h4 h5 h6
textstyleclasses | CSS style classes separated by a blank. | Optional | 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
textstyle | 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. | Optional |

### BMOBILE:CARDFOOTER

An optional footer for cards.

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
nameprop | Name of adapter parameter which dynamically provides the text that is shown inside the control. | Optional |
name | Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead. | Optional |
textid | 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". | Optional |
straighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. specifying 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". | Optional | true false
Appearance
styleclasses | CSS style classes separated by a blank. | Optional | 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 text-center text-right text-left text-truncate
style | 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. | Optional |

### BMOBILE:CARDHEADER

An optional header for cards.

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
nameprop | Name of adapter parameter which dynamically provides the text that is shown inside the control. | Optional |
name | Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead. | Optional |
textid | 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". | Optional |
straighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. specifying 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". | Optional | true false
Appearance
styleclasses | CSS style classes separated by a blank. | Optional | 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 text-center text-right text-left text-truncate
style | 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. | Optional |

## BMOBILE:CARDCONTAINER

A BMOBILE:CARDCONTAINER contains several cards. The following options are supported to arrange the cards in the container:

#### Card Decks

The cards are rendered as a grid of cards with equal height and width. On small devices the cards are arranged vertically. On medium and large devices, cards are arranged horizontally in one line.

#### Card Groups

The arrangement of the cards is the same as for card decks. The only difference is that there are no gaps between the cards.

#### Card Columns

You can create masonry-like grid of cards. The cards can be of different sizes. Simply add several cards to the container, and they will be arranged – including line breaks – automatically depending on the number of cards and the device.

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
visibleprop | 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. | Optional |
invisiblemode | 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. | Optional | invisible disabled cleared
containertype | The cards will be arranged according to the container type. Supported values are: deck, group and columns. | Optional | deck columns
Appearance
styleclasses | CSS style classes separated by a blank. | Optional | 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
style | 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. | Optional |

## BMOBILE:COL

BMOBILE: COL supports the responsive grid system of Bootstrap.

#### Properties

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
invisiblemode | 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. | Optional | invisible disabled cleared
visibleprop | 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. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | 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
style | 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. | Optional |

## BMOBILE:PANEL

BMOBILE:PANEL supports the responsive grid system of Bootstrap.

#### Properties

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
foldable | The "folding"-function that is available by clicking on the title of the area can be switched off ("false"). "True" is the default. | Optional | true false
foldedprop | 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. | Optional |
visibleprop | 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. | Optional |
tabindex | Index that defines the tab order of the control. Controls are selected in increasing index order and in source order to resolve duplicates. | Optional | -1 0 1 2 5 10 32767
oncontextmenumethod | Name of the event that is sent to the adapter when the user presses the right mouse button in an empty area of the client tree. | Optional |
Appearance
invisiblemode | 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. | Optional | invisible disabled cleared
styleclasses | CSS style classes separated by a blank. | Optional | panel-warning panel-success panel-danger panel-info ml-* mr-* mx-*
style | 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. | Optional |
tabindex | (already explained above) |  |
Miscellaneous
testtoolid | 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 | Optional |

## BMOBILE:ACCORDION

- BMOBILE:ACCORDIONITEM

- BMOBILE:ACCORDIONHEADER

- BMOBILE:ACCORDIONBODY

The BMOBILE:ACCORDION control organizes content into expandable BMOBILE:ACCORDIONITEM controls. A BMOBILE:ACCORDIONITEM consists of a BMOBILE:ACCORDIONHEADER and a BMOBILE:ACCORDIONBODY. You can toggle an item by clicking its header. In the body, you can show arbitrary controls and containers.

Examples for the body content:

- Use the BMOBILE:IHTML control to dynamically load and display HTML content from your server.

- Use form controls to embed simple input forms within the accordion body.

- Use the BMOBILE:GRID or BMOBILE:SIMPLEGRID to show grid data. Lazy loading is supported by the `openmethod` property.

- Use the BMOBILE:SUBPAGE to show documents.

- Use the general BMOBILE:ROW container to embed any control or nested container within the accordion body.

For details, see the corresponding samples in the NaturalAjaxDemos.

#### Properties

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional |
style | 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. | Optional |
visibleprop | 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. | Optional |
invisiblemode | 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. | Optional | invisible disabled cleared
alwaysopen | Set to true to allow multiple items to remain expanded at the same time. | Optional | true false
Miscellaneous
testtoolid | 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 | Optional |

### BMOBILE:ACCORDIONITEM

An accordion item with BMOBILE:ACCORDIONHEADER and BMOBILE:ACCORDIONBODY as subcontrols.

#### Properties

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional |
style | 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. | Optional |
openedprop | Name of the adapter parameter that dynamically provides the information if the accordion item is expanded (TRUE) or collapsed (FALSE). | Optional |
visibleprop | 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. | Optional |
invisiblemode | 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. | Optional | invisible disabled
openmethod | Name of the event that is sent to the adapter when the user expands or collapses an item. | Optional |

### BMOBILE:ACCORDIONHEADER

An accordion header with a toggle button, optional icons and badges.

#### Properties

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
name | Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead. | Optional |
nameprop | Name of adapter parameter which dynamically provides the text that is shown inside the control. | Optional |
textid | 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". | Optional |
straighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. specifying 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". | Optional | true false
iconfont | Icon font that is displayed to the left of the header text. | Optional |
iconfontprop | Name of adapter parameter which dynamically provides the icon font that is displayed to the left of the header text. | Optional |
iconurl | 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. specifying "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". | Optional |
iconurlprop | Name of adapter parameter that provides as value the URL of the image that is shown inside the control. | Optional |
badge | Text for a badge that is shown to the right of the header text. | Optional |
badgeprop | Name of the adapter parameter that dynamically provides the text of the badge for an item at runtime. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional |
style | 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. | Optional |
badgestyleclasses | CSS style classes separated by a blank. These classes are applied to the badge of the items. | Optional |
iconstyleclasses | CSS style classes separated by a blank. These classes are applied to the icon of the items. | Optional |
iconfontstyleclasses | CSS style classes separated by a blank. These classes are applied to the icon font of the items. | Optional |

### BMOBILE:ACCORDIONBODY

An accordion body with general containers as subcontrols.

#### Properties

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | 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
style | 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. | Optional |

## BMOBILE:ROW

BMOBILE:ROW supports the responsive grid system of Bootstrap.

#### Properties

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
invisiblemode | 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. | Optional | invisible disabled cleared
visibleprop | 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. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | no-gutters row-cols-* row-cols-sm-* row-cols-md-* row-cols-lg-* row-cols-xl-*
style | 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. | Optional |

## BMOBILE:CONTAINER

A responsive container into which you add your controls, grids and other containers. You usually have exactly one BMOBILE:CONTAINER per page.

#### Properties

Basic
takefullwidth | 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. | Optional | true false
takefullheight | 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. | Optional | true false
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | 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
style | 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. | Optional |
Accessibility
role | If set a role attribute is added to the html for screen readers. Example values are: banner, main, navigation. | Optional | main banner contentinfo complementary navigation

## BMOBILE:FORM, BMOBILE:FORMINLINE

These forms are more light-weight and flexible than `BMOBILE:FORMAREA`. Use the `BMOBILE:FORMINLINE` to add forms to bars like the `BMOBILE:HORIZONTALBAR` and the `BMOBILE:SIDEBAR`.

These forms are not supported for Bootstrap 3.

- Properties for BMOBILE:FORM

- Properties for BMOBILE:FORMINLINE

### Properties for BMOBILE:FORM

Basic
displayonly | If set to true, the FIELD will not be accessible for input. It is just used as an output field. | Optional | true false
invisiblemode | 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. | Optional | invisible disabled cleared
visibleprop | 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. | Optional |
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | d-none d-md-block d-none d-lg-block ml-* mr-* mx-*
style | 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. | Optional |
Miscellaneous
testtoolid | 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 | Optional |

### Properties for BMOBILE:FORMINLINE

Basic
displayonly | If set to true, the FIELD will not be accessible for input. It is just used as an output field. | Optional | true false
invisiblemode | 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. | Optional | invisible disabled cleared
visibleprop | 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. | Optional |
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | d-none d-md-block d-none d-lg-block ml-* mr-* mx-*
style | 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. | Optional |
Miscellaneous
testtoolid | 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 | Optional |

## BMOBILE:FORMAREA

The surrounding container for forms. Within a BMOBILE:FORMAREA you can have several BMOBILE:FORMGROUP containers.

#### Properties

Basic
legend | A caption shown for the formarea. | Optional |
legendprop | The name of the adapter parameter which dynamically defines the caption of the formarea at runtime. | Optional |
textid | 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". | Optional |
invisiblemode | 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. | Optional | invisible disabled cleared
displayonly | If set to true, the FIELD will not be accessible for input. It is just used as an output field. | Optional | true false
visibleprop | 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. | Optional |
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | 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
style | 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. | Optional |
Miscellaneous
testtoolid | 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 | Optional |

## BMOBILE:FORMGROUP

Use this container to group several BMOBILE:FLABEL and input controls like BMOBILE:FFIELD within a form.

#### Properties

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | d-none d-md-block d-none d-lg-block ml-* mr-* mx-*
style | 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. | Optional |
invisiblemode | 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. | Optional | invisible disabled cleared
renderasrow | 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. | Optional | true false
visibleprop | 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. | Optional |
name | Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead. | Optional |
Accessibility
setinputlabel | 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. | Optional | true false
namesronly | 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. | Optional | true false
Miscellaneous
testtoolid | 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 | Optional |

## BMOBILE:LISTGROUP

A list group displays a number of items as a vertical list. Use LISTGROUP to selectively display a certain number of items.

No scrollbar or pagination is applied. For huge item numbers, consider using grid controls instead.

You can create listgroups with simple readonly items or listgroups with items that can be activated, and that can trigger events on the server and on the client.

Basic
valueprop | Name of the adapter parameter that provides the content of the control. | Obligatory |
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
changeindexprop | 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. | Optional |
Binding
disabledprop | 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. | Optional |
methodprop | 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. | Optional |
textprop | Name of the adapter parameter which dynamically provides the text for the marker at runtime. | Optional |
titleprop | 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. | Optional |
itemstyleclassesprop | Name of the adapter parameter that dynamically provides CSS style classes separated by a blank. These classes are applied to the item. | Optional |
badgestyleclassesprop | Name of the adapter parameter that dynamically provides CSS style classes separated by a blank. These classes are applied to badge of the item. | Optional |
iconstyleclassesprop | Name of the adapter parameter that dynamically provides CSS style classes separated by a blank. These classes are applied to the icon of the item. | Optional |
textstyleclassesprop | Name of the adapter parameter that dynamically provides CSS style classes separated by a blank. These classes are applied to the text of the item. | Optional |
Appearance
itemstyle | 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. | Optional |
itemstyleclasses | CSS style classes separated by a blank. These classes are applied to all items in the list. | Optional | 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
style | 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. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | list-group-flush
straighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. specifying 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". | Optional | true false
titlestraighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. specifying 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". | Optional | true false
badgeprop | Name of the adapter parameter that dynamically provides the text of the badge for an item at runtime. | Optional |
badgeposition | Position where a badge is rendered. Valid values are right and left. Default is right. | Optional | right left
iconurlprop | Name of the adapter parameter which dynamically provides the url of the icon for an item at runtime. | Optional |
iconposition | Position where an icon is rendered. Valid values are right and left. Default is left. | Optional | right left
badgestyleclasses | CSS style classes separated by a blank. These classes are applied to the badge of the items. | Optional |
iconstyleclasses | CSS style classes separated by a blank. These classes are applied to the icon of the items. | Optional |
iconstyle | CSS style definition that is directly passed into this control. It is applied to the icon of the items. | Optional |
textstyleclasses | CSS style classes separated by a blank. These classes are applied to the text of the items | Optional |
textstyle | CSS style definition that is directly passed into this control. It is applied to the text of the items. | Optional |
Natural
njx:natname | If a Natural variable with a name not valid for Application Designer (for instance #FIELD1) shall be bound to the control, a different name (for instance HFIELD1) can be bound instead. If the original name (in this case #FIELD1) is then specified in this attribute, the original name is generated into the parameter data area of the Natural adapter and a mapping between the two names is generated into the PROCESS PAGE statement of the Natural adapter. This mapping must not break a once defined group structure. If for instance a grid control that is bound to a name of GRID1 contains fields that are bound to FIELD1 and FIELD2 respectively, the corresponding njx:natname values may be #GRID1.#FIELD1 and #GRID1.#FIELD2, but not #GRID1.#FIELD1 and #MYGRID1.#FIELD2. | Optional |
njx:natstringtype | If the control shall be bound to a Natural system variable of string format with the attribute njx:natsysvar, this attribute indicates the format of the string, A (code page) or U (Unicode). The default is A. | Optional |
njx:natcomment | The value of this attribute is generated as comment line into the parameter data area of the Natural adapter, before the field name. The Map Converter, for instance, uses this attributes to indicate a generated statusprop variable to which field the statusprop belongs. | Optional |
Miscellaneous
testtoolid | 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 | Optional |

## BMOBILE:OFFCANVAS

- BMOBILE:OFFCANVASHEADER

- BMOBILE:OFFCANVASBODY

The `BMOBILE:OFFCANVAS` control provides a seamless way to integrate contextual information and dynamic navigation into your application without interrupting the main content. It functions as a sliding panel that can contain various controls and containers to suit your specific needs. The panel can slide in from the left, right, top, or bottom of the screen. To trigger the panel, you can use either the `BMOBILE:TOGGLER` control or a `BMOBILE:BUTTON` control. It is often used in combination with the `BMOBILE:NAVMENU2` to implement a navigation sidebar.

A `BMOBILE:OFFCANVAS` consists of a `BMOBILE:OFFCANVASHEADER` and a `BMOBILE:OFFCANVASBODY`.

Examples for the body content:

- Use the `BMOBILE:NAVMENU2` control to implement navigation sidebar with a traditional one- or two-level menu.

- Use `BMOBILE:CARD` controls to implement a modern navigation panel that slides in from the top.

- Use form controls to provide additional contextual information or customization for your page, such as filters, settings or search values.

For details, see the corresponding samples in the NaturalAjaxDemos.

#### Properties

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
valueprop | Name of the adapter parameter that provides the content of the control. | Optional |
offcanvasid | An id string for this offcanvas panel. You can use this id in buttons to open the offcanvas panel. For an offcanvasid myoffcanvasid the method name in a button is offcanvas:myoffcanvasid. | Optional |
scrollable | Set it to TRUE if want the body of the page to remain scrollable while the OFFCANVAS panel is open. | Optional | true false
backdrop | Set it to FALSE if you don't block the interaction for the rest of the page while the offcanvas panel is open. | Optional | true false
closeonclick | Per default the pop-up dialog is closed when clicking outside of the pop-up. Set this property to FALSE if you don't want the pop-up dialog to automatically close when clicking outside. | Optional | true false
closeonesc | Per default the pop-up dialog is closed when the escape key is pressed. Set this property to FALSE if you don't want the he pop-up to automatically close when escape is pressed. | Optional | true false
position | Per default the panel slides in from left. Set it to right, top or bottom is you want the panel to slide in from this position. | Optional | top bottom left right
styleclasses | CSS style classes separated by a blank. | Optional |
style | 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. | Optional |
Natural
njx:natname | If a Natural variable with a name not valid for Application Designer (for instance #FIELD1) shall be bound to the control, a different name (for instance HFIELD1) can be bound instead. If the original name (in this case #FIELD1) is then specified in this attribute, the original name is generated into the parameter data area of the Natural adapter and a mapping between the two names is generated into the PROCESS PAGE statement of the Natural adapter. This mapping must not break a once defined group structure. If for instance a grid control that is bound to a name of GRID1 contains fields that are bound to FIELD1 and FIELD2 respectively, the corresponding njx:natname values may be #GRID1.#FIELD1 and #GRID1.#FIELD2, but not #GRID1.#FIELD1 and #MYGRID1.#FIELD2. | Optional |
njx:natstringtype | If the control shall be bound to a Natural system variable of string format with the attribute njx:natsysvar, this attribute indicates the format of the string, A (code page) or U (Unicode). The default is A. | Optional |
njx:natcomment | The value of this attribute is generated as comment line into the parameter data area of the Natural adapter, before the field name. The Map Converter, for instance, uses this attributes to indicate a generated statusprop variable to which field the statusprop belongs. | Optional |
Miscellaneous
testtoolid | 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 | Optional |

### BMOBILE:OFFCANVASHEADER

An offcanvas header name and an optional close button.

#### Properties

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | font-italic font-weight-bold font-weight-bolder font-weight-light font-weight-lighter bg-warning bg-success bg-danger bg-info bg-primary bg-secondary bg-success bg-warning bg-dark bg-light
style | 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. | Optional |
name | Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead. | Optional |
nameprop | Name of adapter parameter which dynamically provides the text that is shown inside the control. | Optional |
straighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. specifying 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". | Optional | true false
withclosebutton | Per default the opened pop-up dialog contains a close button in the footer and in the header. Set this property to FALSE if you don't want close buttons in header of footer of the pop-up. | Optional | true false
textid | 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". | Optional |
htmlheading | The rendering of the heading: H1-H6 | Optional | h1 h2 h3 h4 h5 h6
Natural
njx:natname | If a Natural variable with a name not valid for Application Designer (for instance #FIELD1) shall be bound to the control, a different name (for instance HFIELD1) can be bound instead. If the original name (in this case #FIELD1) is then specified in this attribute, the original name is generated into the parameter data area of the Natural adapter and a mapping between the two names is generated into the PROCESS PAGE statement of the Natural adapter. This mapping must not break a once defined group structure. If for instance a grid control that is bound to a name of GRID1 contains fields that are bound to FIELD1 and FIELD2 respectively, the corresponding njx:natname values may be #GRID1.#FIELD1 and #GRID1.#FIELD2, but not #GRID1.#FIELD1 and #MYGRID1.#FIELD2. | Optional |
njx:natstringtype | If the control shall be bound to a Natural system variable of string format with the attribute njx:natsysvar, this attribute indicates the format of the string, A (code page) or U (Unicode). The default is A. | Optional |
njx:natcomment | The value of this attribute is generated as comment line into the parameter data area of the Natural adapter, before the field name. The Map Converter, for instance, uses this attributes to indicate a generated statusprop variable to which field the statusprop belongs. | Optional |
Miscellaneous
testtoolid | 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 | Optional |

### BMOBILE:OFFCANVASBODY

An offcanvas body with general containers as sub controls.

#### Properties

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | 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
style | 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. | Optional |
Miscellaneous
testtoolid | 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 | Optional |

## BMOBILE:DYNCANVAS

Instead of applying `BMOBILE:OFFCANVAS` controls to each page, you can design your sliding panel as a separate page layout. This approach supports modular design and avoids layout duplication. Ensure that you have exactly one `BMOBILE:DYNCANVAS` (that is, one dynamic sliding panel) on the pages from which you want to open the sliding panel. For new layouts, the Bootstrap 5 templates already contain this control. This allows you to dynamically trigger the opening of sliding panels from your Natural program.

The `BMOBILE:DYNCANVAS` defines the general behavior of the dynamic sliding panels opened by this page, such as sliding in from the left, right, or bottom. All pages containing a `BMOBILE:DYNCANVAS` can open sliding panels, and you can dynamically decide at runtime whether your page uses dynamic sliding panels or not. You do not need to decide this at design time.

Design the content of your sliding panel in the usual way as a separate page layout.

Apply an `NJX:XCIOPENPOPUP` to the pages from which you want to open sliding panels.

Use the `PROCESS PAGE MODAL` statement to open sliding panels, just as you would for pop-ups. Dynamic sliding panels are a special type of pop-up. Set the `XCIOPENPOPUP.POPUPTYPE` field in your Natural program to "BMPANEL".

#### Properties

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
scrollable | Set it to TRUE if want the body of the page to remain scrollable while the OFFCANVAS panel is open. | Optional | true false
closeonclick | Per default the pop-up dialog is closed when clicking outside of the pop-up. Set this property to FALSE if you don't want the pop-up dialog to automatically close when clicking outside. | Optional | true false
closeonesc | Per default the pop-up dialog is closed when the escape key is pressed. Set this property to FALSE if you don't want the he pop-up to automatically close when escape is pressed. | Optional | true false
position | Determines which side of the screen (left, right, top, bottom) the panel will slide in from when it is opened. | Optional | top bottom left right
withclosebutton | Per default the opened pop-up dialog contains a close button in the footer and in the header. Set this property to FALSE if you don't want close buttons in header of footer of the pop-up. | Optional | true false
Miscellaneous
testtoolid | 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 | Optional |

## BMOBILE:SIDEBARCONTAINER, BMOBILE:SIDEBAR, BMOBILE:SIDEBARGROUP, BMOBILE:HORIZONTALBAR, BMOBILE:CONTENT

These containers support frequently used patterns for modern responsive pages. Additional controls like `BMOBILE:TOGGLER`, `BMOBILE:SIDEBARGROUP`, `BMOBILE:BARTEXT` support corresponding functionality for flexible rendering of bars and arbitrary menus and controls inside the bars. You can put all kinds of containers like rows, panels or complete pages into the `BMOBILE:CONTENT` container.

When dragging the `BMOBILE:SIDEBARCONTAINER` control from the palette to your page layout, several controls are arranged as sub-controls under the `BMOBILE:SIDEBARCONTAINER`. You can arrange the controls differently, replace, add, remove containers and style them. You can add all kind of content as child nodes of the `BMOBILE:CONTENT`. You can also use the `BMOBILE:HORIZONTALBAR` without `BMOBILE:SIDEBARCONTAINER`.

The NaturalAjaxDemos contain a running example. These containers are not supported for Bootstrap 3.

The responsive view of the Natural Ajax Demos itself is an example for a usage of the side navigation controls.

- Properties for BMOBILE:SIDEBARCONTAINER

- Properties for BMOBILE:SIDEBAR

- Properties for BMOBILE:SIDEBARGROUP

- Properties for BMOBILE:HORIZONTALBAR

- Properties for BMOBILE:CONTENT

### Properties for BMOBILE:SIDEBARCONTAINER

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | 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
style | 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. | Optional |

### Properties for BMOBILE:SIDEBAR

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
toggleid | A string value which can be used in the BMOBILE:TOGGLER to toggle the visibility. The specified id must be unique within this layout. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | bg-dark bg-light bg-primary bg-secondary border border-primary border border-secondary border border-dark border border-light
style | 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. | Optional |
title | 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. | Optional |
Miscellaneous
testtoolid | 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 | Optional |

### Properties for BMOBILE:SIDEBARGROUP

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | ml-* mr-* mx-* mx-sm-* mx-md-* mx-lg-* mx-xl-*
style | 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. | Optional |

### Properties for BMOBILE:HORIZONTALBAR

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | fixed-bottom bg-dark navmenu-dark bg-light navmenu-light navmenu-light navmenu-dark bg-primary bg-secondary
style | 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. | Optional |
title | 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. | Optional |

### Properties for BMOBILE:CONTENT

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | 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
style | 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. | Optional |

## BMOBILE:TABPANE, BMOBILE:VERTICALTABPANE and BMOBILE:TAB

Use these controls to implement responsive tab controls. Inside a BMOBILE:TABPANE and a BMOBILE:VERTICALTABPANE you can define BMOBILE:TAB containers representing the individual tab pages between which you can navigate. All HTML code for all tabs will be generated into one HTML page.

- Properties for BMOBILE:TABPANE

- Properties for BMOBILE:VERTICALTABPANE

- Properties for BMOBILE:TAB

### Properties for BMOBILE:TABPANE

Basic
navmode | There are several rendering modes. For example set this property to nav-pills if you want the tabs to be rendered as pills. | Optional | nav-tabs nav-pills
style | 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. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | col-* col-sm-* col-md-* col-lg-* col-xl-* border border-primary border border-secondary border border-dark border border-light
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
aspectratio | Defines the proportional relationship between width and height of the control. Example: 4by3 | Optional | 1by1 16by9 21by9 4by3
width | 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 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 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. | Optional | 100 120 140 160 180 200 50% 100%
height | 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. | Optional | 100 150 200 250 300 250 400 50% 100%
withcollapse | If set to true a small button is added to hide and show the navigation tabs. | Optional | true false

### Properties for BMOBILE:VERTICALTABPANE

Basic
navmode | There are several rendering modes. For example set this property to nav-pills if you want the tabs to be rendered as pills. | Optional | nav-tabs nav-pills
style | 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. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional |
panecolstyle | Inline CSS style settings applied to the pane. | Optional |
panecolstyleclasses | 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. | Optional | col-* col-sm-* col-md-* col-lg-* col-xl-* border border-primary border border-secondary border border-dark border border-light
navcolstyle | Inline CSS style settings applied to the navigation tabs. | Optional |
navcolstyleclasses | 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. | Optional | 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 | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
aspectratio | Defines the proportional relationship between width and height of the control. Example: 4by3 | Optional | 1by1 16by9 21by9 4by3
width | 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 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 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. | Optional | 100 120 140 160 180 200 50% 100%
height | 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. | Optional | 100 150 200 250 300 250 400 50% 100%
withcollapse | If set to true a small button is added to hide and show the navigation tabs. | Optional | true false

### Properties for BMOBILE:TAB

Basic
name | Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead. | Optional |
nameprop | Name of adapter parameter which dynamically provides the text that is shown inside the control. | Optional |
textid | 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". | Optional |
straighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. specifying 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". | Optional | true false
invisiblemode | 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. | Optional | invisible disabled
visibleprop | 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. | Optional |
openmethod | 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. | Optional |
style | 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. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | 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 | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |

## BMOBILE:TABSUBPAGES, BMOBILE:VERTICALTABSUBPAGES, BMOBILE:STRAIGHTTAB and BMOBILE:PAGER

The controls implement responsive tab controls. A BMOBILE:TABSUBPAGES control and a BMOBILE:VERTICALTABSUBPAGES control can have static tabs and dynamically defined tabs. The static tabs are added via BMOBILE:STRAIGHTTAB controls at design time. The HTML code is generated into the page holding the BMOBILE:TABSUBPAGES/BMOBILE:VERTICALSUBPAGES control.

- Properties for BMOBILE:TABSUBPAGES

- Properties for BMOBILE:VERTICALTABSUBPAGES

- Properties for BMOBILE:STRAIGHTTAB

- Properties for BMOBILE:PAGER

For the Adapter Interface and Built-In Events see the corresponding sections in ROWTABSUBPAGES and STRAIGHTTABPAGE.

In addition, the adapter interface may optionally contain a STRAIGHTTABCOUNT and/or a level field:

    2 STRAIGHTTABCOUNT (I4)
    2 TABITEMS (1:*)
    3 LEVEL (I4)

#### STRAIGHTTABCOUNT

The count of static tabs. This is useful to conveniently calculate the index in the array of the dynamically defined tabs.

#### LEVEL

Drop down menus are supported. The level defines whether it is a sub item in a dropdown menu or a root item. By adding an optional BMOBILE:PAGER, short cut links for the previous clicked tabs will be added.

For more information see the corresponding samples in the NaturalAjaxDemos.

### Properties for BMOBILE:TABSUBPAGES

Basic
valueprop | Name of the adapter parameter that provides the content of the control. | Obligatory |
navmode | There are several rendering modes. For example set this property to nav-pills if you want the tabs to be rendered as pills. | Optional | nav-tabs nav-pills
style | 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. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | 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
dropdownstyle | Supported options are menu and tree. | Optional | menu tree
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
aspectratio | Defines the proportional relationship between width and height of the control. Example: 4by3 | Optional | 1by1 16by9 21by9 4by3
width | 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 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 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. | Optional | 100 120 140 160 180 200 50% 100%
height | 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. | Optional | 100 150 200 250 300 250 400 50% 100%
triggerserver | 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. | Optional | true false
withcollapse | If set to true a small button is added to hide and show the navigation tabs. | Optional | true false
withdropdown | If set to true tabs can have drop-down menus. An additional Natural field level is generated. | Optional | true false

### Properties for BMOBILE:VERTICALTABSUBPAGES

Basic
valueprop | Name of the adapter parameter that provides the content of the control. | Obligatory |
navmode | There are several rendering modes. For example set this property to nav-pills if you want the tabs to be rendered as pills. | Optional | nav-tabs nav-pills
style | 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. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional |
panecolstyle | Inline CSS style settings applied to the pane. | Optional |
panecolstyleclasses | 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. | Optional | col-* col-sm-* col-md-* col-lg-* col-xl-* border border-primary border border-secondary border border-dark border border-light
navcolstyle | Inline CSS style settings applied to the navigation tabs. | Optional |
navcolstyleclasses | 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. | Optional | 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 | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
aspectratio | Defines the proportional relationship between width and height of the control. Example: 4by3 | Optional | 1by1 16by9 21by9 4by3
width | 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 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 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. | Optional | 100 120 140 160 180 200 50% 100%
height | 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. | Optional | 100 150 200 250 300 250 400 50% 100%
withcollapse | If set to true a small button is added to hide and show the navigation tabs. | Optional | true false
withdropdown | If set to true tabs can have drop-down menus. An additional Natural field level is generated. | Optional | true false
triggerserver | 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. | Optional | true false

### Properties for BMOBILE:STRAIGHTTAB

Basic
name | Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead. | Optional |
nameprop | Name of adapter parameter which dynamically provides the text that is shown inside the control. | Optional |
textid | 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". | Optional |
straighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. specifying 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". | Optional | true false
invisiblemode | 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. | Optional | invisible disabled
visibleprop | 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. | Optional |
style | 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. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | 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 | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |

### Properties for BMOBILE:PAGER

Basic
styleclasses | CSS style classes separated by a blank. | Optional |
style | 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. | Optional |
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
maxcount | Maximum number of pager buttons. Each pager button holds a link for the last clicked tab. | Optional |

### On this page

- BMOBILE:CARD
- BMOBILE:CARDCONTAINER
- BMOBILE:COL
- BMOBILE:PANEL
- BMOBILE:ACCORDION
- BMOBILE:ROW
- BMOBILE:CONTAINER
- BMOBILE:FORM, BMOBILE:FORMINLINE
- BMOBILE:FORMAREA
- BMOBILE:FORMGROUP
- BMOBILE:LISTGROUP
- BMOBILE:OFFCANVAS
- BMOBILE:DYNCANVAS
- BMOBILE:SIDEBARCONTAINER, BMOBILE:SIDEBAR, BMOBILE:SIDEBARGROUP, BMOBILE:HORIZONTALBAR, BMOBILE:CONTENT
- BMOBILE:TABPANE, BMOBILE:VERTICALTABPANE and BMOBILE:TAB
- BMOBILE:TABSUBPAGES, BMOBILE:VERTICALTABSUBPAGES, BMOBILE:STRAIGHTTAB and BMOBILE:PAGER