---
title: "au-widget-steps/IWidgetStepsConfig | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-steps.IWidgetStepsConfig/"
---

# au-widget-steps/IWidgetStepsConfig

> Navigation modes.

## Enumerations

### NavigationMode

#### Enumeration Members

| Enumeration Member | Value | Description |
| ------ | ------ | ------ |
|  `all` | `2` | All steps are available. |
|  `previous` | `0` | The user can visit only the next step and all previous steps. |
|  `visited` | `1` | The user can visit the next step and all previously visited steps. |

## Classes

### StepConditionConfig

#### Constructors

##### Constructor

```ts
new StepConditionConfig(): StepConditionConfig;
```

###### Returns

[`StepConditionConfig`](#stepconditionconfig)

#### Properties

##### description?

```ts
optional description?: string;
```

Tooltip text that will be displayed on the `Next` button, showing why it is impossible to go to the next step

##### disabled?

```ts
optional disabled?: boolean;
```

Disables a step.

##### enabled?

```ts
optional enabled?: boolean;
```

Enables a step.

##### hidden?

```ts
optional hidden?: boolean;
```

Makes step hidden.

## Interfaces

### IBackToProductButton

#### Properties

##### onClick

```ts
onClick: Function | Function[];
```

##### title

```ts
title: string;
```

##### url

```ts
url: string;
```

##### visible

```ts
visible: boolean;
```

***

### IStepData

Provides the title and index for manipulating [steps](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-steps.IWidgetStepsConfig.md#iwidgetstepsconfig).

#### Properties

##### index

```ts
index: number;
```

##### name

```ts
name: string;
```

##### title

```ts
title: string;
```

***

### IWidgetStepsConfig

Provides properties for the `steps` widget.

You can use these properties in **params** of the `AuWidgetSteps` class.
```json
{
  "widgets": [
    {
      "name": "steps",
      "type": "steps",
      "params": {
        "availabilityMode": "visited",
        "steps": {
          "Step 3": {
            "enabled": "{{$['confirmation-checkbox']._}}"
          }
        }
      }
    }
  ]
}
```

#### Properties

##### availabilityMode

```ts
availabilityMode: NavigationMode;
```

Defines what steps are available to users.

##### backToProductButton

```ts
backToProductButton: IBackToProductButton;
```

Allows you to enable and configure backToProduct button.

##### finishButton

```ts
finishButton: IFinishButtonConfig;
```

##### steps

```ts
steps: object;
```

Allows you to override the availability mode of a particular step.

###### Index Signature

```ts
[key: string]: StepConditionConfig
```