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

# Pengaturan halaman

> Pelajari cara menggunakan komponen halaman kustom di YiDA, termasuk entri pengaturan, konfigurasi atribut seperti mengaktifkan header halaman, serta event lifecycle untuk logika inisialisasi.

| **Fitur**      | **Edisi Gratis** | **Edisi Basic** | **Edisi Professional** | **Edisi Dedicated** |
| -------------- | ---------------- | --------------- | ---------------------- | ------------------- |
| Halaman kustom | Tidak didukung   | Tidak didukung  | Didukung               | Didukung            |

## 1. Ikhtisar

Komponen halaman ditempatkan di designer secara default. Komponen ini merupakan komponen root halaman YiDA, dan semua komponen lain pada halaman tersarang di dalamnya.

Setiap halaman hanya memiliki satu komponen halaman. Karena itu, komponen halaman tidak muncul di pustaka komponen di sisi kiri, serta tidak dapat disalin atau dihapus.

## 2. Entri pengaturan

### 2.1 Klik Pengaturan halaman di bagian atas

Pada toolbar atas designer, klik **Pengaturan halaman**. Komponen halaman akan terpilih di designer, dan pengaturannya akan muncul di sisi kanan.

Halaman edit formulir

## 3. Atribut

Pengaturan atribut

### 3.1 Aktifkan header halaman

Setelah header halaman diaktifkan, area header akan tetap muncul di bagian atas halaman. Anda dapat menambahkan komponen lain ke slot preset di area ini.

Klik header di designer untuk memilih komponen header dan mengonfigurasinya. Anda juga dapat memilih komponen header dari outline tree di sisi kiri atau breadcrumbs di sisi kanan.

#### 3.1.1 Atribut header

Header adalah kumpulan slot. Beberapa slot bawaan tersedia untuk diaktifkan atau dinonaktifkan sesuai kebutuhan.

Setelah slot diaktifkan, Anda dapat menyeret komponen atau template ke dalamnya untuk mencapai efek kustom.

Secara default, slot yang diaktifkan diisi dengan komponen yang direkomendasikan sistem. Anda dapat menghapus atau menambahkan komponen sesuai kebutuhan.

#### 3.1.2 Gaya header

Untuk pengaturan gaya komponen umum, lihat [**Ikhtisar gaya**](/id/yida/form/gdnsgw).

### 3.2 Lifecycle

**Path**: Formulir halaman kustom >> Pengaturan halaman >> Atribut >> Lifecycle

#### 3.2.1 Saat pemuatan halaman selesai

Atur tindakan yang akan dijalankan saat halaman selesai dimuat. Ini umumnya digunakan untuk menjalankan logika inisialisasi kustom.

**Klik Bind action.**

**Masukkan nama tindakan, lalu klik Konfirmasi untuk menyelesaikan pembuatan tindakan.**

**Tulis logika bisnis yang sesuai di panel aksi.**

Untuk cara menulis logika bisnis, lihat [Panel aksi JS - Keterbukaan kode frontend](/id/yida/developer-features/ocmxyv).

Setelah binding, klik ikon di sisi kanan untuk **Locate in code**, **Edit** kode, atau **Hapus** binding tindakan.

#### 3.2.2 Saat halaman ditutup

Atur tindakan yang akan dipicu saat halaman ditutup. Langkahnya sama seperti **Saat pemuatan halaman selesai** di atas.

### 3.3 Pengaturan konten halaman

#### 3.3.1 Pengaturan PC dan mobile

Atur margin, padding, dan warna latar belakang untuk sisi PC.

Atur margin, padding, dan warna latar belakang untuk sisi mobile.

## 4. Gaya

Untuk pengaturan gaya komponen umum, lihat [**Ikhtisar gaya**](/id/yida/form/gdnsgw).