Button Menu

The Button-Menu control is used to provide menu with an interaction that navigates to another view.

The Button-Menu control when added to your UI model comes with a Container and Button-Menu components by default. This control when added to the view, looks as shown in the image below.

Container

The Container by default includes only one Button-Menu component. If you want to add more Button-Menus within the container Select the container and click the + icon. The Container has the following settings:

• Id: The auto generated unique ID of the Container component.
• Title: The text label of Container component. The text "Container" is set as Title by default. You can modify this value as you desire. This is only for reference in design time. This value does not appear in the runtime to your application users.

Button-Menu

The Button-Menu components added to the Container are the first level navigation elements. The Button-Menu component has the following settings:

• Id: The auto generated unique ID of the Button-Menu component.
• Label: The text label of Button-Menu component. The default value is "Menu". The value in this field appears as label of Button-Menu to the users in runtime.
• Tooltip: The text to display as tooltip when the user in runtime hovers the mouse over the current Menu-Container.
• Actions: Launches the script modeler to define the actions to perform in the event of On Click or Custom event.

When you select the Button-Menu component, it reveals the following sub-components and other options to build your menu:

• Menu-Container
• Menu-Items

Menu-Container

Each first level Button-Menu component by default contains a Menu-Container. The Menu-Container includes two Menu-Items by default. You can add as many Menu-Items as you need within a Menu-Container. If you want to add more Menu-Items, select the Menu-Container and click the + icon. The Menu-Container has the following settings:

• Tooltip: Enter text to display as tooltip when the user hovers the mouse over the Menu-Container.

Menu-Item

The Menu-Items are the child elements of the Button-Menu component and acts as second level menu items. The Menu-Item has the following settings:

• Enable Icon: Select this option to add an icon to the Menu-Item. Every Menu-Item displays a default icon when this option is selected. The Icon has the following settings:
  • Id: The auto generated unique ID of the Icon.
  • Name: Displays the name of the selected icon. Click the options button to select an icon that suits to your requirement.
  • Tooltip: Enter text to display as tooltip when the user hovers the mouse over the Menu-Item.
  • Enable Badge: The badge is a status descriptor for the corresponding Menu-Item. Select this option to attach a badge to each Menu-Item and specify the applicable settings.
  • Actions: Launches the script modeler to define the actions to perform in the event of On Click or Custom event.
• Sub-Menu: Select this option to add Menu-Items as the child elements to the current Menu-Item. These child elements act as third level navigation elements. You can enable sub-menu setting of Menu-Item to add as many menu levels as you need. Every Menu-Item added has the same settings.
• Actions: Launches the script modeler to define the actions to perform in the event of On Click or Custom event.

Every Menu-Item includes default label set to "Menu". Select the label and modify the value of Reference field in Settings to modify the default label. the label has the following settings:

• Id: Enter a value to assign as Id for the selected label of the current Menu-Item.
• Reference: Replace the text "Menu" with the label that you want to specify for the current Menu-Item.
• Tooltip: Enter text to display as tooltip when the user hovers the mouse over the label of the current Menu-Item.