How to make Segment Style like the below picture? that is the next or previous segments shall be show but on horizontal scroll the middle element should be focused

HCL Volt MX Volt MX Forum
1
This thread was migrated from an old forum. It may contain information that are no longer valid. For further assistance, please post a new question or open a support ticket from the Customer Support portal.

**Image removed for security reasons**

2

Hi @Svwvh Rvndvll​

Segment has View Type property where you can change the view of the segment. Please select the appropriate view type for the segment which can fit for your requirement. Please check the below doc link for more details.

http://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Default.htm#Segment_Properties.htm#viewConf%3FTocPath%3DReference%7CSegmentedUI%2520Widget%7CProperties%7C_____74

3

Hi,

The one way I can suggest is - by using FlexScrollContainer with 100% width and make the layout flow Horizontal. You can control the focus and viewable area using Horizontal Content Offset.

The following APIs have to be used -

var offsetX = frmName.FlexScrollContainer.contentOffsetMeasured.x;

var currViewableArea = Math.floor(offsetX / kony.os.deviceInfo().screenWidth); //here you try to set one compelte widget and other widget viewing partially in the scrollbox.

frmName.FlexScrollContainer.setContentOffset({x:offsetX, y:0},true); //again set the viewable area when scrolling the container box.

For instance, Inside the scroll container you can keep first widget in 20% and anohter widget in rest 80% viewable area of scroll box. After that, on each scroll you have to calculate offsetX then modify the offsetX (here need to play with mathematical calcutaions) and set it back to scroll container.

4

Hi,

In segment properties change the view type property to page and design the row templete as required.

5

@Twvcey Rvndvll​ I saw the docs, but where to add the code I can't find it. Is it to be added in the controller file?

6

Hi @Svwvh Rvndvll​

Select your segment in the form in Visualizer and check the View type property under Segment tab. Select the appropriate channel to get the list of supported views. Refer the attached screenshot. **Image removed for security reasons**