Segment

A Segment widget consists of multiple segments (rows or records) and each segment can have multiple child widgets. You can use Segment widgets to create menus and grouped lists in your applications.

To learn how to use this widget programmatically, refer Quantum Visualizer Widget guide.

You can place a Segment widget within a number of parent widgets, and you can place a number of child widgets within a Segment widget.

You can add a Segment widget to the following widgets:

Flex Form VBox Form
FlexContainer FlexScrollContainer
ScrollBox (vertical orientation only) Tab
Popup VBox widget (but not an HBox)

 

You can place the following widgets within a Segment widget:

Button

Calendar

FlexContainer

Image2

Label

Phone

RichText

Slider

Switch

TextArea2

TextBox2

ListBox

Important Considerations

The following are important considerations for a Segment widget:

Using the Segment Widget in a Component or Master

One you add a Segment widget to a component or master, you cannot drop other widgets onto that segment widget. To add a widget to a Segment widget in a component or master, create a segment row template, populate it with the widgets you want it to have, and then you configure the segment widget in the component or master to reference that row template. Once the segment widget in your component or master is populated width content from the row template, you can edit the segment widget's master data to have the per-row customized data that you need.

Note: A segment template can only apply to one channel. To work around this, create the segment template for one channel, copy it, and then paste it into the other channels.

To use a Segment widget in a component or master:

  1. Create a segment row template. To do so, in the Project Explorer, click the Templates tab, open the channel you want to create the segment template for (e.g. Mobile), click the context menu arrow of Segments, and then click New Template. The template is created and opens on the Visualizer Canvas. It might be a good idea to rename the template to something descriptive, such as rowMobile. To do so, on the Templates tab, click the context menu arrow of the newly-created template, and then click Rename.
  2. Drag a FlexContainer widget onto the new template on the Visualizer Canvas, and configure it how you want.
  3. Drag onto the FlexContainer the widgets that you want the segment row template to have, and configure them how you want.
  4. Once you have the segment row template configured the way you want it, if you want to copy it to other channels, click the context menu arrow of the configured template, and then click Copy. Navigate to and open the channel you want to paste it to, click the context menu arrow of Segments, and then click Paste. Rename the template if you'd like, and then make any needed modifications so that it looks and behaves correctly in that channel.
  5. On the File menu (the Project menu in Quantum Visualizer), click Save All.
  6. Add a Segment widget to the component or master. To do so, in the Project Explorer, on the Templates tab, in the Components or Masters section, select the component or master so that it opens on the Visualizer Canvas, add (or select an existing) container widget in the component or master, and then drag a Segment widget onto it.
  7. In the Properties Editor for the Segment widget you just added, click the Segment tab. Then from the Row Template drop-down list, select the row template you want to use.
  8. From the Segment tab, click the Edit button for Master Data, and make any changes needed to the segment data.
  9. On the File menu (the Project menu in Quantum Visualizer), click Save All.

Look Properties

Look properties define the appearance of the widget. The following are the major properties you can set:

For descriptions of the properties available on the Look tab of the Properties pane, see Look.

Skin Properties

Skin properties define a skin for the widget, including background color, borders, and shadows. If the widget includes text, you can also specify the text font.

For the Segment widget, you can apply a skin and its associated properties for the following states:

Skin Definition
Row

The skin that is applied for each row.

Row - Focus

The skin that is applied when user focuses on a row.

Section Header

The skin that is applied to the Section Header of Segment widget.
Widget

The skin that is applied to the entire Segment.

Row - Alternate

The skin that is applied to every alternate even numbered row in the segment.

Blocked UI

The skin that is to block the interface until the action in progress (for example, a service call) is completed.

Note: Blocked UI is available only for SPA platforms.

Pressed

The skin to indicate that the row of the segment is pressed or clicked.

Refresh - Pull The look and feel of a widget when the scroll bar is pulled.
Refresh - Push The look and feel of a widget when the scroll bar is pushed.

For more information about applying skins, see Understanding Skins and Themes.

Segment Properties

Segment properties specify properties that are available on any platform supported by Quantum Visualizer, and assign platform-specific properties.

Note: Properties that can be forked are identified by an icon located to the left of the property. For more information, see Fork a Widget Property.

Master Data

The master data is enabled only when the widgets are added to the Segment widget.

The following example illustrates using the Master Data property to add an image and button to the Segment widget:

  1. Select the Segment widget.
  2. Drag an Image widget and Button widget onto the Segment widget.
  3. From the Segment widget properties, click the Segment tab.
  4. Click the Edit button of the Master Data option to open the Master Data dialog box.
  5. Provide the image and button widget details as shown in the following image.
  6. Click OK.

Row Template

Indicates the common template to be used for each row while creating the row and filling the data. This can be overridden at the row level when setting the data using the template key.You can create a new template without going to the Templates section using the Create New option from the drop-down list. You can also edit a template inline in the segment.

Note: Only those templates that are created from Project Explorer >Templates > Segments are visible on the Row Template drop-down list.

Section Header Template

Specifies the common template to be used for each section while creating the section header and filling the data. This is optional parameter and if not provided the default template provided by each platform will be used. It can also be provided at each section level when setting the data. You can create a new template without going to the Templates section using the Create New option from the drop-down list. You can also edit a template inline in the segment.

Note: Only those templates that are created from Project Explorer >Templates > Segments are visible on the Row Header Template drop-down list.

Note: When a Section Header is provided along with the rows/items, the Section Header is "clamped" to the top of the scrollable area (on the Form) as one scrolls through a long list of items (for example, if you have a long list of contacts that all begin with the letter "A", the "A" header will be fixed at the top until you scroll down past the last "A" item). This behavior can be clearly seen iPhone's Contacts application.
This behavior of Section Headers is available on iOS and Android platform and is enabled when the Screen Level Widget has been set to true.

Group Cells

Specifies whether all the rows in a segment should be grouped using a rounded corner background and border.

Retain Selection

Specifies whether the segment should retain the selection made when the user navigates out of the form and revisits the form.

Full Screen Widget

Specifies whether the widget should occupy the whole container or not. You must set the value to true if your segment has large data sets (more than 20 records with each record having more than 15 widgets) to facilitate a better reuse of the widgets and a different scrolling behavior.

Note: This property is available only when a Segment widget is placed in a VBox form.

Separator

Specifies if the segment should display the separator between the rows.

Separator Thickness

Specifies the thickness of the separator in pixels.

Separator Color

Specifies the color of the separator between rows of a Segment widget. Click the color sampler to open the color picker from where you can select a separator color.

Separator Transparency

Provide the desired transparency for the separator.

Show Scrollbars

Specifies if the scrollbars of the segment must be visible all the time.

Orientation

Specifies how you can stack the widgets within the Segment. You can set the orientation of the Segment as horizontal or vertical.

Following are the options:

Note: This property is available only when Segment widget is placed in a VBox form.

View Type

Specifies the view type of a segment. The following are the available view types that you can select and their appearances on iPhone native client:

Layout Alignment

Specifies the direction in which the widgets are laid out.

Default: LEFT

The options are:

Note: This property is avialable only when Segment widget is placed in a VBox form.

Selection Behavior

Specifies whether the segment will support single or multiple selection.

Following are the options:

Enable Reordering

For Quantum Visualizer Version 7.3 and later, specifies whether to enable or disable reordering rows in a segment.

Autogrow Mode

This property is applicable only when the segment is placed inside a flex container and View Type is set as Table. It specifies the segment to grow when the new content is added.

Following are the options:

Rules and Priorities of Autogrow-Mode property

Height

Specifies the height of the Segment in terms of percentage. The percentage is with reference to the value of Height Reference property.

Note: This property is unavailable on Flex Forms.

Height Reference

The Segment height percentage is calculated based on the option selected.

Dictionary

Specifies whether the dictionary must be enabled for easy navigation.

If the dictionary property is enabled, alphabets from A to Z appear on the screen and when you select any alphabet, all the corresponding results that start with the selected alphabet are displayed.

Note: This property is applicable if Screen Level Widget property is set to true and the section headers have been set.

Note: This property is specific to the iOS platform.

Indicator

Specifies the indicator type as rowSelect, rowClick, or none. Based on your selection, the behavior is exhibited:

Following are the options:

If the user selects the indicator, the related content appears in the next screen .

If the user selects the disclosure button, the detailed content appears.

Note: This property is specific to the iOS platform.

Edit Style

Specifies the way in which the edit feature of Segment can be enabled.

Following are the options:

Note: This property is specific to the iOS platform.

Progress Indicator

Specifies whether the progress indicator is displayed.

Default: true (the progress indicator appears on the widget)

Note: This property is specific to the iOS platform.

Progress Indicator Color

Specifies the color of the progress indicator as white or grey.

Note: This property is specific to the iOS platform.

Scroll Bounces

Specifies whether the scroll view bounces past the edge of the content and back again.

Note: This property is specific to the iOS platform.

Search Criteria

Specifies the search criteria to be applied when searching has been enabled.

Note: This property applies only when the Full Screen Widget property is enabled, View Type is set to Table, and a template is selected for Search By property.

The options are:

Note: This property is specific to the iOS platform.

Search By

Specifies the identifier of the widget placed inside the row of the Segment. Search will be performed against the content present inside the widget.

Note: Note: This property is applicable only when Full Screen Widget property is enabled, View Type is set to Table, and a template is selected for Row Template property.

Note: This property is specific to the iOS platform.

Dock Section Header

Specifies whether to dock the section header at the top of the segment while scrolling the section content. If you are scrolling the segment data, the next section header will be docked on top of the segment

Note: This property applies only when the Full Screen Widget property is enabled and View Type is set to Table.

For example, if you scroll the segment data shown in the following figure, as the segment data scrolls up, the Samsung Phones docked header moves out oThe Samsung header f view. and is replaced with the HTC Phones section header, which is now docked.

Note: This property is specific to the Android platform.

Swipe Config

From Quantum Visualizer V9 onwards, you can configure swipe functionality for a Segment widget. The Swipe config settings enable users to dismiss a row or to reveal certain actions when they swipe a row to the left or right.

For more information on enabling the swipe functionality on the rows of a Segment using a row template, refer SwipeConfig.

Actions

Actions define what happens when an event occurs. On a Segment widget, you can run an action when the following events occur:

For more information, see Add Actions.

Create a User-defined Template from an Auto-generated Segment Template

To create a user-defined Template from an auto-generated Segment Template, follow these steps:

  1. Right-click the Segment that contains the auto-generated Template and associated UI elements. A list of options appears.

  2. Click Create Template. Quantum Visualizer displays a dialog box stating that if you have added a code snippet for the widgets inside the Segment Template, the associated code will be cloned in the Segment Template; but, the references in the custom code will not be modified appropriately. You must manually make the changes to the references in the custom code.

  3. Click OK. A new Segment Template, which is a clone of the selected Segment Template, is created and is available at Project Explorer > Templates > *channel* > Segments. Alternatively, you can right-click the original Segment Template and select the Navigate to Template option.

    All the properties of the Segment Template and its associated widgets are duplicated in the newly created Template.

    The cloned Template will be assigned as a Row Template of the selected Segment.

    You can only reuse the Segment Template in various forms of the same channel in which you created the Template.

Map Section Header Template Widgets by using Mapping Editor

To map the widgets of the Section Header Template of a Segment by using Mapping Editor, follow these steps:

  1. In Quantum Visualizer, add a Segment widget to a form.
  2. Select the Segment, and then go to Properties panel > Segment.
  3. In the Row Template list box, select the SampleRowTemplate option.

  4. In the Section Header Template list box, select the SampleSectionHeaderTemplate option.

  5. In Project Explorer, select the form to which you had added the Segment and go to Properties panel > Action.
  6. For any Event (for example, onMapping), click Edit. The Action Editor window appears, with Diagram View open by default.
  7. On the left pane of Action Editor, locate and click the Add Mapping action. The Add Mapping action is added to the flow diagram, as shown here.

  8. Select Add Mapping from the flow diagram. Mapping Editor opens on the right pane of Action Editor.
  9. Map the required global variables, services, and other items to the Segment rowData and sectionData as well as to associated rowData and sectionData widgets.

  1. Click Code View to see the code details of the data mappings.

  2. Click Save. You have successfully mapped the widgets of the Section Header Template and Row Data of a Segment by using Mapping Editor.

Remarks

Widget Appearance on Platforms

The appearance of the Segment widget varies as follows.

Platform Appearance
Android
iOS
Windows Phone
SPA

 

 

 

Rev Author Edits
8 SHS SHS
Copyright © 2020 Temenos. All rights reserved.