Components

stepper

4min

This component displays the progress status of a task. Useful when tracking deliveries or claims. This component can only be used in a jig.default﻿. 
Stepper Preview
﻿
﻿Configuration options﻿
﻿
Core structure
﻿
data
Define the data to be used in the step items, you can use expressions to reference a datasource.
item
There is only one available option, which is step﻿. The item property is core for the stepper component, so even if you are creating a non-expandable stepper you must configure the step component's title and value properties with an empty string: ""
completedPercentage
Define the percentage to be displayed on the chart. Example "0.24" => 24 %. 1 represents 100% complete.
Other options
﻿
isExpandable
Set to true the stepper will be expandable into steps. Set to false the stepper is not expandable.
style
The styling determines the color of the chart. There are three colors options. For example if the status is complete use isPositive to show the chart in green. If no style is specified the chart shows in blue.
 are styling sets:
isNegative - red﻿
isPositive -  green﻿
isWarning - orange﻿
subtitle
The subtitle/short description of the stepper to display under the title. You can use an expression to set the subtitle.
title
The title for the stepper, you can use an expression to set the title.
﻿Examples and code snippets ﻿
Stepper for shipment status
﻿
In this example, a stepper component shows that the task is half done. For completeness, use it together with the step component. After expanding the stepper, the individual steps will be shown.
Examples:
See the full example using static data in GitHub. 
See the full example using dynamic data in GitHub. 
Datasource:
See the full datasource for static data in GitHub. 
See the full datasource for dynamic data in GitHub. 
stepper (static)
stepper (dynamic)
datasources (static)
datasources (dynamic)
tchildren:
  - type: component.stepper
    options:
      data: [email protected]-dynamic
      isExpandable: true
      title: Shipment in transit
      item:
        type: component.step
        options:
          title: [email protected]
          description: [email protected]
          value: [email protected] 
          leftElement:
            element: icon
            icon: [email protected]
          style:
            isPositive: [email protected]
            isActive: [email protected]
            isStrikeThrough: [email protected]
            isDisabled: [email protected]
      completedPercentage: 0.5
      style:  
        isPositive: false
        isWarning: false
        isNegative: false
tchildren:
  - type: component.stepper
    options:
      data: =@ctx.datasources.steps-dynamic
      isExpandable: true
      title: Shipment in transit
      item:
        type: component.step
        options:
          title: =@ctx.current.item.title
          description: =@ctx.current.item.description
          value: =@ctx.current.item.value 
          leftElement:
            element: icon
            icon: =@ctx.current.item.icon
          style:
            isPositive: =@ctx.current.item.iscompleted
            isActive: =@ctx.current.item.isactive
            isStrikeThrough: =@ctx.current.item.iscompleted
            isDisabled: =@ctx.current.item.iswaiting
      completedPercentage: 0.5
      style:  
        isPositive: false
        isWarning: false
        isNegative: false
﻿
﻿

Core structure
data	Define the data to be used in the step items, you can use expressions to reference a datasource.
item	There is only one available option, which is step. The item property is core for the stepper component, so even if you are creating a non-expandable stepper you must configure the step component's title and value properties with an empty string: ""
completedPercentage	Define the percentage to be displayed on the chart. Example "0.24" => 24 %. 1 represents 100% complete.

Other options
isExpandable	Set to true the stepper will be expandable into steps. Set to false the stepper is not expandable.
style	The styling determines the color of the chart. There are three colors options. For example if the status is complete use isPositive to show the chart in green. If no style is specified the chart shows in blue. are styling sets: isNegative - red isPositive - green isWarning - orange
subtitle	The subtitle/short description of the stepper to display under the title. You can use an expression to set the subtitle.
title	The title for the stepper, you can use an expression to set the title.

Updated 24 Jul 2024

Did this page help you?

progress-bar

step

stepper

﻿Configuration options﻿

Core structure

Other options

﻿Examples and code snippets ﻿

Stepper example

Configuration options

Examples and code snippets