stepper

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

Some properties are common to all components, see Common component properties for a list and their 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 . 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, determined by the standard colors or by your branding color configuration. For example if the status is complete use isPositive to show the chart in green (standard). If no style is specified the chart shows in blue (standard). Available options: isNegative - red (standard) isPositive - green (standard) isWarning - orange (standard)
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 example

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)

children:
  - type: component.stepper
    options:
      data: [email protected]
      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

stepper (dynamic)

datasources (static)

datasources (dynamic)