Components

segmented-control

6min

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﻿
﻿
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 Localization﻿ 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  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 ﻿
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.
segmented-control.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]     
       
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: =@ctx.components.numbers.state.value     
       
﻿
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.
segmented-control.jigx
datasource (static)
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]   
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: =@ctx.datasources.content
        - 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: =@ctx.components.work.state.value   
﻿
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.
segmented-control.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  
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  
﻿
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  opens. When a segment is tapped, its value is displayed in an entity-field.
segmented-control.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]-segment.state.value    
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: =@ctx.components.default-segment.state.value    
﻿
﻿

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 Localization 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 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.