Skip to content

App Menu Widget ( Tab Bar )

Tab Bar

The Application Menu (App Menu) is a bar that is displayed at the bottom of an app, containing icons for features that apply to the application, rather than to a specific application screen or window.

Following are the real-time use cases of AppMenu widget:

  • In many banking applications, AppMenu widget is used for features such as Accounts, payments, transfers, atm locations, and services that must be available on every form of the application.

  • Some social media applications have a menu bar at the bottom, containing home, search, and profile icons.

The AppMenu widget capabilities can be broadly categorized into the following:

UI Appearance

Properties Description
Focus Skin Specifies the look and feel when there is focus on the App Menu.
Skin Specifies the look and feel of the App Menu.

Data Management

Methods Description
addAppMenuItemAt Adds an App Menu item at the given index.
createAppMenu Allows you to create App Menu dynamically through code.
getAppMenuBadgeValue Enables you to read the badge value (if any) attached to the given Appmenu item.
getCurrentAppMenu Returns the unique identifier of the current app menu that is set through setCurrentAppMenu.
removeAppMenuItemAt Removes the specified App Menu item.
setAppMenuBadgeValue Allows you to set a badge value to the given app menu item at the upper, right corner of the menu item.
setAppMenuFocusByID Takes ID (which is set using createAppMenu) instead of index and sets the focus on the menu item of the current app menu.
setCurrentAppMenu Uses the unique identifier which represents the App Menu and sets it as current app menu.

Internationalization

Properties Description
i18n Key Specifies the i18n Key to be used for internationalization.

3D Touch

Methods Description
registerForPeekandPop Registers a widget to enable 3D Touch peek and pop gestures.
setOnPeek Sets and overrides the existing onPeekCallback for the widget.
setOnPop Overrides the existing onPopCallback for the widget.
unregisterForPeekandPop Unregisters a widget from 3D Touch peek and pop gestures.

User Input Handling

Methods Description
addGestureRecognizer Allows you to set a gesture recognizer for a specified gesture for a specified widget.
removeGestureRecognizer Allows you to remove the specified gesture recognizer for the specified widget.
setGestureRecognizer Allows you to set a gesture recognizer for a specified gesture for a specified widget.

Animations

Methods Description
Animate Applies an animation to the widget.

Miscellaneous

Methods Description
getBadge Enables you to read the badge value (if any) attached to the specified widget.
setBadge Enables you to set the badge value to the given widget at the upper, right corner of the widget.
Properties Description
Appbar Button Style Specifies the button style for application bar.
Event Specifies the event for the App Menu item.
Icon Specifies the image to be displayed for the App Menu item.
Position Specifies the position of the button for application bar.
Render Specifies if the widget code must be included in the platform when the code is generated.
Title Specifies a general or descriptive text for App Menu.

Enabling RTL

Properties Description
retainContentAlignment Helps to retain the content alignment of the widget while applying RTL.
retainFlexPositionProperties Helps to retain the left, right and padding properties while applying RTL.
retainFlowHorizontalAlignment Enables you to change the horizontal flow of the widget from left to right.

Configurations common to all widgets

Methods Description
convertPointFromWidget Allows you to convert the coordinate system from a widget to a point (receiver's coordinate system).
convertPointToWidget Allows you to convert the coordinate system from a a point (receiver's coordinate system) to a widget.
removeFromParent Allows you to remove a child widget from a parent widget.
setEnabled Specifies the widget that must be enabled or disabled.
setFocus Specifies the widget on which there must be focus.
setVisibility Use this method to set the visibility of the widget.
Properties Description
ID A unique identifier of App Menu consisting of alpha numeric characters.

AppMenu Widget Basics

Enabling via Low Code

The AppMenu widget can be enabled via low code, but the approach is different than that of other low code widgets. To enable the AppMenu for a form, right click on the form and select “Configure App-Menu”.

enabling_via_low_code-1

This will open the App-Menu Master Data editor. This editor allows you to add, delete, and update items, as well as change the Skin and Focus Skin. Update the master data with your desired data and select “OK” to apply any changes.

enabling_via_low_code-2

Now that the AppMenu is populated with data, it needs to be enabled to show on the form. In the form’s “PROPERTIES” window, select the “Edit” button beside “App Menu”.

enabling_via_low_code-3

Select all platforms on which you wish to display the AppMenu and select “OK” to apply changes.

enabling_via_low_code-4

The AppMenu will now appear for the selected platforms.

enabling_via_low_code-5

Android Specific Behavior

  • AppMenu is not supported for Android : Native.

iOS Specific Behavior

  • In iOS 7 and iOS 7.1, AppMenu supports only single color. If the color is not specified, then by default native color ( transparent) is applied to iOS 7 and cyan color is applied to iOS7.1.

  • For Mobile, If you add more than five AppMenu items, the menu items beyond the fifth AppMenu item are grouped under the Menu item “More” (added automatically by the iOS platform) and if you select More, the rest of the Menu items are displayed in a list with the icons set for them.

  • For Tablet, If you add more than eight AppMenu items, the menu items beyond the eigth AppMenu item are grouped under the Menu item “More” (added automatically by the iOS platform) and if you select More, the rest of the Menu items are displayed in a list with the icons set for them.

  • Transition Animations are not supported when a flow of transitions from a form with AppMenu to a form without AppMenu.

Mobile Web Specific Behavior

  • For iOS : Web, Android : Web, and Windows : Web, if you add more than four App Menu items, the menu items beyond the fourth AppMenu item are grouped under the Menu item More and if you select More, the rest of the Menu items are displayed in a list without any icons (even if the icons are set through code).