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

# Dasar-dasar formulir

> Pelajari cara mengedit formulir di platform YiDA — dari pengaturan komponen dasar, atribut judul, placeholder, dan status hingga aturan validasi Wajib serta fungsi kustom untuk admin aplikasi low-code.

## 1. Pendahuluan

Seret komponen dari panel kiri formulir ke area desain di tengah, lalu konfigurasikan pengaturan dasarnya di sebelah kanan. Gunakan pengaturan ini untuk mempersonalisasi komponen formulir — misalnya, memodifikasi Tampilkan bidang, menyesuaikan Tata letak formulir, atau mengubah tampilan formulir.

**Jalur**: Workbench >> YiDA >> My Apps >> Formulir >> klik **Edit** di pojok kanan atas.

Edit formulir.

Halaman edit formulir.

## 2. Atribut

**Jalur**: Pilih komponen >> pengaturan Atribut dan Premium muncul di sebelah kanan.

Tambahkan komponen.

### 2.1 Judul

Ini adalah nama komponen. Secara default, judul cocok dengan nama tipe komponen dan membantu pengguna mengidentifikasi apa yang harus diisi.

Ubah judul komponen.

Jika judul dibiarkan kosong, judul disembunyikan dan hanya kotak input yang ditampilkan:

Judul kosong.

### 2.2 Tips placeholder

Tips placeholder menjelaskan konten apa yang harus dimasukkan ke dalam komponen. Ini hanya berfungsi sebagai panduan dan tidak memengaruhi nilai bidang.

Contoh, "Masukkan nama siswa":

### 2.3 Deskripsi

Deskripsi memberikan informasi tambahan tentang komponen, dan sering digunakan untuk menjelaskan fungsi, Cakupan, atau instruksi pengisian. Anda dapat memasukkan Teks atau Sisipkan Tautan.

### 2.4 Status

Atur status default dari komponen bidang. Anda juga dapat mengontrol status melalui Izin.

Contoh:

Status komponen.

* **Normal**: Terlihat dan dapat diedit.

* **Nonaktifkan**: Terlihat tetapi tidak dapat diedit. Berbeda dengan Hanya Baca, atribut bidang tetap ditampilkan.

* **Hanya Baca**: Terlihat tetapi tidak dapat diedit.

* **Tersembunyi**: Bidang tidak terlihat dan tidak dapat diedit.

### 2.5 Default

Nilai Default adalah nilai yang diambil bidang saat pengguna membuka formulir.

Untuk beberapa komponen, Anda dapat mengatur Kustom, Konfigurasi cepat, Formula, keterkaitan data, asosiasi dengan data formulir lain, data gateway, atau Cari Sumber Data.

* **Kustom**: Tetapkan nilai tetap. Pengguna masih dapat menghapus nilai ini dan memasukkan data baru saat mengisi formulir.

Contoh:

Default komponen.

* **Penggunaan lanjutan**: Tulis nilai dari Sumber Data sebagai Default.

* **Formula**

Konfigurasikan Formula untuk Default.

* **Konfigurasi cepat**: YiDA menyediakan Pintasan untuk skenario konfigurasi umum.

* **keterkaitan data**

keterkaitan data.

* **Asosiasikan dengan data formulir lain**

Asosiasikan dengan data formulir lain.

* **Data gateway**

API harus dapat dipanggil dari jaringan publik, dan format Respons harus `[{"text":"111","value":"111"}]`.

* **Cari Sumber Data**

API ini hanya dipicu ketika pengguna mencari dengan memasukkan nilai di komponen.

Cari Sumber Data.

### 2.6 Validasi

Anda dapat mengatur Wajib dan validasi fungsi kustom pada semua komponen bertipe bidang:

Validasi (Wajib, fungsi kustom).

#### 2.6.1 Wajib

Wajib berarti bidang harus diisi sebelum data dapat dikirim. Jika tidak, pengiriman gagal dengan Prompt: "XX adalah bidang Wajib."

Wajib.

#### 2.6.2 Nilai minimum

Nilai data minimum yang diizinkan. Contoh, jika nilai minimum komponen Numerik diatur ke 4, nilai input tidak boleh kurang dari 4.

**Tipe komponen yang didukung: Numerik**

Nilai minimum.

#### 2.6.3 Nilai maksimum

Nilai data maksimum yang diizinkan. Contoh, jika nilai maksimum komponen Numerik diatur ke 50, nilai input tidak boleh melebihi 50.

**Tipe komponen yang didukung: Numerik**

Nilai maksimum.

#### 2.6.4 Panjang minimum

Panjang data minimum. Contoh, jika panjang minimum bidang Teks satu baris diatur ke 2, input harus berisi setidaknya 2 karakter.

**Tipe komponen yang didukung: Numerik, Teks satu baris, Teks multi-baris**.

Panjang minimum.

#### 2.6.5 Panjang maksimum

Panjang data maksimum. Contoh, jika panjang maksimum komponen Dropdown multi-pilih diatur ke 2, tidak lebih dari 2 opsi yang dapat dipilih saat mengirim data.

**Tipe komponen yang didukung: Numerik, Teks satu baris, Teks multi-baris, Kotak centang, Dropdown multi-pilih, Departemen, formulir terkait.**

Panjang maksimum.

#### 2.6.6 Fungsi kustom (validasi Premium)

Disarankan memiliki Keterampilan pengodean dasar, tetapi non-developer juga dapat menggunakan kembali contoh kode di bawah.

**Contoh 1**: Periksa apakah input berisi "雨" (hujan).

**Catatan**: Pesan error untuk validasi fungsi kustom wajib diisi; jika tidak, validasi mungkin tidak berfungsi.

Konfigurasikan fungsi kustom.

Anda dapat menyalin kode JavaScript berikut sebagai referensi:

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
// Apakah input berisi "雨" (hujan)
function validateRule(value) {
  if (value.indexOf('雨') > -1) {
    return true;
  }
  return false;
}
```

**Contoh 2**: Periksa apakah input diawali dengan "杭州" (Hangzhou).

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
// Apakah input diawali dengan "杭州" (Hangzhou)
function validateRule(value) {
  if (/^杭州/.test(value)) {
    return true;
  }
  return false;
}
```

**Contoh tambahan:**

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
// Apakah input berisi spasi
function validateRule(value) {
  if(/s/.test(value)){
    return false;
  }
  return true;
}
```

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
// Apakah input adalah nomor kartu bank (pemeriksaan panjang dasar)
function validateRule(value) {
  var regExp = /^([1-9]{1})(d{15}|d{18})$/;
  return regExp.test(value)
}
```

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
// Apakah input adalah nomor kartu bank standar (kartu UnionPay Tiongkok Daratan)
function validateRule(value) {
  value = (value + '').replace(/D+/g, '')
  const regExp = /^([1-9])(d{15}|d{18})$/
  // Periksa bahwa tidak diawali dengan 0 dan memiliki panjang yang benar
  if (!regExp.test(value)) {
    return false
  }
  value = value.split('').reverse();
  let total = 0
  for (let i = 0; i < value.length; i++) {
    value[i] = parseInt(value[i]);
    total += i % 2 ? 2 * value[i] - (value[i] > 4 ? 9 : 0) : value[i];
  }
  if (total === 0) {
    return false;
  }
  return (total % 10) === 0;
 }
```

Terima kasih khusus kepada @n233333 atas solusi validasi kartu bank sederhana ini.

#### 2.6.7 Pesan error

Ketika validasi bidang gagal, Error muncul dan pengiriman diblokir.

**Catatan**: Bidang ini Opsional. Jika dibiarkan kosong, pesan default "Bidang ini wajib diisi" akan muncul:

Pesan error.

## 3. Premium

### 3.1 Identifier unik

Identifier unik dari bidang saat ini digunakan untuk penyimpanan data di backend YiDA dan untuk kontrol pemrograman. Fungsinya seperti kartu identitas untuk setiap komponen — setiap komponen memiliki identifier unik yang berbeda. Umumnya tidak perlu diubah, dan default ke nilai yang dibuat sistem.

<Note>
  Identifier unik bidang (fieldId) adalah yang digunakan YiDA untuk mereferensikan bidang. Mengubahnya memengaruhi setiap Formula, penyimpanan data (data juga dapat hilang), dan referensi fungsi JS yang menggunakan bidang ini. Kami sangat **tidak menyarankan** untuk memodifikasinya.
</Note>

Identifier unik komponen.

### 3.2 Tampilan multi-perangkat

Beberapa komponen memiliki opsi ini, yang mengontrol apakah komponen ditampilkan di desktop atau seluler.

**Catatan**: Jika opsi ini dikonfigurasi, mengambil instance komponen saat ini melalui kode mengembalikan `null`.

Tampilan multi-perangkat.

* **Default**: Tampilkan komponen di desktop dan seluler.

* Tampilkan komponen hanya di desktop.

* Tampilkan komponen hanya di seluler.

### 3.3 Pengiriman data

Beberapa komponen memiliki atribut ini, yang mengontrol apakah nilai komponen dikirim saat formulir dikirim.

* **Kirim hanya saat terlihat**: Ketika komponen disembunyikan, datanya tidak dikirim ke backend secara default.
* **Selalu kirim**: Kirim data bidang terlepas dari apakah komponen terlihat.

Pengiriman data.

### 3.4 Pengaturan tindakan

Dengan membuat tindakan, Anda dapat memicu perilaku ketika pengguna berinteraksi dengan komponen bidang saat ini — misalnya, mengirim Peristiwa analitik setelah pengguna selesai mengedit bidang ini dan berpindah ke Berikutnya.

Pengaturan tindakan — Buat tindakan.

**Catatan**: Menambahkan tindakan baru tidak memengaruhi perilaku asli komponen. Contoh, jika Anda telah menetapkan komponen sebagai Wajib, validasi tetap berjalan ketika komponen kehilangan fokus, dan fungsi dalam pengaturan tindakan juga dipicu.

Untuk detail, lihat [panel aksi JS - Buka kode Frontend](/id/yida/developer-features/ocmxyv).

### 3.5 Hapus dan Salin

**Tips: Hapus komponen dengan hati-hati, karena menghapus bidang formulir dapat membuat Formula, aturan asosiasi bisnis, dan konfigurasi lainnya menjadi tidak valid.**

**Jika aplikasi Anda masih dalam pembuatan, belum live, dan belum memiliki data, menghapus bidang berdampak kecil.**

**Jika aplikasi Anda sudah live dan memiliki data, kami tidak menyarankan untuk menghapus bidang. Melakukannya dapat membuat Formula yang dikonfigurasi dan aturan asosiasi bisnis menjadi tidak valid, serta dapat menyebabkan data bidang terkait hilang. Sebagai gantinya, tetapkan bidang sebagai bidang Tersembunyi. Caranya:**

**Pada halaman edit formulir >> pilih bidang >> Atribut >>** [**Status**](/id/yida/form/snftao)

**Jalur Hapus / Salin**: Klik komponen >> Hapus atau Salin, seperti yang ditunjukkan di bawah:

Salin komponen.

Hapus komponen.

### 3.6 Edit komponen

**Jalur**: Pada halaman edit formulir, klik dua kali komponen untuk mengedit namanya:

Edit komponen.

### 3.7 Salin dan tempel komponen (berfungsi antar halaman)

<Warning>
  ⚠️ Kami menyarankan untuk menempel komponen dalam halaman dengan tipe yang sama. Menempel komponen antar tipe halaman yang berbeda dapat menyebabkan bug tak terduga atau membuat komponen tidak dapat digunakan. Masalah yang disebabkan oleh penyalinan antar halaman harus diselesaikan sendiri.
</Warning>

Gunakan `Ctrl+C` untuk menyalin komponen pada halaman saat ini dan `Ctrl+V` untuk menempelnya. (Pada `Mac`, gunakan tombol `Command`.)

## 4. FAQ

<AccordionGroup>
  <Accordion id="q1" title="4.1 Berapa jumlah maksimum komponen per halaman formulir?">
    Terlalu banyak komponen pada satu halaman memengaruhi performa dan pengalaman pengguna. Untuk mempertahankan pengalaman yang baik, kami menyarankan agar jumlah komponen pada satu halaman tetap sedikit. Paket Edisi Gratis mendukung hingga 50 komponen per halaman, sementara paket lain mendukung hingga 300. Jika Anda membutuhkan lebih banyak, bagi formulir menjadi beberapa halaman berdasarkan skenario bisnis.
  </Accordion>

  <Accordion id="q2" title="4.2 Mengapa pengaturan Wajib tidak berlaku?">
    Periksa apakah status komponen diatur ke Hanya Baca. Jika komponen adalah Hanya Baca dan ditandai sebagai Wajib, pengaturan Wajib tidak berlaku.
  </Accordion>
</AccordionGroup>

## 5. Topik terkait

[keterkaitan data](/id/yida/form/arpur0)

[Asosiasikan dengan data formulir lain](/id/yida/form/tg64d5)

[Konfigurasikan opsi asosiasi](/id/yida/form/pw4kp6)

[Aturan bisnis formulir](/id/yida/form/dssg6y)

[Validasi formulir](/id/yida/form/un1t9v)

Tetapkan nilai ke bidang yang tidak terlihat