Steps

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.

For component attributes, usage, and examples, see Steps Component.

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

You can copy the following code directly into the JS panel.

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

[
    {
        "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

You can copy the following code directly into the JS panel.

//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

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

/**
* 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")
  }
}

Getting Started

Quick Start

Form Management

Workflow Design

Report Design

Aggregate Table Design

Portal Design

Custom Pages

Integration & Automation

Cool App

App Management

Platform Management

Internationalization

YiDA Dedicated

Developer Features

1. Use Cases

2. Basic Component Attributes

2.1 Current Step Attribute

2.2 Type Attribute

2.3 Display Direction

2.4 Content Alignment Attribute

2.5 Read-Only Mode

3. Premium Component Configuration

3.1 Data Format

3.2 Dynamically Setting Step Data

3.3 Typical Example

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.

(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.

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

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

​1. Use Cases

​2. Basic Component Attributes

​2.1 Current Step Attribute

​2.2 Type Attribute

​2.3 Display Direction

​2.4 Content Alignment Attribute

​2.5 Read-Only Mode

​3. Premium Component Configuration

​3.1 Data Format

​3.2 Dynamically Setting Step Data

​3.3 Typical Example

​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.

(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.

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

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

1. Use Cases

2. Basic Component Attributes

2.1 Current Step Attribute

2.2 Type Attribute

2.3 Display Direction

2.4 Content Alignment Attribute

2.5 Read-Only Mode

3. Premium Component Configuration

3.1 Data Format

3.2 Dynamically Setting Step Data

3.3 Typical Example

3.3.1 Preparation