segmented-control

The segmented-control is a horizontal control consisting of segments that allows you to toggle between multiple options in a compact, efficient way. It is commonly used for filtering content, switching views, or selecting categories within an app.

This component enhances user experience by providing a quick and intuitive way to navigate without needing drop-downs or separate screens. When designing a segmented control, consider:

• Keeping the number of segments minimal for readability

• Providing immediate visual feedback when a selection is made

Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.

Core structure
data	Specify the title to display in each segment and a data value. Repeat the title and value properties to create the number of segments in the control.
title	The label for the segment. You can use in the title.
value	The data value for the segment that is used to display content when toggled. Can be used in an expression or to set the initialValue.

Other options
initialValue	Configure which segment to display as active when the jig opens. By default there are no active segments. Tap the segment to activate it.
isDisabled	Set to true disables the segmented-control (ready only mode). By default the property's value is false.

State Configuration	Key	Notes
[email protected].	value	State is the variable of the component.
[email protected].	activeItemId now	Global state variable that can be used throughout the solution.

Examples and code snippets

Basic segmented-control

Segmented-controls

This examples displays a basic segmented-control - A segmented-control with four segments. When a segment is tapped, its corresponding value is displayed in an entity-field.

Example: See the full example in GitHub.

segmented-control-basic.jigx

title: Segmented-control
type: jig.default
         
children:
  - type: component.section
    options:
      title: Basic segmented-control
      children:
       # Segment-control - Basic Segmented-control.      
        - type: component.segmented-control
          instanceId: numbers
          options:
            # Configure the number of segments, name and their values.          
            data:
              - title: One
                value: 1
              - title: Two
                value: 2
              - title: Three
                value: 3
              - title: Four
                value: 4  
        - type: component.entity
          options:
            children:
              - type: component.entity-field
                options:
                  label: Numbers
                  # Display the segments values in a field as you toggle the 
                  # segments.                
                  value: [email protected]      

Segmented-control with a datasource

Segment-control with a datasource

This examples displays a segmented-control with a datasource - This segmented-control dynamically retrieves its titles and values from a datasource. It consists of three segments, when a segment is tapped, its value is displayed in an entity-field.

Example: See the full example in GitHub.

segmented-control-datasource.jigx

title: Segmented-control
type: jig.default
         
children:
  - type: component.section
    options:
      title: Segmented-control using datasource
      children:
        # Segment-control - Segmented-control with a datasource.       
        - type: component.segmented-control
          instanceId: work
          options:
            # Configure the number of segments, name and their values. 
            # Use datasources to define the data for the title and value.          
            data: [email protected]
        - type: component.entity
          options:
            children:
            - type: component.entity-field
              options:
                label: Task
               # Display the segments values in a field as you toggle the segments.                
                value: [email protected]   

datasource (static)

Disabled segmented-control

Disabled segmented-controls

This examples displays a disabled segmented-control - A segmented-control with three segments that is set to a disabled state, preventing user interaction.

Example: See the full example in GitHub.

segmented-control-disabled.jigx

title: Segmented-control
type: jig.default
         
children:  
  - type: component.section
    options:
      # Segment-control -Disabled segmented-control.
      title: Disabled segmented-control
      children:
        - type: component.segmented-control
          options:
            # Disable the segmented control, rendering in in a read only mode.          
            isDisabled: true
            # Configure the number of segments, name and their values.             
            data:
              - title: Clock In
                value: 1
              - title: Break
                value: 2
              - title: Clock Out
                value: 3  

Preselected segmented-control

Segmented-controls

This examples displays a preselected segmented-control - A segmented-control with three segments, where the second segment is set as active by default when the jig opens. When a segment is tapped, its value is displayed in an entity-field.

Example: See the full example in GitHub.

segmented-control-preselected.jigx

title: Segmented-control
type: jig.default
         
children:
  - type: component.section
    options:
      title: Set default segment
      children:
        # Segment-control - Preselected segmented-control. 
        - type: component.segmented-control
          instanceId: default-segment
          options:
            # Configure which segment will be active when the jig opens.          
            initialValue: Manager Group B 
            # Configure the number of segments, name and their values.                
            data:
              - title: Available
                value: Team A
              - title: On Duty
                value: Manager Group B
              - title: Off Duty
                value: Team B         
        - type: component.entity
          options:
            children:
            - type: component.entity-field
              options:
                label: Roster
                # Display the segments values in a field as you toggle the segments.                 
                value: [email protected]    

Segmented-control using state

This example demonstrates how to configure the entity-field and form component state to display the relevant content based on the segment tapped. The value entered in the form when the Email segment is displayed is used to generate a PDF and share it via email.

Example: See the full example in GitHub.

Segmented-control using state

segmented-control-state.jigx

title: Invoice
description: "Send an invoice via: "
type: jig.default
# Clear the form's field on refresh.
onRefresh: 
  type: action.reset-state
  options:
    state: [email protected]
# Clear the form's field when the app is in focus.
onFocus: 
  type: action.reset-state
  options:
    state: [email protected]
                   
children:
    # configure the segment-control to use state.
    - type: component.segmented-control
      instanceId: choice
      options:
        # Configure which segment will be active when the jig opens.
        initialValue: Phone
        # Configure the number of segments, name and their values.
        data:
          - title: Phone
            value: Phone
          - title: Email
            value: Email
    - type: component.entity
      options:
        children:
          - type: component.entity-field
            # Set a condition that defines what content displays,
            # when the Phone segment is tapped.
            when: [email protected] = 'Phone'
            options:
              label: ="You are sending an invoice to this phone number " & @ctx.components.phonenum.state.value
              value: " "
          - type: component.entity-field
            # Set a condition that defines what content displays,
            # when the Email segment is tapped.
            when: [email protected] = 'Email'
            options:
              label: ="You are sending an invoice to this email address " & @ctx.components.emailaddress.state.value
              value: " "
    - type: component.form
      instanceId: form
      options:
        isDiscardChangesAlertEnabled: false
        children:
          - type: component.number-field
            # Set a condition that defines what form field to display,
            # when the Phone segment is tapped.
            when: [email protected] = 'Phone'
            instanceId: phonenum
            options:
              label: "Insert a phone number to send the invoice to:"
          - type: component.email-field
            # Set a condition that defines what form field to display,
            # when the Email segment is tapped.
            when: [email protected] = 'Email'
            instanceId: emailaddress
            options:
              label: "Insert an email to send the invoice to:"

actions:
    - children:
        - type: action.action-list
          options:
            # Only show the action button when Phone segment is tapped.  
            isHidden: [email protected] = 'Phone'
            title: Send
            isSequential: true
            actions:
              - type: action.generate-pdf
                instanceId: generate-pdf-id
                options:
                  html: [email protected]
                  fileName: invoice-1  
              - type: action.share
                options:
                  email: [email protected]
                  fileUri: [email protected]
                  message: Global Invoice 
                  subject: Invoice for January       

monthly-invoice-HTML.jigx