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 docid\ rtomyji3uoxiqxdultz3o stepper preview configuration options configuration options some properties are common to all components, see common component properties docid\ llntd rxe8fmh7wpc5czb 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 step docid\ hvn9xta75c2bjczzmqrpb 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 green if no style is specified the chart shows in blue blue are styling sets isnegative red red ispositive green green iswarning orange 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 examples and code snippets stepper example 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) 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 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