FlexForm Events

An event callback invoked by the platform when the form is accessed for first time after its construction. This function gets executed only once on in lifetime of the form. If a destroyed form is accessed, the form is re-initialized and this callback is once again invoked. Forms can be destroyed using destroy method.

Syntax

addWidgets()

Read/Write

Read + Write

Example

//Sample code to set a callback to the addWidgets event for a FlexForm.

myForm.addWidgets=addWidgetsCallback;

function addWidgetsCallback() {
    //write your logic to create and add child widgets
}

Platform Availability

• iOS
• Android

This event is invoked for every widget when the widget position and dimensions are computed. This event is invoked for all the widgets placed inside flex containers. This event is invoked in the order in which the widgets are added to the widget hierarchy and expect the frame property of the widget is calculated and available for use within this event.

Syntax

doLayout()

Read/Write

Read + Write

Remarks

This event is used to set the layout properties of child widgets in the relation to self and peer widgets whose layout is not yet performed.

NOTE: The number of times this event invoked may vary per platform. It is not recommended to write business logic assuming that this function is invoked only once when there is a change in positional or dimensional properties. This event will not trigger when transformations are applied though widget is moved or scaled or rotated from its original location.

Example

//Sample code to set doLayout event callback to a button widget.
/*This code changes the top property of button2 and makes it appear below button1.*/
myForm.button1.doLayout=doLayoutButton1;


function doLayoutButton1(){
      
    myForm.button2.top = myForm.button1.frame.height;
}

Platform Availability

• iOS
• Android

This event gets called only once in form life cycle that is when the form is ready with its widget hierarchy. This will get called after addwidgets method allowing user for any one-time initializations.

When form is destroyed and reused again, init gets called as a part of form lifecycle.

Syntax

init()

Read/Write

Read + Write

Example

testfrm.init = initCallback;

function initCallback(eventObj) {
    kony.print("in the init" + eventObj);
}

Platform Availability

• iOS
• Android

An event callback that is invoked by the platform when the back button is pressed on an action bar. The back button exists on the left side of the action bar with UP caret symbol. It is enabled only when onActionBarBack callback is registered on form and showActionBarIcon is set to true.

Syntax

onActionBarBack()

Read/Write

Read + Write

Remarks

This event is displayed in the widget properties list only when you select SDK versions 3.0 and above in the Application Properties > Native > Android > SDK Versions section.

Example

function appBarBackcallback() {
    alert("In the App bar back callback");
}

function test1() {
    Form1.showActionBarIcon = true;
    Form1.onActionBarBack = appBarBackcallback;
}

Platform Availability

Available on Android/Android tablet only.

An event that accepts a callback function as an input and executes the functionality defined in the callback function when the widget is blurred.

Syntax

onBlur()

Input Parameters

Callback function

A function that contains the logic to be implemented when the widget is blurred.

Read/Write

Read + Write

Remarks

Assign a null value to the onBlur event of a widget to remove the blur effect on the widget.

Example

 

//This is a generic event that is applicable for various widgets.
/*Here, we have shown how to use the onBlur event for a Button widget. You need to make a corresponding use of the onBlur event for other applicable widgets.*/

frmButton.myButton.onBlur = onBlurCallBack;

function onBlurCallBack(widget) {
    console.log('onBlur event triggered');
}

Platform Availability

• Available in the IDE
• Available on the Responsive Web platform

This event is triggered, when the width of the browser running the Responsive Web App is increased or decreased.

Syntax

onBreakpointChange()

Input Parameters

formHandle

This parameter specifies handle of the FlexForm on which this event is defined.

breakpoint[Number]

This parameter specifies the current breakpoint value. When the window size exceeds the highest breakpoint, this parameter returns the constant: constants.BREAKPOINT_MAX_VALUE.

Read/Write

Read + Write

Return Value

Boolean

The default return value is false. If the return value is not defined, the return value is surmised to be false.

Remarks

From Visualizer V9 release, onBreakpointChange event is triggered while using responsive web components also.

Example

function breakpoint_callback (myFormHandle, breakpoint) {
    kony.print("breakpoint changed");
}
function myForm_preshow() {
   myWebForm.onBreakpointChange = breakpoint_callback;
}

Platform Availability

• Available in IDE
• Desktop Web

An event callback is invoked by the platform when the user stops scrolling but the content still moves before the content actually stops.

Syntax

onDecelerationStarted()

Read/Write

Read + Write

Example

//Sample code to set a callback to the onDecelerationStarted event for a FlexForm.

myForm.onDecelerationStarted=onDecelerationStartedCallback;

function onDecelerationStartedCallback(eventobject) {
    //write your logic to create and add child widgets
}

Platform Availability

This property is available on iOS platform.

Specifies an event which is triggered before the FlexForm is destroyed.

For more information see Event Editor in the Quantum Visualizer User Guide.

Syntax

onDestroy()

Read/Write

Read + Write

NOTE: While using the this keyword (for example, this.view) in onDestroy event (as a FormController event) to point to the current controller, you must ensure that the function is not a fat arrow function. Because in fat arrow function declarations, the this pointer is taken from the parent scope and might not point to the current FormController. For more information on this limitation, click here.

Example

//Sample code to set a callback to the onDestroy event for a FlexForm.

myForm.onDestroy=onDestroyCallback;

function onDestroyCallback(eventobject) {
    //write your logic to create and add child widgets
}

Platform Availability

• iOS
• Android

Specifies an event which is triggered when the user uses the back button on the device.

For more information see Event Editor in the Quantum Visualizer User Guide.

Syntax

onDeviceBack()

Read/Write

Read + Write

Example

//Sample code to set a callback to the onDeviceBack event for a FlexForm.

myForm.onDeviceBack=onDeviceBackCallback;

function onDeviceBackCallback(eventobject) {
    //write your logic to create and add child widgets
}

Platform Availability

• Android

Specifies an event which is triggered when the user access the device menu.

For more information see Event Editor in the Quantum Visualizer User Guide.

Syntax

onDeviceMenu()

Read/Write

Read + Write

Example

//Sample code to set a callback to the onDeviceMenu event for a FlexForm.

myForm.onDeviceMenu=onDeviceMenuCallback;

function onDeviceMenuCallback(eventobject) {
    //write your logic to create and add child widgets
}

Platform Availability

Available on Android/Android Tablet.

This event is sent when the position of a NavigationDrawer changes.

Syntax

onDrawerSlideCallback(slideOffset)

Input Parameters

slideOffset

A Double value indicating the new offset of this drawer within its range, from 0-1.

Remarks

This event supports the NavigationDrawer. It is not sent unless the FlexForm has been created from a template that supports the NavigationDrawer. The NavigationDrawer is based on the Android native Navigation drawer. It is only supported on Android.

The FlexForm's navigationDrawerListeners property is used to map the handler to this event.

Example

// create callback function for onDrawerSlide
function onDrawerSlideCallback(slideOffset) {
    //handler code here
}

// Mapping callback function to Navigation Drawer event (or events)
formObject.navigationDrawerListeners = {
    onDrawerSlide: onDrawerSlideCallback
};

Platform Availability

• Available in the IDE
• Android

Called when a Navigation Drawer has finished opening. The drawer is interactive at this point.

Syntax

onDrawerOpenedCallback()

Parameters

None

Remarks

This event supports the NavigationDrawer. It is not sent unless the FlexForm has been created from a template that supports the NavigationDrawer. The NavigationDrawer is based on the Android native Navigation drawer. It is only supported on Android.

The FlexForm's navigationDrawerListeners property is used to map the handler to this event.

Example

// create callback function for onDrawerOpened 
function onDrawerOpenedCallback() {
    //handler code here
}

// Mapping callback function to Navigation Drawer event (or events)
formObject.navigationDrawerListeners = {
    onDrawerOpened: onDrawerOpenedCallback
};

Platform Availability

• Available in the IDE
• Android

Called when a Navigation Drawer has finished closing.

Syntax

onDrawerClosedCallback()

Parameters

None

Remarks

This event supports the NavigationDrawer. It is not sent unless the FlexForm has been created from a template that supports the NavigationDrawer. The NavigationDrawer is based on the Android native Navigation drawer. It is only supported on Android.

The FlexForm's navigationDrawerListeners property is used to map the handler to this event.

Example

// create callback function for onDrawerClosed
function onDrawerClosedCallback() {
    //handler code here
}

// Mapping callback function to Navigation Drawer event (or events)
formObject.navigationDrawerListeners = {
    onDrawerClosed: onDrawerClosedCallback
};

Platform Availability

• Available in the IDE
• Android

Called when the NavigationDrawer motion state changes.

Syntax

onDrawerStateChangedCallback(state)

Parameters

state

A constant that identifies the current drawer state. See remarks for details.

Remarks

Constant values for drawer state:

• Constants.DRAWER_STATE_IDLE : Indicates that the drawer is in idle, settled state. No animation is in progress.
• Constants.DRAWER_STATE_DRAGGING : Indicates that the drawer is currently being dragged by the user.
• Constants.DRAWER_STATE_SETTLING : Indicates that the drawer is in the process of settling to a final position.

This event supports the NavigationDrawer. It is not sent unless the FlexForm has been created from a template that supports the NavigationDrawer. The NavigationDrawer is based on the Android native Navigation drawer. It is only supported on Android.

The FlexForm's navigationDrawerListeners property is used to map the handler to this event.

Example

// create callback function for onDrawerStateChanged
function onDrawerStateChangedCallback(state) {
    //handler code here
}

// Mapping callback function to Navigation Drawer event (or events)
formObject.navigationDrawerListeners = {
    onDrawerStateChanged: onDrawerStateChangedCallback
};

Platform Availability

• Available in the IDE
• Android

An event that accepts a callback function as an input and executes the functionality defined in the callback function when the widget is in focus.

Syntax

onFocus()

Input Parameters

Callback function

A function that contains the logic to be implemented when the widget is in focus.

From the V9 Service Pack 7 Fixpack 6 release, the callback function of the onFocus Event contains a new parameter, activeElement. The activeElement parameter specifies the widget that is currently in focus.

Read/Write

Read + Write

Remarks

Assign a null value to the onFocus event of a widget to remove focus from the widget.

Example

 

//This is a generic event that is applicable for various widgets.
/*Here, we have shown how to use the onFocus event for a Button widget. You need to make a corresponding use of the onFocus event for other applicable widgets.*/

frmButton.myButton.onFocus = onFocusCallBack;

function onFocusCallBack(widget, activeElement) {
    console.log('onFocus event triggered');
}

Platform Availability

• Available in the IDE
• Available on the Responsive Web platform

Specifies an Event which is triggered when a form goes completely out of view.

Syntax

onHide()

Read/Write

Read + Write

Remarks

This event is triggered in the following scenarios:

• form.show (another form) is called
• User hits the device back button or key

This event is not triggered in the following scenarios:

• The form is partially or completely covered by the Popup.
• The form is partially or completely covered by the Application Menu.

Example

//Sample code to set a callback to the onHide event for a FlexForm.

myForm.onHide=onHideCallback;

function onHideCallback(eventobject) {
    //write your logic to create and add child widgets
}

Platform Availability

• iOS
• Android

This is an event callback that is invoked by iOS when the keyboard has been hidden.

Syntax

onKeyboardDidHide()

Read/Write

Read + Write

Remarks

Don't change the contentOffset on the form by calculating the size of the keyboard when keyboard appears or is hidden.

Example

var form = new kony.ui.Form2();

form.onKeyboardDidHide = keyboardCallbacksDidHide;

function keyboardCallbacksDidHide(wdgRef, keyboardData) {
    // handle the event here
    // wdgRef returns the current form.
    // keyboardData returns keyboard related data provided by iOS platform
}

Platform Availability

• Available in the IDE
• iOS
  

This is an event callback that is invoked by iOS when the keyboard has just been shown.

Syntax

onKeyboardDidShow()

Read/Write

Read + Write

Remarks

Don't change the contentOffset on the form by calculating the size of the keyboard when keyboard appears or is hidden.

Example

var form = new kony.ui.Form2();
form.onKeyboardDidShow = keyboardCallbacksDidShow;

function keyboardCallbacksDidShow(wdgRef, keyboardData) {
    // handle the event here
    // wdgRef returns the current form.
    // keyboardData returns keyboard related data provided by iOS platform
}

Platform Availability

• Available in the IDE
• iOS
  

This is an event callback that is invoked by iOS when the keyboard is about to be hidden.

Syntax

onKeyboardWillHide()

Read/Write

Read + Write

Remarks

Don't change the contentOffset on the form by calculating the size of the keyboard when keyboard appears or is hidden.

Example

var form = new kony.ui.Form2();

form.onKeyboardWillHide = keyboardCallbacksWillHide;

function keyboardCallbacksWillHide(wdgRef, keyboardData) {
    // handle the event here
    // wdgRef returns the current form.
    // keyboardData returns keyboard related data provided by iOS platform
}

Platform Availability

• Available in the IDE
• iOS
  

This is an event callback that is invoked by iOS when the keyboard is about to be shown.

Syntax

onKeyboardWillShow()

Read/Write

Read + Write

Remarks

Don't change the contentOffset on the form by calculating the size of the keyboard when keyboard appears or is hidden.

Example

var form = new kony.ui.Form2();
form.onKeyboardWillShow = keyboardCallbacksWillShow;

function keyboardCallbacksWillShow(wdgRef, keyboardData) {
    // handle the event here
    // wdgRef returns the current form.
    // keyboardData returns keyboard related data provided by iOS platform
}

Platform Availability

• Available in the IDE
• iOS
  

This event takes a callback as an input that is invoked by the platform when the user presses a key (on the keyboard).

Syntax

onKeyPress(eventObject, eventPayload, context)

Input Parameters

eventObject:

An Object that contains the instance of the widget that triggered the onKeyPress event.

eventPayload:

An Object that contains information about the keyboard interactions. Based on the key that the user presses, the value of the eventPayload varies as follows:

context:

An Object that represents information about the row that contains the target widget that triggered the onKeyPress event.

rowIndex: The index of the row that contains the target widget for a Segment widget.

itemIndex: The index of the row that contains the target widget for a CollectionView widget.

sectionIndex: The index of the section that contains the target widget.

widgetInfo: The widget reference of the Segment or CollectionView widget.

Read/Write

Read + Write

Remarks

• The onKeyPress event is not linked with native keypress event, i.e both the events are different.
• For widgets (such as TextBox and TextArea) that support both the onKeyDown and onKeyPress events, the onKeyDown event takes higher priority.
  If a widget has both the onKeyDown and onKeyPress events configured, the onKeyDown event is invoked first, followed by the onKeyPress event.
• The Web Framework provides support for both the onKeyDown and onKeyPress events on the TextBox and TextArea widgets. However, Temenos recommends that you use only one of the events for a widget.

Example

/*This event is triggered in both TextBox and TextArea widgets for Android platform.*/

/*This example demonstrates how to set an onKeyPress event callback to a Button widget that is placed inside form


frmButton.myButton.onKeyPress = onKeyPressCallBack;

function onKeyPressCallBack(eventObject, eventPayload) {
    console.log('onKeyPress event triggered');
}

Platform Availability

• Available in the IDE
• Available on the Responsive Web platform

An event callback invoked by the platform when the locale changes. This callback is executed for the current form:

• After setCurrentLocaleAsync() callback is successfully executed.
• When navigating to a form, just before preshow of the target form if locale is changed.
• Synchronously after addWidgets() -> init() when trying to access widgets of an uninitialized form.

This callback is executed for popups:

• For all visible popups after setCurrentLocaleAsync() callback is successfully executed.
• When opening a popup just before init() of the target popup only if locale is changed.
• Synchronously, just after init(), when trying to access widgets of an uninitialized popup.

NOTE: Templates are updated in setCurrentLocaleAsync() success callback based on current visible form.

NOTE: Get the current locale by calling getCurrentLocale().

Syntax

onLocaleChanged()

Parameters

widget [widgetref] - Mandatory

Handle to the form/popup widget instance.

Read/Write

Read + Write

Example

//Sample code to set a callback to the onLocaleChanged event for a FlexForm.
myForm.onLocaleChanged = onLocaleChangedCallBack;

function onLocaleChangedCallBack(formRef) {
 //Sample code to change the content alignment of a label when the device locale is Arabic.
 myForm.lblCountryLocale.text = kony.i18n.getLocalizedString("currentLocale")
 var currentLocale = kony.i18n.getCurrentLocale();
 if (currentLocale == “ar”)
  myForm.lblCountryLocale.contentAligment = constants.CONTENT_ALIGN_MIDDLE_RIGHT;
 else
  myForm.lblCountryLocale.contentAligment = constants.CONTENT_ALIGN_MIDDLE_LEFT;
}

Platform Availability

Available on all platforms

Quantum Visualizer creates this event when you drag and drop a service operation on either a FlexForm, FlexContainer, or FlexScrollContainer. You can define actions for this event by using Action Editor.

Read/Write

You can neither read nor write the onMapping Event through code.

Remarks

The actions defined in this event are triggered after the actions specified in the preShow Event are executed. The actions for the preShow Event are executed first, and then the actions for the onMapping Event are executed.

NOTE: When you define the preShow Event dynamically, the onMapping Event will be overridden.

Platform Availability

Available on all platforms

This event is invoked when you navigate from one form to another. This is a Form Controller event and is used only in Reference Architecture- based projects.

Syntax

onNavigate(context, isBackNavigation)

Parameters

context [Object]

A JavaScript object that contains the data that the destination form requires after navigation.

isBackNavigation [Boolean]

This parameter determines whether you have clicked the back button or not. It has the value as true when you click the back button and false when you do not click the back button.

Read/Write

Read + Write

Remarks

To navigate from one form to another, you must create a Navigation Object. This object navigates to the destination form's controller. The form's controller in turn displays the view of the form.

This event is useful in the following scenarios:

• To provide data that the destination form requires after the navigation.
• To prepare data that the destination form requires after the navigation.
• To pause the navigation if any asynchronous calls are in progress.

Example

define({

    onNavigate: function(context, isBackNavigation) {
        this.context = context;
        this.pauseNavigation();
        kony.net.invokeServiceAsync(url, this.callback1);
    },

    callback1: function(result) {
        this.resumeNavigation();
    }

});

Platform Availability

Available on all platforms

Specifies an Event which is triggered when there is a change in orientation of the form from portrait to landscape or vice versa.

For more information about defining an action sequence for this event, see Event Editor in the Quantum Visualizer User Guide.

Syntax

onOrientationChange()

Read/Write

Read + Write

Example

//Sample code to set a callback to the onOrientationChange event for a FlexForm.
myForm.onOrientationChange=onOrientationChangeCallBack;

function onOrientationChangeCallBack(eventobject) {
 //Write your logic here.
}

Platform Availability

• iOS
• Android

onResize event defines a callback that is executed when there is a change in the width of the browser. This event is valid from Quantum Visualizer V8 to V8 SP2. Use the onBreakpointChange event for the same functionality in later versions of Visualizer.

Syntax

onResize()

Read/Write

Read + Write

Return Value

Boolean

The default value is true. If the return value is not defined, the return value is surmised to be true.

Parameters

formModel

This parameter specifies handle of the FlexForm on which this event is defined.

width[Number]

This parameter specifies the current width of the browser body tag.

Example

function resize_callback (myFormHandle, width) {
    kony.print("breakpoint changed");
}
function myForm_preshow() {
   myWebForm.onResize= resize_callback;
}

Platform Availability

• Desktop Web

An event callback is invoked by the platform when the scrolling is ended. This event is invoked asynchronously.

Syntax

onScrollEnd ()

Parameters

source [widgetref]

Handle to the widget reference on which the scrolling is ended.

Read/Write

Read + Write

Example

//Sample code to set a callback to the onScrollEnd event for a FlexForm.
myForm.onScrollEnd=onScrollEndCallBack;

function onScrollEndCallBack(eventobject) {
 //Write your logic here.
}

Platform Availability

• iOS
• Android

An event callback is invoked by the platform when the scrolling is in progress. This event is invoked asynchronously.

Syntax

onScrolling ()

Parameters

source [widgetref]

Optional. Handle to the widget reference on which the scrolling is in progress.

Read/Write

Read + Write

Example

//Sample code to set a callback to the onScrolling event for a FlexForm.
myForm.onScrolling=onScrollingCallBack;

function onScrollingCallBack(eventobject) {
 //Write your logic here.
}

Platform Availability

• iOS
• Android

An event callback is invoked by the platform when the user starts scrolling the content. This event is invoked asynchronously.

Syntax

onScrollStart()

Parameters

source [widgetref]

Optional. Handle to the widget reference on which the scrolling has started.

Read/Write

Read + Write

Example

//Sample code to set a callback to the onScrollStart event for a FlexForm.
myForm.onScrollStart=onScrollStartCallBack;

function onScrollStartCallBack(eventobject) {
 //Write your logic here.
}

Platform Availability

• iOS
• Android

An event callback is invoked by the platform when the user touch is released from the touch surface. This event is invoked asynchronously.

Syntax

onScrollTouchReleased ()

Parameters

source [widgetref]

Optional. Handle to the widget reference on which the user touch is released from the display.

Read/Write

Read + Write

Example

//Sample code to set a callback to the onScrollTouchReleased event for a FlexForm.
myForm.onScrollTouchReleased=onScrollTouchReleasedCallBack;

function onScrollTouchReleasedCallBack(eventobject) {
 //Write your logic here.
}

Platform Availability

• iOS
• Android

This event callback is invoked by the platform when the widget location position gets changed on scrolling. The onScrollWidgetPosition event returns the positional coordinates of the widget's location with respect to the screen (screenX and screenY) and the parent container (frameX and frameY). This event is invoked asynchronously, and is not available for FlexForm widget.

Syntax

onScrollWidgetPosition()

Read/Write

Read + Write

Example

var LabelWdg = new kony.ui.Label(basicConf, layoutConf, pspConf);
form.add(LabelWdg);
LabelWdg.onScrollWidgetPosition = onScrollWidgetPositionCallBack;

function onScrollWidgetPositionCallBack(wdg, screenX, screenY, frameX, frameY) { //wdg : Widget that is registered for onScrollWidgetPosition.
    /*screenX : Position of widget with respect to 
the screen's X - coordinates (after downsizing the navigation bar and status bar).*/
    /*screenY : Position of widget with respect to the screen's Y - 
coordinates (after downsizing the navigation bar and status bar).*/
    //frameX : Position of widget with respect to parent container's X- coordinates.
    //frameY : Position of widget with respect to parent container's Y- coordinates.
}

Platform Availability

• Not Accessible from IDE
• Android
• iOS

An event callback is invoked by the platform when the user touch is released from the touch surface. This event is invoked asynchronously.

Syntax

onTouchEnd ()

Parameters

source [widgetref]

Optional. Handle to the widget reference on which the user touch has ended.

x [Number]

Optional. Specifies the x-coordinate with in the widget with respect to widget's co-ordinate system. It is a number indicating device independent pixel.

y [Number]

Optional. Specifies the y- coordinate with in the widget with respect to widget's co-ordinate system. It is a number indicating device independent pixel.

contextInfo [key-value pair]

Optional. On devices that support 3D Touch, specifies a key-value pair where the value specifies the force of the touch. The value 1.0 represents the force of an average touch, as determined by the system.

NOTE: 3D Touch is available only on iOS 9.0 and later.

Read/Write

Read + Write

Example

//Sample code to set a callback to the onTouchEnd event for a FlexForm.
myForm.onTouchEnd=onTouchEndCallback;

function onTouchEndCallback(eventobject, x, y) {
    //Write your logic here
}

Example using contextInfo

function onTouchEndCallback(source, x, y, contextInfo) {
    if (contextInfo) {
        var force = contextInfo[“force”];
        kony.print(“value of force is” + force)
    }
}
Form1.onTouchEnd=onTouchEndCallback;

Platform Availability

• iOS
• Android

An event callback is invoked by the platform when the touch moves on the touch surface continuously until the movement ends. This event is invoked asynchronously.

Syntax

onTouchMove ()

Parameters

source [widgetref]

Optional. Handle to the widget reference on which touch moves.

x [Number]

Optional. Specifies the x-coordinate with in the widget with respect to widget's co-ordinate system. It is a number indicating device independent pixel.

y [Number]

Optional. Specifies the y- coordinate with in the widget with respect to widget's co-ordinate system. It is a number indicating device independent pixel.

contextInfo [key-value pair]

Optional. On devices that support 3D Touch, specifies a key-value pair where the value specifies the force of the touch. The value 1.0 represents the force of an average touch, as determined by the system.

NOTE: 3D Touch is available only on iOS 9.0 and later.

Read/Write

Read + Write

Example

//Sample code to set a callback to the onTouchMove event for a FlexForm.
myForm.onTouchMove=onTouchMoveCallback;

function onTouchMoveCallback(eventobject, x, y) {
    //Write your logic here
}

Example using contextInfo

function onTouchMoveCallback(source, x, y, contextInfo) {
    if (contextInfo) {
        var force = contextInfo[“force”];
        kony.print(“value of force is” + force)
    }
}
Form1.onTouchMove=onTouchMoveCallback;

Platform Availability

• iOS
• Android

An event callback is invoked by the platform when the user touches the touch surface. This event is invoked asynchronously.

Syntax

onTouchStart ()

Parameters

source [widgetref]

Optional. Handle to the widget reference on which the user touches.

x [Number]

Optional. Specifies the X co-ordinate with in the widget with respect to widget's co-ordinate system. It is a number indicating device independent pixel.

y [Number]

Optional. Specifies the Y co-ordinate with in the widget with respect to widget's co-ordinate system. It is a number indicating device independent pixel.

contextInfo [key-value pair]

Optional. On devices that support 3D Touch, specifies a key-value pair where the value specifies the force of the touch. The value 1.0 represents the force of an average touch, as determined by the system.

NOTE: 3D Touch is available only on iOS 9.0 and later.

Read/Write

Read + Write

Example

//Sample code to set a callback to the onTouchStart event for a FlexForm.
myForm.onTouchStart=onTouchStartCallback;

function onTouchStartCallback(eventobject, x, y) {
    //Write your logic here
}

Example using contextInfo

function onTouchStartCallback(source, x, y, contextInfo) {
    if (contextInfo) {
        var force = contextInfo[“force”];
        kony.print(“value of force is” + force)
    }
}
Form1.onTouchStart=onTouchStartCallback;

Platform Availability

• iOS
• Android

An event callback is invoked by the platform when the zooming has ended. This event is invoked asynchronously.

Syntax

onZoomEnd ()

Parameters

source [widgetref]

Optional. Handle to the widget reference on which the zooming has ended.

Read/Write

Read + Write

Remarks

For example, If you have a form with a flexScrollContainer and an image widget inside flexScrollContainer, when you pinch the screen on flexScrollContainer it will call the function configured using widgetToZoom event. If the function returns image, the image will be zoomed.

function onZoomingCalBck(flexScrollContainer) {
    //Write your logic here.
}

function onWidgetToZoomCalBck(flexScrollContainer) {
    //Write your logic here
    return flexScrollContainer.image;
}

function onZoomStartCalBck(flexScrollContainer) {
    //Write your logic here
          
    kony.print("zooming started");
}

function onZoomEndCalBck(flexScrollContainer) {
    //Write your logic here
         
    kony.print("zooming ended");
}

flexScrollContainer.widgetToZoom = onWidgetToZoomCalBck;
flexScrollContainer.onZooming = onWidgetToZoomCalBck;
flexScrollContainer.onZoomStart = onZoomStartCalBck;
flexScrollContainer.onZoomEnd = onZoomEndCalBck;

NOTE: This event callback is invoked only when zooming is initiated by user interaction.

Example

//Sample code to set a callback to the onZoomEnd event for a FlexForm.
myForm.onZoomEnd=onZoomEndCallback;

function onZoomEndCallback(eventobject, widget) {
    //Write your logic here
}

Platform Availability

• Available on iOS platform.

An event callback is invoked by the platform when the container is zooming. This event is invoked asynchronously.

Syntax

onZooming ()

Parameters

source [widgetref]

Optional. Handle to the widget reference on which the zooming has started.

Read/Write

Read + Write

Remarks

For example, If you have a form with a flexScrollContainer and an image widget inside flexScrollContainer, when you pinch the screen on flexScrollContainer it will call the function configured using widgetToZoom event. If the function returns image, the image will be zoomed.

function onZoomingCalBck(flexScrollContainer) {
    //Write your logic here.
}

function onWidgetToZoomCalBck(flexScrollContainer) {
    //Write your logic here
    return flexScrollContainer.image;
}

function onZoomStartCalBck(flexScrollContainer) {
    //Write your logic here
          
    kony.print("zooming started");
}

function onZoomEndCalBck(flexScrollContainer) {
    //Write your logic here
         
    kony.print("zooming ended");
}

flexScrollContainer.widgetToZoom = onWidgetToZoomCalBck;
flexScrollContainer.onZooming = onWidgetToZoomCalBck;
flexScrollContainer.onZoomStart = onZoomStartCalBck;
flexScrollContainer.onZoomEnd = onZoomEndCalBck;

NOTE: This event callback is invoked only when zooming is initiated by user interaction.

Example

//Sample code to set a callback to the onZooming event for a FlexForm.
myForm.onZooming=onZoomingCallback;

function onZoomingCallback(eventobject, widget) {
    //Write your logic here
}

Platform Availability

• Available on iOS platform.

An event callback is invoked by the platform when the container is about to zoom. This event is invoked asynchronously.

Syntax

onZoomStart ()

Parameters

source [widgetref]

Optional. Handle to the widget reference on which the zooming has started.

widget [widgetref]

Optional. Specifies the widget that actually zooms.

Read/Write

Read + Write

Remarks

For example, If you have a form with a flexScrollContainer and an image widget inside flexScrollContainer, when you pinch the screen on flexScrollContainer it will call the function configured using widgetToZoom event. If the function returns image, the image will be zoomed.

function onZoomingCalBck(flexScrollContainer) {
    //Write your logic here.
}

function onWidgetToZoomCalBck(flexScrollContainer) {
    //Write your logic here
    return flexScrollContainer.image;
}

function onZoomStartCalBck(flexScrollContainer) {
    //Write your logic here
          
    kony.print("zooming started");
}

function onZoomEndCalBck(flexScrollContainer) {
    //Write your logic here
         
    kony.print("zooming ended");
}

flexScrollContainer.widgetToZoom = onWidgetToZoomCalBck;
flexScrollContainer.onZooming = onWidgetToZoomCalBck;
flexScrollContainer.onZoomStart = onZoomStartCalBck;
flexScrollContainer.onZoomEnd = onZoomEndCalBck;

NOTE: This event callback is invoked only when zooming is initiated by user interaction.

Example

//Sample code to set a callback to the onZoomStart event for a FlexForm.
myForm.onZoomStart=onZoomStartCallback;

function onZoomStartCallback(eventobject, widget) {
    //Write your logic here
}

Platform Availability

• Available on iOS platform.

postShow is invoked after a form is displayed. Gets called even on device back or while navigating back to the form through title bar navigation items.

Syntax

postShow

Read/Write

Read + Write

Remarks

In case of preShow and postShow will not get executed when navigate using the browser "back". In preShow and postShow of the startup form, Alerts should be avoided. If any alerts are present in the events of the form, the last alert gets executed and form will never render.

NOTE: If there are any network calls in postshow, you cannot perform any operation on the form and a busy indication is displayed until the postshow execution is complete.

Example

//Sample code to set a callback to the postShow event for a FlexForm.
myForm.postShow=postShowCallback;

function postShowCallback(eventobject) {
    //Write your logic here
}

Platform Availability

• iOS
• Android

preShow is executed every time a form is to be displayed. This event is called even on device back or while navigating back to the form through title bar navigation items.

Syntax

preShow

Read/Write

Read + Write

Remarks

In case of preShow and postShow will not get executed when navigate using the browser "back".

Example

//Sample code to set a callback to the preShow event for a FlexForm.
myForm.preShow=preShowCallback;

function preShowCallback(eventobject) {
    //Write your logic here
}

Platform Availability

• iOS
• Android

An event callback is invoked by the platform to return one of the child widgets of source to zoom. The returning source itself may not result in zooming the entire source. The container will not zoom, if a null value is returned. This event is invoked asynchronously.

Syntax

widgetToZoom ()

Parameters

source [widgetref]

Handle to the widget reference on which the zooming has started.

Read/Write

Read + Write

Remarks

For example, If you have a form with a flexScrollContainer and an image widget inside flexScrollContainer, when you pinch the screen on flexScrollContainer it will call the function configured using widgetToZoom event. If the function returns image, the image will be zoomed.

Example

function onWidgetToZoomCalBck(flexScrollContainer) {
    //Write your logic here
    return flexScrollContainer.image;
}

flexScrollContainer.widgetToZoom = onWidgetToZoomCalBck;

NOTE: This event callback is invoked only when zooming is initiated by user interaction.

Platform Availability

• Available on iOS platform.