Table
The Segment widget is a UI component commonly used to display lists or pages of data. Segment widget is a container that provides the capability to define a row template that repeats for every row or page of the specific segment.
You can use the Segment widget to display data from services, group services together, use templates to create the layout of each row, perform actions such as animations and form navigation when users click on a record, and more. These features have been explained in detail here:
Data Handling : Display data from various services in the Segment. For example, if you have a service that contains the data of all the employees in an organization, you can display it in your application by using a Segment widget.
Group Data : Group data into different sections by using Segment widgets. For example, after you have retrieved all employees’ data from the service mentioned earlier, you can categorize employees based on their respective departments by using another Segment widget.
Define Templates : Create templates to define reusable structure for Segment widgets. Templates help you to attain a consistent look-and-feel for the rows and sections of a Segment widget.
Animations : Add animation effect to the rows of a Segment widget in order to perform a specific task. One of the main uses of this capability is to enable the option that allows users to delete a Segment row, by swiping the row from right to left.
Row Click events : Assign a variety of actions to Segment widgets, which are performed when users click on a Segment row. Actions such as animations, form navigation, and more, can be applied to any row in a Segment. For example, if you have a Segment that contains the list of all employees in an organization, you can click on any row to move to another form where the details of the specific employee are displayed.
Widgets are normally added to your application using Volt MX Iris, but can also be added from code. For general information on using widgets in Volt MX Iris, see Designing an Application in the Iris User Guide .
For general information on the SegmentedUI widget, refer the Segment2 topic in the Volt MX Iris User Guide.
Note: Segment Widget Feature sample app by using Volt MX Iris.
VIDEO
VIDEO
The SegmentedUI widget capabilities can be broadly categorized into the following:
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.
Animations
Methods
Description
animate Applies an animation to the widget.
animateRows Associates animations with a specific row and its elements.
setAnimations Associates animations to the rows at each operation.
resetSwipeMove This method is used to reset the widget swipe to its initial state.
Events
Description
onRowDisplay Overwrites the rows that are affected because of an operation on rows.
Properties
Description
animateFocusChanges This property is used to bring the row specified in the selectedRowIndex property to the visible region.
transform Contains an animation transformation that can be used to animate the widget.
widgetSwipeMove Used to enable and configure the left or right swipe actions for a widget.
Data Management
Methods
Description
addAll Enables you to add new data to the segment.
addDataAt Enables you to add one row of data at a given ind ex or with in a section.
addSectionAt Enables you to add one section with rows to the segment.
getFirstVisibleRow Returns a JavaScript object containing the first visible row section index and row index.
getLastVisibleRow Returns a JavaScript object containing the last visible row's section index and row index.
removeAll Enables you to remove all the existing rows and sections in a segment.
removeAt Enables you to remove the row at the given index or a row with in a section.
removeSectionAt Allows you to remove a section at the given index within a segment.
setData Allows you to set new data to the segment.
setDataAt Allows you to set data or modify an existing data of a row or within a section.
setSectionAt Allows you to set or modify a section with rows to the segment.
Properties
Description
metaInfo Allows to capture row level attributes.
stopRerenderOnSetDataAt Allows only the modified content of a row to be updated when setDataAt method is used.
Internationalization
Layout
Properties
Description
anchorPoint Specifies the anchor point of the widget bounds rectangle using the widget's coordinate space.
bottom Determines the bottom edge of the widget and is measured from the bottom bounds of the parent container.
centerX Determines the center of a widget measured from the left bounds of the parent container.
centerY Determines the center of a widget measured from the top bounds of the parent container.
height Determines the height of the widget and measured along the y-axis.
left Determines the lower left corner edge of the widget and is measured from the left bounds of the parent container.
maxHeight Specifies the maximum height of the widget and is applicable only when the height property is not specified.
maxWidth Specifies the maximum width of the widget and is applicable only when the width property is not specified.
minHeight Specifies the minimum height of the widget and is applicable only when the height property is not specified.
minWidth Specifies the minimum width of the widget and is applicable only when the width property is not specified.
orientation Specifies how you can stack the widgets within the SegmentedUI.
right Determines the lower right corner of the widget and is measured from the right bounds of the parent container.
rowHeight Specifies the height of the row of a SegmentedUI.
rowWidth
Specifies the width of the row of a SegmentedUI.
top Determines the top edge of the widget and measured from the top bounds of the parent container.
width Determines the width of the widget and is measured along the x-axis.
zIndex Specifies the stack order of a widget.
Events
Description
doLayout Invoked for every widget when the widget position and dimensions are computed.
Paging
Properties
Description
retainScrolledPage Enables you to retain the page of the Segment widget after the widget has been reloaded in iOS platform.
needPageIndicator A Page Indicator is a succession of docs centered below the SegmentedUI widget.
pageOnDotImage Specifies the image to indicate that the page is currently being viewed.
pageOffDotImage Specifies the image to indicate that the pages that are not been currently viewed.
State Configurations
Properties
Description
defaultSelection Specifies if the first clickable element (Image or Label) of the segment is selected by default.
retainSelection Specifies if the segment should retain the selection made even when the user navigates out of the form and revisits the form.
selectedRowIndex Indicates the currently selected row in single select or multi select modes in the SegmentedUI.
selectedRowIndices Specifies an array of indexes which indicates the selected rows.
selectedRowItems Returns the data of the selected rows in the segmentedUI.
selectionBehavior Specifies if the segment can support single or multiple selection.
selectionBehaviorConfig Enabled if you select either singleselect or multiselect.
UI Appearance
Properties
Description
alternateRowSkin Specifies the skin that is applied to every alternate even numbered row in the segment.
border Specifies the border to the SegmentedUI.
displayType Specifies the display type of segmentPageView, either in PivotView or FlipView.
indicator Specifies the indicator type as rowSelect, rowClick, or none.
opacity Specifies the opacity of the widget.
pageSkin Specifies the skin for page indicator.
pressedSkin Specifies the skin to indicate that the row of the segment is pressed or clicked.
progressIndicatorColor Specifies the color of the progress indicator as white or grey.
pullToRefreshSkin Specifies the skin to be applied to the pull to refresh title.
pushToRefreshSkin Specifies the skin to be applied to the push to refresh title.
rowFocusSkin Specifies the skin that must be applied when user selects the row.
rowSkin Specifies the skin that must be applied for each row.
sectionHeaderSkin Specifies the skin to be applied to the Section Header.
separatorColor Specifies the color of the separator between row of segmentedUI.
separatorRequired Specifies if the segment should display the separator between the rows of the SegmentedUI.
separatorThickness Specifies the thickness of the separator in pixels.
showProgressIndicator Specifies if the progress indicator must be displayed.
viewType You can use this property to select the view type of a segment.
viewConfig You can use this property to select the view type of a segment.
widgetSkin Specifies the skin to be applied to the entire SegmentedUI.
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.
Events
Description
onDragCompleted Invoked when the drag and drop of a row in the Segment is complete.
onReachingBeginning Called when scrolling reaches the beginning of the SegmentedUI widget.
onReachingEnd Called when scrolling reaches the end of the SegmentedUI widget.
onRowClick Triggered when the user click any row of the SegmentedUI.
onSwipe Triggered when you swipe a row in a segment.
onScrollStart Indicates that scroll container started scrolling.
onScrollTouchReleased Indicates that user scrolling touch on the display is released.
onScrolling Indicates that segment scro
