Table of Contents

Stepper

stepper

The Stepper Control lets you organize content in tabs, and each tab can host a single Subscreen.

You can drag and drop a Stepper Control onto a page from the UI Elements toolbox folder.

Steps

To add Steps, click Edit Steps in the Property pane.
Using the Steps editor, you can manage stepps by setting the header texts and contents.

To set the contents of a step, choose a Subscreen from the Contents dropdown.

Note

Subscreen can only be used once, so if you don’t see a Subscreen in the dropdown, this means that it is already in use somewhere else in the Workbook.

Steps properties:

Header

The text displayed as the step header.

Header Expression

A C# expression returning a string.

Content

The subscreen to display as the step content.


Stepper API

You can use the Stepper API to control different states of the Steps dynamically, such as the header texts and enabled/disabled states.

The Stepper API can be called from the Execute Expression, Set Step Is Completed or Go To Step action of the Stepper.


Actions


Set Step Is Completed(...)

Checks out the step when completed.

Arguments("Step1", true)

Go To Step(...)

Switches to the selected step.

Arguments("Step3")

Events


Step Navigated To

Executes an expression when the conditions are met.


Example

This example shows which condition needs to be met to disable Step3.

Condition

@Event.Data.StepName=='Step2'

Instruction

StepperItem("Step3").Disable()

img

StepperItem(...)

Returns a reference to a Stepper instance which has the following API.

StepperItem("step name")

SetHeader(...)

Sets the header of a step.

SetHeader(text : string | Eaze expression)

Example

This example shows how to change the header of the Step named “Step1” from the Execute Expression action of a Stepper:

    StepperItem("Step1").SetHeader("My Header");

SetHeaderSuffix(...)

Adds a suffix to the original tab header. The optional whitespaceBetween enables you to determine whether you want whitespace between the base header text and the suffix (the default is true).

SetHeaderSuffix(text : string | Eaze expression[, whitespaceBetween | boolean = true])

Example

This example shows how to set a suffix of the Tab named “Tab1” from the Execute Expression action of a Stepper

    StepperItem("Tab1").SetHeaderSuffix("My suffix");

ResetHeader(...)

Resets the header to its original value.

Example

This example shows how to reset the text of the Step named “Step1” to its original state from the Execute Expression action of a Stepper:

    StepperItem("Step1").ResetHeader();

Disable(...)

Lets you specify whether a tab is disabled or not.

Disable([disable:boolean = true])

Example

This example shows how to disable the Step named “Step1” from the Execute Expression action of a Stepper:

    StepperItem("Stepr1").Disable();

You can also call Disable(…) by passing a boolean value indicating whether the Step should be disabled or not, which basically means you can set the disabled state.

    StepperItem("Step1").Disable(false); // Since we’re passing false, Enables the Step.

Enable(...)

Lets you specify whether a step is enabled or not.

Enable([enable:boolean = true])

Example

This example shows how to enable the Step named “Step1” from the Execute Expression action of a Stepper:

    StepperItem("Step1").Enable();

You can also call call Enable(…) by passing a boolean value indicating whether the Step should be enabled or not, which basically means you can set the enabled state.

    StepperItem("Step1").Enable(false); // Since we’re passing false, Disables the Step.

Videos