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: For a more hands-on approach on the functionality of Segment widget, import and preview the 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