SegmentedUI Events

doLayout Event

This event is invoked for every widget when the widget position and dimensions are computed.

Syntax

doLayout()

Read/Write

Read + Write

Remarks

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.

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.

When doLayout event is called in a Segment, the platform will add the context parameter.

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

onBlur Event

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

onDidFinishDataLoading Event

This event is triggered when data is finished loading in the segmentedUI using the setData method. It is generated by all view types of SegmentUI.

Syntax

onDidFinishDataLoading()

Read/Write

Read + Write

Example



//Sample code to set onDidFinishDataLoading event callback to a Segment widget.

frmSegment.mySegment.onDidFinishDataLoading=onDidFinishDataLoadingCallBck;

function onDidFinishDataLoadingCallBck(seguiWidget){
      
   //Write your code here.
}

Platform Availability

This event is available on iPhone and iPad only.

onDragCompleted Event

The event is invoked when the drag and drop of a row in the Segment is complete.

Syntax

onDragCompleted()

Parameters

this

Optional. SegmentUI reference

dragstartcontext

Optional. A table that contains row and section information when dragging of a row is started.

dragendcontext

Optional. A table that contains row and section information when dragging of a row is ended.

Read/Write

Read + Write

Remarks

You can call the onDragCompleted event when the enableReordering property is true to allow the app users to drag and drop a row within a segment.

Example



//Sample code to set onDragCompleted event callback to a Segment widget.

frmSegment.mySegment.onDragCompleted=onRowDragCompleted;

function onRowDragCompleted (segmentUI, dragstartcontext, dragendcontext){
//Write your logic here.
}

Platform Availability

Available in the IDE
Android
iOS

onEditing Event

This event is triggered when a user indicates his desire to edit the row (delete or insert). This event is only triggered if the eidtStyle is set to SEGUI_EDITING_STYLE_ICON or SEGUI_EDITING_STYLE_SWIPE.

Syntax

onEditing ()

Parameters

seguiWidget

Optional. Reference to the SegmentedUI widget that raised the event.

editmode

Optional. Specifies the editing mode either insert or delete. Following are the available options:

SEGUI_EDIT_MODE_INSERT
SEGUI_EDIT_MODE_DELETE

NOTE: To set the value through code, prefix the option with constants. such as constants.<option> .

sectionIndex

Optional. Specifies the index of the section to which the row belongs to.

rowIndex

Optional. Specifies the index of the row that has been clicked.

Example



//Sample code to set onEditing event callback to a Segment widget.

frmSegment.mySegment.onEditing=onEditingCallBck;

function onEditingCallBck(seguiWidget, editmode, sectionIndex, rowIndex){
//Write your logic here.
}

Platform Availability

This event is available on iPhone and iPad only.

onFocus Event

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

onKeyPress Event

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:

Key	Description
altKey	Returns a boolean value. The value is true when the Alt key (Option key on macOS systems) is pressed.
ctrlKey	Returns a boolean value. The value is true when the Ctrl key is pressed.
shiftKey	Returns a boolean value. The value is true when the Shift key is pressed.
metaKey	Returns a boolean value. The value is true when the meta key ( windows key ⊞ on windows systems, command key ⌘ on macOS systems) is pressed.
capsLock	Returns a boolean value. The value is true when the capsLock key is turned on.
keyCode	Returns the ASCII code of the key pressed .
preventDefault	Returns a function. This function can be invoked to prevent the default action of the widget.

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

onRowClick Event

This event is triggered when the user click any row of the SegmentedUI.

Syntax

onRowClick ()

Parameters

seguiWidget

Optional. Reference to the SegmentedUI widget that raised the event.

sectionIndex

Optional. Specifies the index of the section to which the row belongs to.

rowIndex

Optional. Specifies the index of row that has been clicked.

selectedState

Optional. Specifies the selected state.

NOTE: selectedState is mandatory only when the selectionBehavior is set to SEGUI_SINGLE_SELECT_BEHAVIOR or SEGUI_MULTI_SELECT_BEHAVIOR. When the selectionBehavior is set to SEGUI_DEFAULT_BEHAVIOR, then this parameter is optional.

Read/Write

Read + Write

Remarks

This event is not raised if the clickable property in the metainfo is set to false.

In the Android platform, when a gesture or touch events are placed inside the flex template for the Segment widget, because of the propagation of events to the below container, the flex template may not receive onRowClick event.

Example



//Sample code to set onRowClick event callback to a Segment widget.

frmSegment.mySegment.onRowClick=onRowClickCallBck;

function onRowClickCallBck(seguiWidget, sectionNumber, rowNumber, selectedState)
{
	//Write your logic here
}

Platform Availability

Available on all platforms.

onRowDisplay Event

This event handler is used to overwrite the rows that are affected because of an operation on rows.

Syntax

onRowDisplay()

Read/Write

Read + Write

Parameters

widget

Optional. The ID of the widget.

state

Optional. The state of the widget. Can be kony.segment.ADD, kony.segment.UPDATE, or kony.segment.VISIBLE.

currentRowContext

Optional. The sectionIndex and rowIndex of the element on which the animateRow api is called.

startRowContext

The sectionIndex and rowIndex of the first visible row.

endRowContext

Optional. The sectionIndex and rowIndex of the last visible row.

Return Values

None.

Remarks

This event overwrites the animations of rows that are being affected by operations on rows. For example, when the addRowAt is called with animation, this callback would be invoked when the animation on the row is about to start, so that other animations can be applied to the remaining rows.

Your callback function for this event should only call animateRows. It should call the animation on the individual row elements. For example, if a new element is being added and if the application needs to move the elements which are being displaced with an animation, then the application should be calling animationRows for the displaced elements but not for the widget which is being added/removed or updated.

This callback function is only invoked if the state of the segmentedUI widget changes in the visible region. It is not called on rows that are invisible.

Example



//Sample code to set onRowDisplay event callback to a Segment widget.

frmSegment.mySegment.onRowDisplay=onRowDispCallback;

function onRowDispCallback(widget, state, currentRowContext, startRowContext, endRowContext)
{
	//Write your logic here
}

Platform Availability

iOS
Android
DesktopWeb

onScrollStart Event

Indicates that scroll container started scrolling.

Syntax

onScrollStart (source)

Parameters

source

Specify the widget on which scrolling started.

Read/Write

Read + Write

Remarks

The onScrollStart event is called asynchronously. The event is triggered only when scrolling is started. When touch does not result to a scroll, this event is not raised.

Example



//Sample code to set onScrollStart event callback to a Segment widget.

frmSegment.mySegment.onScrollStart=onScrollStartCallBack;

function onScrollStartCallBack(source)
{
	//Write your logic here
}

Platform Availability

iOS
Android

onScrollTouchReleased Event

Indicates that user scrolling touch on the display is released. This callback is called asynchronously.

Syntax

onScrollTouchReleased (source)

Parameters

source

Specify the segment on which scrolling touch is released.

Read/Write

Read + Write

Example



//Sample code to set onScrollTouchReleased event callback to a Segment widget.

frmSegment.mySegment.onScrollTouchReleased=onScrollTouchReleasedCallBack;

function onScrollTouchReleasedCallBack(source)
{
	//Write your logic here
}

Platform Availability

iOS
Android

onScrolling Event

Indicates that segment scrolling is in progress. This callback is called asynchronously.

Syntax

onScrolling (source)

Parameters

source

Specify the segment on which scrolling is in progress.

Read/Write

Read + Write

Example



//Sample code to set onScrolling event callback to a Segment widget.

frmSegment.mySegment.onScrolling=onScrollingCallBack;

function onScrollingCallBack(source)
{
	//Write your logic here
}

Platform Availability

iOS
Android

onScrollEnd Event

Indicates that segment scrolling has come to an end.

Syntax

onScrollEnd (source)

Parameters

source

Specify the segment on which scrolling is coming to an end.

Read/Write

Read + Write

Remarks

The onScrollEnd callback is called asynchronously. This event is called only when the scrolling reached end of the scroll.

When multiple scrolls performed on the Segment widget, the onScrollTouchReleased is triggered whenever touch is released, but the onScrollEnd event is triggered only when the entire scrolling is ended. So when the user keeps on flinging on the display, the onScrollTouccReleased callback is triggered multiple times and onScrollEnd is triggered only once.

Example



//Sample code to set onScrollEnd event callback to a Segment widget.

frmSegment.mySegment.onScrollEnd=onScrollEndCallBack;

function onScrollEndCallBack(source)
{
	//Write your logic here
}

Platform Availability

iOS
Android

onScrollWidgetPosition Event

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

onSwipe Event

This event is triggered when you swipe a row in a segment.

Syntax

onSwipe ()

Parameters

seguiWidget

Optional. Reference to the SegmentedUI widget that raised the event.

sectionIndex

Optional. Specifies the index of the section where the current focused row belongs to. The value is -1 in case if there are no sections.

rowIndex

Optional. Specifies the index of the current focused row of the section.

selectionState

Optional. Specifies the selected state of the current focused rows checked or unchecked. It is available when selectionBehavior is set as SEGUI_SINGLE_SELECT_BEHAVIOR or SEGUI_MULTI_SELECT_BEHAVIOR mode. It is applicable to the following viewTypes:

SEGUI_VIEW_TYPE_PAGEVIEW
SEGUI_VIEW_TYPE_COVERFLOW (iOS and Android)
SEGUI_VIEW_TYPE_STACK (iOS)
SEGUI_VIEW_TYPE_LINEAR (iOS)
SEGUI_VIEW_TYPE_ROTATORY (iOS)
SEGUI_VIEW_TYPE_INVERTED_ROTARY (iOS)
SEGUI_VIEW_TYPE_CYLINDER (iOS)
SEGUI_VIEW_TYPE_INVERTED_CYLINDER (iOS)

Read/Write

Read + Write

Remarks

This event is available only when the viewType is set to page view.

Example



//Sample code to set onSwipe event callback to a Segment widget.

frmSegment.mySegment.onSwipe=onSwipeCallBack;

function onSwipeCallBack(segUI)
{
	//Write your logic here
}

Platform Availability

Available on all platforms

preOnclickJS Event

This event allows the developer to execute custom javascript function before the onClick callback of the widget is invoked.

Syntax

preOnclickJS()

Read/Write

Read + Write

Remarks

This is applicable only for Mobile Web channel. The function must exist in a javascript file under project>module>js folder.

In for the events preOnclickJS and postOnclickJS you will not be able to access application model or APIs, as these functions are executed in browser whereas the remaining JS modules are executed in server. For these events you can access browser objects ( window, document etc..) to change UI or perform some validation before server event. If the event preOnclickJS returns true, only then the request is sent to server for subsequent action.

You have to specify the modules to be loaded in browser using import JS tab, only then these files get included in html script tag otherwise you will not be able to access the objects defined in those modules.

Example



//Sample code to set preOnclickJS event callback to a Segment widget.

frmSegment.mySegment.preOnclickJS=preOnclickJSCallBack;

function preOnclickJSCallBack(seguiWidget)
{
	//Write your logic here
}

Platform Availability

Available in the IDE
Available on Server side Mobile Web (BJS and Advanced) platform only

postOnclickJS Event

This event allows the developer to execute custom javascript function after the onClick callback of the widget is invoked.

Syntax

postOnclickJS()

Read/Write

Read + Write

Remarks

This is applicable only for Mobile Web channel. The function must exist in a javascript file under project>module>js folder.

Example



//Sample code to set postOnclickJS event callback to a Segment widget.

frmSegment.mySegment.postOnclickJS=postOnclickJSCallBack;

function postOnclickJSCallBack(seguiWidget)
{
	//Write your logic here
}

Platform Availability

Available in the IDE
Available on Server side Mobile Web (Advanced) platform only

onReachingBeginning Event

onReachingBeginning gets called when scrolling reaches the beginning of the SegmentedUI widget.

Syntax

onReachingBeginning()

Parameters

seguiWidget

Optional. Handle to the widget reference.

Read/Write

Read + Write

Remarks

Following are the requirements and limitations to use this event on iOS and Android/Android Tablet platforms:

This event is invoked only when it is placed directly inside a ScrollBox or in a Form
Segment viewType must be set as SEGUI_VIEW_TYPE_TABLEVIEW
The property screenLevelWidget must be set to true.

If segment is inside any other container widget like HBox/VBox then onPull, onPush, onReachingBegining and onReachingEnd events, cross platform behavior is undefined and these events might not be called.

On Android platform, if the rows height/number of rows is less than the screen display height, then onReaching preserve">var var onPush event callbacks won't get invoked.

Example



//Sample code to set onReachingBeginning event callback to a Segment widget.

frmSegment.mySegment.scrollingEvents={
        onReachingBeginning: onReachingBeginningCallBCk
    };

function onReachingBeginningCallBCk (seguiWidget)
{
	//Write your logic here
}
//Sample code to read the scrollingEvents of the Segment widget.	
alert("SegmentedUI scrollingEvents ::" + frmSegment.mySegment.scrollingEvents);

Platform Availability

Available in the IDE
Available on all platforms
Desktop Web support is added in V8 SP2

onReachingEnd Event

onReachingEnd gets called when scrolling reaches the end of the SegmentedUI widget.

Syntax

onReachingEnd()

seguiWidget

Optional. Handle to the widget reference.

Read/Write

Read + Write

Remarks

Following are the requirements and limitations to use this event on iOS and Android/Android Tablet platforms:

This event is invoked only when it is placed directly inside a ScrollBox or in a Form
Segment viewType must be set as SEGUI_VIEW_TYPE_TABLEVIEW
The property screenLevelWidget must be set to true.

If segment is inside any other container widget like HBox/VBox then onPull, onPush, onReachingBegining and onReachingEnd events, cross platform behavior is undefined and these events might not be called.

On Android platform, if the rows height/number of rows is less than the screen display height, then onReaching preserve">var var onPush event callbacks won't get invoked.

Example



//Sample code to set onReachingEnd event callback to a Segment widget.

frmSegment.mySegment.scrollingEvents={
        onReachingEnd: onReachingEndCallBCk
    };

function onReachingEndCallBCk(seguiWidget, offset)
{
	//Write your logic here
}
//Sample code to read the scrollingEvents of the Segment widget.	
alert("SegmentedUI scrollingEvents ::" + frmSegment.mySegment.scrollingEvents);

Platform Availability

Available in the IDE
Available on all platforms
Desktop Web support is added in V8 SP2

onPull Event

An event callback that is invoked by the platform when scrolling the SegmentedUI widget.

onPull gets called when SegmentedUI is pulled from top.

Syntax

onPull()

Parameters

seguiWidget

Optional. Handle to the widget reference.

Read/Write

Read + Write

Parameters

Following are the requirements and limitations to use this event on iOS and Android/Android Tablet platforms:

This event is invoked only when it is placed directly inside a ScrollBox or in a Form
Segment viewType must be set as SEGUI_VIEW_TYPE_TABLEVIEW
The property screenLevelWidget must be set to true.

If segment is inside any other container widget like HBox/VBox then onPull, onPush, onReachingBegining and onReachingEnd events, cross platform behavior is undefined and these events might not be called.

On Android platform, if the rows height/number of rows is less than the screen display height, then onReaching preserve">var var onPush event callbacks won't get invoked.

Example



//Sample code to set onPull event callback to a Segment widget.

frmSegment.mySegment.scrollingEvents={
        onPull: onPullCallBCk
    };

function onPullCallBCk (widgetref)
{
	//Write your logic here
}
//Sample code to read the scrollingEvents of the Segment widget.	
alert("SegmentedUI scrollingEvents ::" + frmSegment.mySegment.scrollingEvents);

Platform Availability

Available in the IDE
Available on all platforms

onPush Event

An event callback that is invoked by the platform when scrolling the SegmentedUI widget.

onPush gets called when SegmentedUI is pushed from bottom.

Syntax

onPush()

Parameters

seguiWidget

Optional. Handle to the widget reference.

Read/Write

Read + Write

Remarks

Following are the requirements and limitations to use this event on iOS and Android/Android Tablet platforms:

This event is invoked only when it is placed directly inside a ScrollBox or in a Form
Segment viewType must be set as SEGUI_VIEW_TYPE_TABLEVIEW
The property screenLevelWidget must be set to true.

If segment is inside any other container widget like HBox/VBox then onPull, onPush, onReachingBegining and onReachingEnd events, cross platform behavior is undefined and these events might not be called.

On Android platform, if the rows height/number of rows is less than the screen display height, then onReaching preserve">var var onPush event callbacks won't get invoked.

Example



//Sample code to set onPush event callback to a Segment widget.

frmSegment.mySegment.scrollingEvents={
        onPush: onPushCallBCk
    };

function onPushCallBCk (widgetref)
{
	//Write your logic here
}
//Sample code to read the scrollingEvents of the Segment widget.	
alert("SegmentedUI scrollingEvents ::" + frmSegment.mySegment.scrollingEvents);

Platform Availability

Available in the IDE
Available on all platforms