Responsive Pages

#### Search Results

Search

# Responsive Pages

- BMOBILE:PAGEHEADER

- BMOBILE:FOOTER

- BMOBILE:SUBPAGE

- BMOBILE:SUBCISPAGE

- BMOBILE:MODAL

- BMOBILE:INTMODAL, BMOBILE:HELPMODAL, BMOBILE:INTMODALHEADER, BMOBILE:INTMODALBODY and BMOBILE:INTMODALFOOTER

- BMOBILE:DYNMODAL

## BMOBILE:PAGEHEADER

A responsive control to render a page header.

#### Properties

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. | Sometimes obligatory |
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". | Sometimes obligatory |
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
htmlheading | The rendering of the heading: H1-H6 | Optional | h1 h2 h3 h4 h5 h6
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 | lead h1 h2 h3 h4 h5 h6 font-italic font-weight-bold font-weight-bolder font-weight-light font-weight-lighter navbar-brand
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:FOOTER

A responsive control to render a page footer.

#### Properties

Note
The properties for the BMOBILE:FOOTER control are the same as for the BMOBILE:PAGEHEADER control but are implemented using different style sheet classes.

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. | Sometimes obligatory |
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". | Sometimes obligatory |
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
htmlheading | The rendering of the heading: H1-H6 | Optional | h1 h2 h3 h4 h5 h6
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 | lead h1 h2 h3 h4 h5 h6 font-italic font-weight-bold font-weight-bolder font-weight-light font-weight-lighter navbar-brand
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:SUBPAGE

A control for responsive embedding of non-Ajax pages or other media.

#### Properties

Basic
valueprop | Name of the adapter parameter that provides the content of the control. | 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 |
alwaysreload | When setting to false, the subpage is not reloaded when a page switch is executed, default is true. | Optional | true false
aspectratio | Defines the proportional relationship between width and height of the control. Example: 4by3 | Optional |
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%
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 |

## BMOBILE:SUBCISPAGE

A control for responsive embedding of Ajax subpages.

#### Properties

Basic
valueprop | Name of the adapter parameter that provides the content of the control. | 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 |
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%
aspectratio | Defines the proportional relationship between width and height of the control. Example: 4by3 | Optional | 1by1 16by9 21by9 4by3
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 |
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 |

## BMOBILE:MODAL

A control for responsive embedding of modals. The content of this modal can be any content reachable via a URL. To integrate Natural content, use the BMOBILE:INTMODAL* controls. To open a modal via BMOBILE:BUTTON and BMOBILE:ICON controls apply `"modalid:<mymodalid>"` as method.

#### Example

    <bmobile:button method="modal:mymodalid" ....></bmobile:button>
    <bmobile:modal modalid="mymodalid"...></bmobile:modal>

#### Properties

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
titlename | 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 |
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
modalid | An id string for the modal. You can use this id in buttons to open the modal. For a modalid mymodalid the methodname in a button is modal:mymodalid. | Optional |
resizable | Per default end-users can resize an open pop-up dialog. Set this property to FALSE if you don't want the end-users to resize the pop-up. | Optional | true false
draggable | Per default open pop-up dialogs are draggable within their parent container. Set this property to FALSE if you don't want the end-users to drag the pop-up. | Optional | true false
pageurl | The url of an html page. | Optional |
pageurlprop | Name of the adapter parameter that dynamically defines the url of an html page. | Optional |
modalbodystyle | 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:INTMODAL, BMOBILE:HELPMODAL, BMOBILE:INTMODALHEADER, BMOBILE:INTMODALBODY and BMOBILE:INTMODALFOOTER

Use these controls to implement responsive modals. The modals are designed and rendered page internal. You can have any container and control inside the BMOBILE:INTMODALBODY. No separate Adapter is generated for the internal modals. The corresponding fields and events are generated into the Adapter of the page containing the BMOBILE:INTMODAL control. This simplifies data exchange between the parent page and the modal.

To open a modal via BMOBILE:BUTTON and BMOBILE:ICON controls apply `"modalid:<mymodalid>"` as method.

#### Example

    <bmobile:button method="modal:mymodalid" ....></bmobile:button>
    <bmobile:modal modalid="mymodalid"...></bmobile:modal>

- Properties for BMOBILE:INTMODAL

- Properties for BMOBILE:HELPMODAL

- Properties for BMOBILE:INTMODALHEADER

- Properties for BMOBILE:INTMODALBODY

- Properties for BMOBILE:INTMODALFOOTER

### Properties for BMOBILE:INTMODAL

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. | Obligatory |
modalid | An id string for the modal. You can use this id in buttons to open the modal. For a modalid mymodalid the methodname in a button is modal:mymodalid. | Optional |
modalsize | Per default modals have medium size. Set this if you want for instance small size modal-sm, or large size modal-lg. | Optional | modal-sm modal-lg
scrollable | If set to true, the modal will be scrollable, otherwise not. | 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
resizable | Per default end-users can resize an open pop-up dialog. Set this property to FALSE if you don't want the end-users to resize the pop-up. | Optional | true false
draggable | Per default open pop-up dialogs are draggable within their parent container. Set this property to FALSE if you don't want the end-users to drag the pop-up. | Optional | true false
centered | Per default a pop-up dialog is centered witin it's parent container. Set this property to FALSE if you don't want the pop-up to be centered. | Optional | true false
animatefade | Per default a fade-in animation is used when the pop-up opens. Set this property to FALSE if you want to switch off animation. | Optional | true false
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 |

### Properties for BMOBILE:HELPMODAL

This modal is used for showing online help. It is added automatically to pages in which `helpid` attributes have been set for controls. The modal is opened automatically on help requests.

### Properties for BMOBILE:INTMODALHEADER

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 |
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 |
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
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 |

### Properties for BMOBILE:INTMODALBODY

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 |

### Properties for BMOBILE:INTMODALFOOTER

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 | justify-content-center justify-content-start justify-content-end justify-content-*-center justify-content-*-start justify-content-*-end 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 |
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:DYNMODAL

This control supports dynamic pop-ups.

As with non-responsive pages, you can also open any responsive page as a pop-up via the Natural `PROCESS PAGE MODAL` statement. You can customize the rendering and behavior of the pop-up at design-time and dynamically at runtime before the pop-up is opened. Dynamic settings will overwrite design-time settings. From version 9.2.1, each responsive page contains a BMOBILE:DYNMODAL control. This control provides the pop-up frame for all pop-ups opened from this page. You can customize this control at design-time.

Hints:

1. To have common settings for all pages, you can customize the layout templates. For details, refer to NaturalONE documentation > Ajax Developer > Getting Started with the Layout Painter > Creating Custom Layout Templates.

2. If you have older responsive layouts which do not contain this BMOBILE:DYNMODAL control yet, you can simply drag this control to the page from the Layout Painter Control Palette.

### Design-Time Pop-Up Settings

You can set design-time properties in 2 ways:

1. Set the properties `popupfeatures`, `popupheight` and `popupwidth` in the NATPAGE control of the pop-up layout. See NATPAGE Properties.

2. Set the properties of the BMOBILE:DYNMODAL control in the pop-up parent.

The design-time of the page opened as pop-up will overwrite the BMOBILE:DYNMODAL settings of the pop-up parent.

### Dynamic Pop-Up Settings at Runtime

To dynamically customize the pop-up settings at runtime from your Natural program, add an NJX:XCIOPENPOPUP control to your parent page. The data structure generated for this control is identical for responsive and non-responsive pages.

### Supported Pop-Up Features

Independently whether you specify the features at design-time or at runtime, the following features are supported:

| Values | Default | Description
--- | --- | --- | ---
closeonclick | true/false | true | If true clicking outside the pop-up will close the pop-up
closeonesc | true/false | true | If true pressing the escape key will close the pop-up
resizeable | true/false | true | If true end-users can resize the opened pop-up
draggable | true/false | true | If true end-users can drag the opened pop-up
sizetocontent | true/false | true | If true the pop-up height is automatically sized to the height of the page shown as pop-up
withclosebutton | true/false | true | If true a close button will appear in the header and the footer of the pop-up frame.

In the `popupfeatures` design-time property (NATPAGE) and the Natural XCIOPENPOPUP.FEATURES field you can specify several of these features separated by “;”. Example:

XCIOPENPOPUP.FEATURES:=’closeonclick:false;closeonesc:false;sizetocontent:true”

### Properties for BMOBILE:DYNMODAL

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
modalsize | Per default modals have medium size. Set this if you want for instance small size modal-sm, or large size modal-lg. | Optional | modal-sm modal-lg
sizetocontent | If set to TRUE the pop-up dialog is sized according to the content. If set to FALSE and no direct height/width properties are set, a fixed default size is used. Default is TRUE. | 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
resizable | Per default end-users can resize an open pop-up dialog. Set this property to FALSE if you don't want the end-users to resize the pop-up. | Optional | true false
draggable | Per default open pop-up dialogs are draggable within their parent container. Set this property to FALSE if you don't want the end-users to drag the pop-up. | 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
centered | Per default a pop-up dialog is centered witin it's parent container. Set this property to FALSE if you don't want the pop-up to be centered. | Optional | true false
animatefade | Per default a fade-in animation is used when the pop-up opens. Set this property to FALSE if you want to switch off animation. | 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 |

### On this page

- BMOBILE:PAGEHEADER
- BMOBILE:FOOTER
- BMOBILE:SUBPAGE
- BMOBILE:SUBCISPAGE
- BMOBILE:MODAL
- BMOBILE:INTMODAL, BMOBILE:HELPMODAL, BMOBILE:INTMODALHEADER, BMOBILE:INTMODALBODY and BMOBILE:INTMODALFOOTER
- BMOBILE:DYNMODAL