Skip to main content

1. Kasus penggunaan

Gunakan komponen Pagination ketika halaman kustom memuat data yang perlu ditampilkan secara terpaginasi.
Untuk atribut komponen, cara penggunaan, dan contoh, klik di sini.

3. Langkah-langkah

3.1 Buat formulir biasa

Seret komponen Teks satu baris ke dalam formulir, lalu klik Simpan. Kembali ke Beranda aplikasi dan tambahkan beberapa data ke formulir ini.

3.2 Buat halaman kustom

Seret komponen container ke halaman kustom, lalu tambahkan komponen teks dan komponen Pagination di dalamnya. Gunakan pohon outline untuk melihat susunan komponen tersebut. Halaman kustom

3.3 Buat Sumber Data jarak jauh

Di halaman kustom, klik Sumber Data di sisi kiri, pilih Tambah, lalu buat API jarak jauh. Ganti namanya sesuai kebutuhan. Sumber Data halaman kustom Klik URL permintaan dan ubah menjadi endpoint API yang diperlukan: ’/${window.pageConfig.appType || window.g_config.appKey}/v1/form/searchFormDatas.json’ Untuk detailnya, lihat dokumentasi API: API platform YiDA (dapat dipanggil langsung dari Sumber Data halaman) Ubah parameter permintaan, atau klik Tambah untuk menambahkan parameter baru. Seperti ditunjukkan dalam dokumentasi, nama parameternya adalah formUuid. Nilai parameter: Beranda aplikasi >> Pengaturan aplikasi >> Deployment dan operasi >> pilih ID formulir yang sesuai. Pengaturan aplikasi Klik tanda plus di samping Data Handling untuk membuat fungsi Callback penyelesaian permintaan, lalu klik Simpan. Tambah Sumber Data

3.4 Atur data loop untuk komponen container

Klik pohon outline dan pilih komponen container. Cari Loop Data di sisi kanan, lalu klik pengikatan variabel. Tambahkan .data ke API jarak jauh searchFormDatas, lalu klik Konfirmasi untuk menyimpan.

3.5 Ikat variabel

Klik komponen teks pada halaman kustom, lalu cari pengikatan variabel untuk Konten di sisi kanan. Masukkan this.item.formData. diikuti dengan identifier unik komponen Teks satu baris pada formulir biasa. Untuk menemukan formData: klik Pratinjau pada halaman edit, klik kanan dan pilih Inspect, buka console, lalu cari formData.

3.6 Buat Sumber Data variabel

Klik Sumber Data di sisi kiri dan buat sebuah variabel (pada contoh ini, pageSizeA). Cukup ubah namanya.

3.7 Buat tindakan

Klik komponen Pagination, lalu cari Action Settings di bagian kanan bawah. Klik Buat Tindakan dan buat dua tindakan (pada contoh ini, perubahan nomor halaman dan perubahan ukuran halaman). Setelah tindakan dibuat, panel JS akan terbuka secara otomatis di sisi kiri. Tulis kode di sana untuk memuat ulang Sumber Data.

3.8 Ikat variabel (total jumlah rekaman dan nomor halaman saat ini)

(1) Klik pengikatan variabel untuk total jumlah rekaman di sisi kanan komponen Pagination, masukkan state.searchFormDatas.totalCount (totalCount adalah jumlah total rekaman), lalu klik Konfirmasi. (2) Klik pengikatan variabel untuk nomor halaman saat ini, masukkan state.searchFormDatas.currentPage (currentPage adalah halaman saat ini), lalu klik Konfirmasi.

3.9 Ikat variabel pageSize

Klik pengikatan variabel untuk pageSize dan gunakan operator ternary pada kode JS: state.pageSizeA?state.pageSize:5 untuk menentukan jumlah data yang dapat ditampilkan pada halaman saat ini. Klik Konfirmasi, simpan, lalu kembali ke Beranda.