You are here: Using the Navigation Drawer
A FlexForm is the top most container widget, and is usually the first widget you add to an application. It serves as a container for all other widgets on the screen. Your app can support multiple screens by supporting multiple FlexForms and allowing a user to navigate between these screens.
FlexForm widget is not listed in the Default library. To create a new FlexForm widget, go to the Project explorer, expand any channel such as Mobile, Tablet, and Responsive web. Then, right-click on the Forms and select New Form.
Following are a few actions that you can perform on a FlexForm:
- Animations: You can add animations such as move, rotate, and more to the widgets in the FlexForm. An example for this is the sliding menu/hamburger menu, which can be designed to slide from left to right or right to left as per your specification.
- Layout: You can specify the layout of a FlexContainer and its child widgets in the FlexForm by using different positional properties. You can also specify if you want the widgets to be placed vertically, horizontally, or without any positional restrictions. These layout features help you to design a form and ascertain how it will look in a device.
- Skin: You can define the background by setting a skin to the FlexContainer in the FlexForm. You can blur your container, provide a shadow effect to your FlexContainer, and even make the FlexContainer transparent.
The FlexForm widget capabilities can be broadly categorized into the following:
Layout
| Properties |
Description |
| anchorPoint |
Specifies the anchor point of the widget bound rectangle using the widget's coordinate space. |
| contentOffset |
Specifies the x and y coordinates of the top-left of the scrollable region. |
| contentSize |
Specifies the width and height of the container to accommodate all the widgets placed in it. |
| layout |
Specifies if the arrangement of the widgets either in horizontal or vertical direction. |
| layoutType |
Specifies if the arrangement of the widgets either in free form or vertical direction. |
| requiresBottomSafeAreaInset |
Implements the Safe Area Layout for iOS devices, specifically the iPhone X series. Content of the flex form occupies the full screen at the bottom and overlaps the virtual home indicator. |
| requiresLeftSafeAreaInset |
Implements the Safe Area Layout for iOS devices, specifically iPhone X series. Content of the flex form starts from (0,0) pixel. |
| requiresRightSafeAreaInset |
Implements the Safe Area Layout for iOS devices, specifically iPhone X series. Flex form widget occupies full screen at left/ right part of the screen. |
| requiresTopSafeAreaInset |
Implements the Safe Area Layout for iOS devices, specifically the iPhone X series. Content of the flex form starts from (0,0) pixel. |
| zIndex |
Specifies the stack order of a widget. |
| Methods |
Description |
| forceLayout |
When this method is called, underlying OS layout cycle is forced to layout the widgets of the FlexForm. |
| Events |
Description |
| doLayout |
This event is invoked for every widget when the widget position and dimensions are computed. |
| onBreakpointChange |
This event defines a callback that is executed when there is a change in the breakpoint. |
| onResize |
This event defines a callback that is executed when there is a change in the width of the browser. This event has been deprecated since V8 SP2. |
Animations
| Properties |
Description |
| transform |
Contains an animation transformation that can be used to animate the widget. |
| inTransitionConfig |
Specifies the configuration to be used when the user arrives on this form. |
| outTransitionConfig |
Specifies the type of transition effect to be applied when the Form is going out of view. |
| Events |
Description |
| init |
Gets called only once in form life cycle that is when the form is ready with its widget hierarchy. |
| onDestroy |
Specifies an event which is triggered when the FlexForm is destroyed. |
| onHide |
Specifies an Event which is triggered when a form goes completely out of view. |
| postShow |
postShow is invoked after a form is displayed. |
| preShow |
preShow is executed every time a form is to be displayed. |
Drawer Features
| Methods |
Description |
| closeNavigationDrawer |
Close the NavigationDrawer on forms that have been created using a template that supports the NavigationDrawer. |
| openNavigationDrawer |
Open the NavigationDrawer on forms that have been created using a template that supports the NavigationDrawer. |
| Properties |
Description |
| drawerLayout |
Gets and sets the FlexContainer that contains the elements of the NavigationDrawer, which is named drawerLayout. |
| drawerWidth |
Gets and sets the width of the Navigation Drawer. |
| drawerShadowColor |
Sets or gets the shadow color that covers the form when the NavigationDrawer is open, indicating that the controls on the form are not available for interaction. |
| drawerOpenIcon |
The icon to be displayed when Navigation bar is open. |
| drawerClosedIcon |
The icon to be displayed when Navigation bar is closed. |
| drawerOpena11yHint |
Specifies the descriptive text that explains the action of the widget. |
| drawerCloseda11yHint |
Specifies the descriptive text that explains the action of the widget. |
| navigationDrawerListeners |
Maps Navigation Drawer events to user defined handler functions. |
| Properties |
Description |
| allowHorizontalBounce |
Specifies whether the scroll bounce is enabled or disabled in the horizontal direction. |
| allowVerticalBounce |
Specifies whether the scroll bounce is enabled or disabled in the vertical direction. |
| bounces |
Specifies whether the scroll bounce is enabled or disabled. |
| enableOnScrollWidgetPositionForSubwidgets |
Enables the FlexForm widget to iterate into all the widgets that make use of the onScrollWidgetPosition event. |
| enableScrolling |
Specifies whether the scrolling is enabled on the container or not. |
| retainScrollPosition |
Specifies if the Form must remember the scroll position when the user revisits the Form. |
| scrollDirection |
Specifies the direction in which the widget should scroll. |
| verticalScrollIndicator |
Specifies whether the scroll indicator must be shown or not in the vertical direction. |
| Methods |
Description |
| scrollToBeginning |
Gives you the control to scroll to the beginning of the form. |
| scrollToEnd |
Gives you the control to scroll to the end of the FlexForm. |
| scrollToWidget |
Gives you the control to scroll the FlexForm up to the position of selected widget. |
| Events |
Description |
| onDecelerationStarted |
An event callback is invoked by the platform when the user stops scrolling but the content still moves before the content actually stops. |
| onScrollEnd |
An event callback is invoked by the platform when the scrolling is ended. |
| onScrollWidgetPosition |
This event callback is invoked by the platform when the widget location position gets changed on scrolling. |
| onScrolling |
An event callback is invoked by the platform when the scrolling is in progress. |
| onScrollStart |
An event callback is invoked by the platform when the user starts scrolling the content. |
| onScrollTouchReleased |
An event callback is invoked by the platform when the user touch is released from the touch surface. |
Data Management
| Methods |
Description |
| add |
Used to add widgets to the FlexForm |
| addAt |
Used to add widgets to the Form container at the specified index. |
| clone |
When this method is used on a container widget, then all the widgets inside the container are cloned. |
| remove |
Removes a widget from the FlexForm. |
| removeAt |
Removes a widget at the given index from the FlexForm. |
| removeAll |
Removes all the widget on the FlexForm. |
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. |
| Events |
Description |
| onZoomEnd |
An event callback is invoked by the platform when the zooming has ended. |
| onZooming |
An event callback is invoked by the platform when the container is zooming. |
| onZoomStart |
An event callback is invoked by the platform when the container is about to zoom. |
| widgetToZoom |
An event callback is invoked by the platform to return one of the child widgets of source to zoom. |
| Methods |
Description |
| setZoomScale |
Allows you the zoom the widgets with an option to animate. |
| Properties |
Description |
| disableZoom |
Allows you to enable or disable zooming the FlexForm. |
| maxZoomScale |
Specifies the maximum zoom scale factor that can be applied to the form. |
| minZoomScale |
Specifies the minimum zoom scale factor that can be applied to the form. |
| zoomScale |
Specifies the current scale factor applied to the form content. |
UI Appearance
| Properties |
Description |
| backgroundColor |
Specifies the background color of the widget in hex format. The background can be a single color or a gradient of several colors. |
| configureExtendBottom |
Enables you to configure extendBottom property. |
| configureExtendTop |
Enables you to configure extendTop property. |
| configureStatusBarStyle |
Enables you to configure statusBarStyle property. |
| defaultIndicatorColor |
Enables you to set color to the progress indicator when it is show on the form. |
| extendBottom |
Helps in extending the bottom of the form. |
| extendTop |
Helps in extending the top of the form. |
| footerOverlap |
Specifies if the footer must overlap the form. |
| formTransparencyDuringPostShow |
Specifies the transparency in percentage when a form is loaded. |
| headerOverlap |
Specifies if the header must overlap the form |
| inputAccessoryViewType |
The extra buttons (or controls) allow specific operations needed by your application, such as moving to the next or previous text field, making the keyboard disappear and so on. The area above the keyboard is known as Input Accessory View. |
| menuFocusSkin |
skin property of a form level menu and it determines the look and feel of the Menu Item when focused. |
| menuNormalSkin |
skin property and it determines the look and feel of a menu items when not in focus. |
| menuPosition |
Specifies if the application menu is shown or hidden in the application. |
| navigationBarColor |
Helps you set the color for a device's navigation bar. |
| needAppMenu |
Specifies if the application menu items should be displayed as a part of the menu controls on the form. |
| needsIndicatorDuringPostShow |
Specifies if there must be an indication to the user that the form content is being loaded. |
| opacity |
Specifies the opacity of the widget. |
| pagingEnabled |
Specifies the whether the paging is enabled for the container. |
| prefersStatusBarHidden |
Specifies whether the status bar must be shown or not. |
| setContentOffset |
Gives you the control to offset a portion of the content in a Form to bring the widgets in invisible area to visible area. |
| showActionBar |
Specifies if the action bar should be displayed. |
| showActionBarIcon |
Specifies the icon to be displayed for the action bar. |
| showMiniAppMenu |
Specifies if the application menu is shown or hidden in the application. |
| statusBarColor |
Helps you set the color for a device's status bar. |
| statusBarForegroundColor |
Helps you set the foreground color of the status bar, such as color for any text or icon on the status bar. |
| statusBarHidden |
Lets you show or hide the status bar. |
| statusBarStyle |
Helps you set a style for the status bar. |
| systmeUiConfig |
Controls the behavior of the status and navigation bars. |
| titleBar |
Specifies the title bar must be displayed on the form. |
| titleBarAttributes |
Contains data that supports Application bar functionality in iOS. |
| titleBarConfig |
Specifies the position of the title bar of the form. |
| titleBarSkin |
Specifies the skin to be applied to the title Bar of the form. |
| viewConfig |
Helps to give reference height and reference width to a container when it is in grid layout. |
| windowSoftInputMode |
Defines how the main Form interacts with the window containing the on-screen soft keyboard. |
Enabling RTL