> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Steps

> Learn about the use cases, basic Attribute configuration, and Premium configuration of the Steps Component, including the current step Attribute, Type Attribute, and display direction. This page also covers how to dynamically set step Data and provides typical examples.

| **Capability** | **Free plan** | **Basic edition** | **Professional edition** | **Dedicated edition** |
| -------------- | ------------- | ----------------- | ------------------------ | --------------------- |
| Steps          | Not supported | Not supported     | Supported                | Supported             |

The Steps component is a Premium component of the custom page.

## 1. Use Cases

The Steps component of the custom page is well suited for building forms such as dispatched personnel information entry and sign in information sign up. It also helps remind users of the progress when filling in basic information.

<Note>
  For component attributes, usage, and examples, see [**Steps Component**](/open/yida/components/advanced/steps).
</Note>

Steps demo

## 2. Basic Component Attributes

Steps component attribute settings

### 2.1 Current Step Attribute

A number type that controls the status of the step data at the current step. When the status of all step data is default, the current step shows the in-progress status, previous steps show completed, and subsequent steps show waiting.

Current step attribute

### 2.2 Type Attribute

The types of the Steps component include cricle (circle), arrow, and dot. The three styles are shown below.

Steps type attribute styles

### 2.3 Display Direction

The display direction of the Steps component can be set to horizontal or vertical. Note that the arrow type does not support the vertical style.

Steps display direction attribute styles

### 2.4 Content Alignment Attribute

The content alignment attribute is only supported by the cricle type. The arrow and dot types do not support this attribute, so it does not appear when either of these types is selected.

Steps content alignment attribute styles

### 2.5 Read-Only Mode

Read-only mode is closed by default, which allows users to click step nodes to execute the custom action set on them.

When Read-only mode is on, step nodes cannot be clicked, and custom actions are not triggered.

Set the custom action for a node:

Steps custom action

<Note>
  You can copy the following code directly into the JS panel.
</Note>

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function onClick(index) {
  this.utils.toast({
    title: `Current clicked index: ${index}`
  });
  if(index == 0){
    this.utils.router.push('https://www.yidaapps.com', {}, true, true)
  }
}
```

## 3. Premium Component Configuration

### 3.1 Data Format

| **Field** | **Name** | **Description**                                                                                                                                    |
| --------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| title     | Title    |                                                                                                                                                    |
| content   | Content  | If not passed, the value is generated based on the current step (current) attribute of the outer step. Valid values are wait, process, and finish. |
| status    | Status   |                                                                                                                                                    |
| icon      | Icon     |                                                                                                                                                    |
| percent   | Percent  |                                                                                                                                                    |
| disabled  | Disabled |                                                                                                                                                    |

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
[
    {
        "title": "step1",
        "content": "Content",
        "status": "wait",
        "icon": "smile",
        "percent": 100,
        "disabled": false,
    },
    {
        "title": "step2",
        "content": "Content",
        "status": "wait",
        "icon": "smile",
        "percent": 100,
        "disabled": false,
    },
]
```

### 3.2 Dynamically Setting Step Data

Bind the step data of the Steps component to a variable data source, drag in a Button component, and set its click action. When the Button is clicked, modify the value in the variable data source to dynamically set the step data.

Bind variable data source

Set the action of the Button component

<Note>
  You can copy the following code directly into the JS panel.
</Note>

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
//Add an item bound Action Settings
export function onClickAdd(){
  console.log('onClick');
  const data = this.state.demoData
  data.push({
    'title': 'newStep',
    'content': 'New Content'
  })
  this.setState({
    demoData: data,
    currentData: this.state.currentData + 1
  })
}
```

### 3.3 Typical Example

Set a variable data source with a default value of 0. Bind the variable data source to the current step attribute of the Steps component.

Bind variable data source

#### 3.3.1 Preparation

##### (1) Set the unique identifier of the container Component, place the Components whose Data needs to be filled in inside the container Component, and control the visibility of the Components to be filled in the Next step based on the show/hide state of the container Component.

Set the unique identifier of the container component

##### (2) Set the Tips text, icon, and style for Submit Success/Failed. Here, a variable Data Source is used to control the visibility of the container Component.

Set data source to control container visibility

The block\_3 container is bound to a variable data source

##### (3) Bind Actions to the Button Components. The Next, Resubmit, and Submit Again Buttons share the same onclick Action.

Bind actions to Button components

##### (4) Set the Custom click Action onclick2 on the step nodes.

Steps bound action + effect demo

<Note>
  You can copy the following code directly into the JS panel. Note: replace the unique identifiers of the components with your own.
</Note>

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
/**
* button onClick
*/
export function onClick() {
  let formCurrent = this.state.formCurrent
  switch (formCurrent) {
    //On the first click, formCurrent is 0
    case 0:
        this.$("block_1").set("behavior", "HIDDEN")
        this.$("block_2").set("behavior", "NORMAL")
        this.setState({
          formCurrent: formCurrent + 1
        })
      break;
    case 1:
        this.$("block_2").set("behavior", "HIDDEN")
        //Randomly succeed or fail. Later, you can call a Data Source and use the returned request result to determine Success or Failed.
        const isSuccess = Math.random() < 0.5 ? "block_3_type" : "block_4_type";
        console.log(isSuccess)
        this.setState({
          formCurrent: formCurrent + 1,
          [isSuccess]: "NORMAL",
          action: "HIDDEN"
        })
      break;
    case 2:
    //Reset the Component values in container 1 to empty
      this.$("textField_ktjfxslga").reset()
      this.$("textField_ktjfxslh").reset()
      this.$("textField_ktjfxslj").reset()
      this.$("textField_ktjfxslk").reset()
      this.$("textareaField_ktjfxslm").reset()
    //Reset the Component values in container 2 to empty
      this.$("textField_ktjfxsln").reset()
      this.$("textField_ktjfxslo").reset()
      this.$("textField_ktjwwsj5").reset()
      this.$("textareaField_ktjfxsls").reset()

    //Show container 1, hide container 2
      this.$("block_1").set("behavior", "NORMAL")
      this.$("block_2").set("behavior", "HIDDEN")
      this.setState({
        formCurrent: 0,
        action: "NORMAL",
        block_3_type: "HIDDEN",
        block_4_type: "HIDDEN"
      })
      break;
  }
}

/**
 * FusionStep onClick
 * @param value node index
 */
export function onClick2(index) {
  this.utils.toast({
    title: `Current clicked index: ${index}`
  });
  if(index == 0){
    this.setState({
      formCurrent: 0,
      action: "NORMAL",
      block_3_type: "HIDDEN",
      block_4_type: "HIDDEN"
    })
    this.$("block_1").set("behavior", "NORMAL")
    this.$("block_2").set("behavior", "HIDDEN")
  }
}
```