Skip to content

You are here: Using the Navigation Drawer

FlexForm Widget

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.

Form Lifecycle

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

Events Description
onDrawerClosed Called when a Navigation Drawer has finished closing.
onDrawerOpened Called when a Navigation Drawer has finished opening.
onDrawerSlide Sent when the position of a NavigationDrawer changes.
onDrawerStateChanged Called when the NavigationDrawer motion state changes.
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.

Scrolling functionalities

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.

User Input Handling

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.
Methods Description
setBackgroundImageForNavbar Helps to set the background image for the title bar for iOS specific applications.
setTitleBarLeftSideButtonSkin Enables you to set the properties for a left-side button of a titlebar.
setTitleBarRightSideButtonSkin Enables you to set the properties for a right-side button of a titlebar.
show Used to display the FlexForm.

Enabling RTL

Properties Description
retainContentAlignment Helps to retain the content alignment of the widget while applying RTL.
retainFl