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

> Pelajari Komponen Steps di halaman kustom YiDA — konfigurasi Atribut dasar, mode Premium, arah tampilan, hingga pengaturan Data langkah dinamis untuk membangun formulir alur bertahap secara profesional.

| **Kemampuan** | **Edisi Gratis** | **Edisi Basic** | **Edisi Professional** | **Edisi Dedicated** |
| ------------- | ---------------- | --------------- | ---------------------- | ------------------- |
| Steps         | Tidak didukung   | Tidak didukung  | Didukung               | Didukung            |

Komponen Steps merupakan Komponen Premium pada halaman kustom.

## 1. Kasus penggunaan

Komponen Steps pada halaman kustom cocok untuk membangun formulir seperti entri informasi personel yang ditugaskan dan Daftar informasi Masuk, serta dapat mengingatkan pengguna mengenai Progres pengisian informasi Dasar.

<Note>
  Untuk Atribut Komponen, cara penggunaan, dan contoh, silakan [**klik di sini**](/id/open/yida/components/advanced/steps).
</Note>

Demo Steps

## 2. Atribut Komponen dasar

Pengaturan Atribut Komponen Steps

### 2.1 Atribut langkah saat ini

Nilai bertipe Angka yang mengontrol status Data pada langkah aktif. Jika status semua Data langkah adalah Default, langkah saat ini menampilkan status sedang berjalan, langkah sebelumnya menampilkan Selesai, dan langkah berikutnya menampilkan status menunggu.

Atribut langkah saat ini

### 2.2 Atribut Tipe

Tipe Komponen Steps meliputi cricle (lingkaran), arrow, dan dot. Ketiga gaya ditampilkan seperti di bawah ini.

Gaya Atribut Tipe Steps

### 2.3 Arah tampilan

Arah tampilan Komponen Steps dapat diatur menjadi horizontal atau vertikal. Namun, Tipe arrow tidak mendukung gaya vertikal.

Gaya Atribut arah tampilan Steps

### 2.4 Atribut perataan Konten

Atribut perataan Konten hanya didukung oleh Tipe cricle. Tipe arrow dan dot tidak mendukung Atribut ini, sehingga tidak akan muncul saat kedua Tipe tersebut dipilih.

Gaya Atribut perataan Konten Steps

### 2.5 Mode Hanya Baca

Secara Default, mode Hanya Baca Dinonaktifkan sehingga node langkah dapat diklik untuk menjalankan Tindakan Kustom yang diatur pada node tersebut.

Ketika mode Hanya Baca Aktif, node langkah tidak dapat diklik dan Tindakan Kustom tidak akan dipicu.

Mengatur Tindakan Kustom untuk sebuah node:

Tindakan Kustom Steps

<Note>
  Kode berikut dapat langsung disalin ke panel JS.
</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. Konfigurasi Komponen Premium

### 3.1 Format Data

| **Bidang** | **Nama**      | **Deskripsi**                                                                                                                                            |
| ---------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| title      | Judul         |                                                                                                                                                          |
| content    | Konten        | Jika tidak diteruskan, akan dihasilkan berdasarkan Atribut langkah saat ini (current) dari Step luar. Nilai yang valid adalah wait, process, dan finish. |
| status     | Status        |                                                                                                                                                          |
| icon       | Ikon          |                                                                                                                                                          |
| percent    | Persen        |                                                                                                                                                          |
| disabled   | Dinonaktifkan |                                                                                                                                                          |

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

### 3.2 Mengatur Data langkah secara dinamis

Ikat Data langkah Komponen Steps ke Sumber Data variabel, seret Komponen Tombol, lalu atur Tindakan kliknya. Saat diklik, ubah nilai dalam Sumber Data variabel untuk memperbarui Data langkah secara dinamis.

Ikat Sumber Data variabel

Atur Tindakan Komponen Tombol

<Note>
  Kode berikut dapat langsung disalin ke panel JS.
</Note>

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
//Pengaturan Tindakan terikat penambahan item
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 Contoh tipikal

Atur Sumber Data variabel dengan nilai Default 0. Ikat Sumber Data variabel tersebut ke Atribut langkah saat ini pada Komponen Steps.

Ikat Sumber Data variabel

#### 3.3.1 Persiapan

##### (1) Atur identifier unik Komponen kontainer, tempatkan Komponen yang Data-nya perlu diisi di dalam Komponen kontainer, lalu kontrol visibilitas Komponen yang akan diisi pada langkah Berikutnya berdasarkan status tampil/sembunyi Komponen kontainer.

Atur identifier unik Komponen kontainer

##### (2) Atur teks Tips, ikon, dan gaya untuk Kirim Berhasil/Gagal. Di sini, Sumber Data variabel digunakan untuk mengontrol visibilitas Komponen kontainer.

Atur Sumber Data untuk mengontrol visibilitas kontainer

Kontainer block\_3 diikat ke Sumber Data variabel

##### (3) Ikat Tindakan ke Komponen Tombol. Tombol Berikutnya, Kirim Ulang, dan Kirim berbagi Tindakan onclick yang sama.

Ikat Tindakan ke Komponen Tombol

##### (4) Atur Tindakan klik Kustom onclick2 pada node langkah.

Steps terikat Tindakan + demo efek

<Note>
  Kode berikut dapat langsung disalin ke panel JS. Catatan: Identifier unik Komponen perlu Diganti.
</Note>

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
/**
* button onClick
*/
export function onClick() {
  let formCurrent = this.state.formCurrent
  switch (formCurrent) {
    //Pada klik pertama, formCurrent adalah 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")
        //Berhasil atau gagal secara acak. Nanti, Anda dapat memanggil Sumber Data dan menggunakan hasil Permintaan yang dikembalikan untuk menentukan Berhasil atau Gagal.
        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:
    //Atur ulang nilai Komponen di kontainer 1 menjadi kosong
      this.$("textField_ktjfxslga").reset()
      this.$("textField_ktjfxslh").reset()
      this.$("textField_ktjfxslj").reset()
      this.$("textField_ktjfxslk").reset()
      this.$("textareaField_ktjfxslm").reset()
    //Atur ulang nilai Komponen di kontainer 2 menjadi kosong
      this.$("textField_ktjfxsln").reset()
      this.$("textField_ktjfxslo").reset()
      this.$("textField_ktjwwsj5").reset()
      this.$("textareaField_ktjfxsls").reset()

    //Tampilkan kontainer 1, sembunyikan kontainer 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")
  }
}
```