Responsive Menus

#### Search Results

Search

# Responsive Menus

- BMOBILE:NAVBAR

- BMOBILE:NAVMENU

- BMOBILE:NAVMENU2

- XCIPOPUPMENU - Enable Dynamic Menus

## BMOBILE:NAVBAR

A responsive navigation bar.

#### Properties

Basic
menuprop | Name of the adapter parameter that represents the control in the adapter. | Obligatory |
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 |
brandprop | Name of the adapter parameter that dynamically defines a brand image. | Optional |
brandstraighttext | 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
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 |
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:NAVMENU

A menu container you can add to the `BMOBILE:SIDEBAR` or `BMOBILE:HORIZONTALBAR` container.

#### Adapter Interface

For a `BMOBILE:NAVMENU` control with `valueprop="mymenu"`, the following adapter interface is generated:

    1 NAVMENU (1:*)
      2 LEVEL (I4) /* level starts with 1
      2 OPENED (I4) /* 0:normal node; 2: end node
      2 SELECTED (L) /* TRUE or FALSE whether the item is selected
      2 TEXT (A) DYNAMIC /* text of the node

#### Built-in Events

For a `BMOBILE:NAVMENU` control with `valueprop="mymenu"`, the event `mymenu.onSelectMenuItem` is triggered when selecting an end node.

#### 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. | Obligatory |
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 |
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
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:NAVMENU2

A one- or two-level navigation menu with enhanced features like convenient support for icons and styling, as well as extended accessibility support.

#### Adapter Interface

For a `BMOBILE:NAVMENU2` control with `valueprop="mymenu"`, the following adapter interface is generated:

    1 NAVMENU (1:*)
      2 LEVEL (I4) /* level starts with 1
      2 OPENED (I4) /* 0:normal node; 2: end node
      2 SELECTED (L) /* TRUE or FALSE whether the item is selected
      2 TEXT (A) DYNAMIC /* text of the node
      2 TITLE(A) DYNAMIC
      2 ICONFONT (A) DYNAMIC

#### Built-in Events

For a `BMOBILE:NAVMENU2` control with `valueprop="mymenu"`, the event `mymenu.onSelectMenuItem` is triggered when selecting an end node.

#### 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 |
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
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 |
itemlevel1styleclasses | CSS style classes separated by a blank. | Optional |
itemlevel2styleclasses | CSS style classes separated by a blank. | 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 |

## XCIPOPUPMENU - Enable Dynamic Menus

XCIPOPUPMENU enables context menus (right-click) and dynamic menus (buttons and icons). Depending on the context, the Natural application dynamically generates the menus during execution. There is only one instance of XCIPOPUPMENU needed in each page.

Context menus are supported in the following controls:

- NATPAGE

- BMOBILE:DATATREE

- BMOBILE:PANEL

- BMOBILE:CARD

- BMOBILE:FFIELD

Additionally, you can use the available icons/buttons to open a dynamic menu at any time. This is done by filling out the XCIPOPUPMENU data structure in this event from within the Natural program.

#### Accessibility

Access to menus only through a right mouse click does not meet the accessibility rules. However, since this method is popular, it's good practice to provide access to the menus both by right-click and a visual button/icon. Use the same event name for the right mouse click and the button/icon method to avoid extra coding in the Natural program.

Note
Adapter Interface, Built-In Events and Properties are the same as the regular context menus as described in XCIPOPUPMENU - Enable Context Menus.

### On this page

- BMOBILE:NAVBAR
- BMOBILE:NAVMENU
- BMOBILE:NAVMENU2
- XCIPOPUPMENU - Enable Dynamic Menus