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 the properties 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: =@ctx.datasources.steps
      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

stepper (dynamic)

children:
  - 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

datasources (static)

datasources:
  steps:
    type: datasource.static
    options:
      data:
        - title: Order
          value: step1
          icon: checkbox-checked
          isActive: false
          isCompleted: true
          isWaiting: false
        - description: The shipment is in transit.
          title: Shipment in transit
          value: step2
          icon: time-clock-circle
          isActive: true
          isCompleted: false
          isWaiting: false
        - title: On the way to you
          value: step3
          isActive: false
          isCompleted: false
          isWaiting: true
        - title: Delivered to the recipient
          value: step4
          isActive: false
          isCompleted: false
          isWaiting: true

datasources (dynamic)

datasources:
  steps-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/steps
      query: |
        SELECT
          '$.title',
          '$.description',
          '$.value',
          '$.icon',
          '$.isactive',
          '$.iscompleted',
          '$.iswaiting'
        FROM [default/steps]
        ORDER BY value