Desain halaman kustom untuk aplikasi berdasarkan model Anda

Artikel
03/14/2023

Artikel ini memberikan tips untuk merancang halaman kustom untuk digunakan dalam aplikasi berdasarkan model.

Penting

Halaman kustom adalah fitur baru dengan perubahan produk yang signifikan dan saat ini memiliki sejumlah batasan umum yang diuraikan dalam Masalah yang Diketahui di Halaman Kustom.

Kontrol yang didukung di halaman kustom

Penulisan halaman kustom saat ini mendukung subset kontrol aplikasi kanvas. Tabel di bawah ini mencantumkan kontrol yang saat ini didukung.

Control	Jenis Kontrol	Catatan
Label¹	Tampilan
Kotak teks¹	Input
Pengambil tanggal¹	Input
Tombol¹	Input
kotak kombo¹	Input
Kotak centang¹	Input
Tombol pengalih¹	Input
Grup radio¹	Input
Penggeser¹	Input
Peringkat¹	Input
Kontainer vertikal	Tata letak	Wadah tata letak horizontal responsif baru
Kontainer Horizontal	Tata letak	Wadah tata letak horizontal responsif baru
Editor Teks Kaya	Input
Galeri	Daftar
Icon	Media
Image	Media
Edit Formulir	Input
Formulir Tampilan	Input
Komponen Kode	Kustom	Menambahkan komponen kode ke halaman kustom
Komponen kanvas (pratinjau)	Kustom	Menambahkan komponen kanvas ke halaman kustom

¹ Kontrol adalah kontrol modern baru. Kontrol diperkenalkan untuk aplikasi kanvas di Teams. Kontrol didasarkan pada pustaka Fluent UI yang dikemas dengan Power Apps Component Framework.

Dukungan komponen kustom untuk halaman kustom

Anda dapat menambahkan komponen UX kustom kode rendah (komponen kanvas) dan pro-kode (komponen kode) ke lingkungan Anda dan membuatnya tersedia untuk semua pembuat. Untuk artikel ekstensibilitas UX khusus halaman kustom, lihat menambahkan komponen kanvas ke halaman kustom untuk aplikasi berdasarkan model Anda dan menambahkan komponen kode ke halaman kustom untuk aplikasi berdasarkan model Anda.

Secara umum, pendekatan ekstensibilitas kode rendah lebih sederhana untuk membangun, menguji, dan memiliki biaya pemeliharaan yang lebih rendah. Sebaiknya evaluasi komponen kanvas lebih dulu, lalu gunakan komponen kode hanya jika diperlukan penyesuaian yang lebih kompleks dan lanjutan.

Informasi selengkapnya:

Aktifkan tata letak responsif dengan kontrol wadah

Tata letak halaman kustom responsif didefinisikan dengan membangun hierarki kontrol wadah tata letak Horizontal dan wadah tata letak Vertikal. Kontrol ini ditemukan dalam desainer aplikasi kanvas dalam Tata Letak pada tab Sisipkan.

Atur tinggi dan lebar layar minimum pada objek Aplikasi untuk mencegah bilah gulir tingkat halaman dan gunakan bilah gulir badan vertikal.

MinScreenHeight=200
MinScreenWidth=200

Atau, ukuran desain halaman kustom dapat disesuaikan di Pengaturan > Tampilan dengan Ukuran diatur ke Kustom. Kemudian atur Lebar dan Tinggi ke ukuran halaman kustom desktop yang lebih umum seperti lebar 1080 dan tinggi 768. Mengubah pengaturan ini setelah kontrol ditambahkan ke layar dapat menyebabkan beberapa properti tata letak menjadi diatur ulang.

Atur wadah paling atas untuk mengisi seluruh ruang dan ubah ukuran berdasarkan ruang yang tersedia.

X=0
Y=0
Width=Parent.Width
Height=Parent.Height

Bungkus horizontal wadah tinggi yang fleksibel

Untuk mendukung halaman yang disesuaikan dari desktop ke lebar sempit, aktifkan properti ini pada wadah horizontal dengan tinggi yang fleksibel. Tanpa pengaturan ini, halaman akan memotong kontrol bila halaman sempit.

Direction=Horizontal
FlexibleHeight=true
Justify=Stretch
Align=Stretch
VerticalOverflow=Scroll
Wrap=True

Wadah anak atau kontrol secara langsung di dalam wadah ini harus diatur ke memiliki lebar minimum yang memungkinkan halaman agar sesuai dalam lebar 300 px. Pertimbangkan padding pada wadah atau kontrol serta wadah induk.

Wrapping vertikal untuk wadah lebar yang fleksibel

Untuk mendukung halaman yang disesuaikan dari desktop ke lebar sempit, aktifkan properti ini pada wadah vertikal dengan lebar yang fleksibel. Tanpa pengaturan ini, halaman akan memotong kontrol bila halaman sempit.

Direction=Vertical
FlexibleWidth=true
Justify=Stretch
Align=Stretch
HorizontalOverflow=Scroll
Wrap=True

Wadah anak atau kontrol secara langsung di dalam wadah ini harus diatur ke memiliki tinggi minimum yang memungkinkan halaman agar sesuai dalam lebar 300 px. Pertimbangkan padding pada wadah atau kontrol serta wadah induk.

informasi lebih lanjut: membuat tata letak responsif.

Wadah vertikal dengan header tetap, badan fleksibel, footer tetap

Pada Wadah Vertikal, atur Sejajarkan (horizontal) ke Regangkan
Masukkan tiga kontrol Wadah Horizontal dalam Wadah Vertikal Induk
Pada kontrol wadah horizontal anak pertama dan ketiga, matikan Regangkan tinggi dan kurangi tinggi ke spasi yang diperlukan, seperti Tinggi=80.

Wadah horizontal dengan dua wadah anak rata

Pada Wadah horizontal induk, atur Sejajarkan (vertikal) ke Regangkan.
Masukkan dua kontrol Wadah Vertikal dalam Wadah Horizontal Induk.

Ubah gaya Kontrol halaman kustom agar selaras dengan kontrol aplikasi berdasarkan model

Dengan membuat halaman kustom dari desainer aplikasi modern, fitur ini menggunakan nilai default.

Tema untuk halaman kustom. Nilai tema untuk kontrol yang digunakan di halaman kustom diatur secara otomatis agar sesuai dengan tema biru default Antarmuka Terpadu. Tema default ini digunakan di studio dan runtime aplikasi. Pemilihan tema eksplisit dihilangkan dari pengalaman penulisan halaman kustom.
Kontrol harus menggunakan ukuran font yang berbeda, yang didasarkan pada posisinya dalam hierarki halaman.

Catatan

Teks halaman kustom memiliki penyesuaian 1,33 sehingga Anda harus membagi FontSize target sebesar 1,33 untuk mendapatkan ukuran yang diinginkan.

Jenis Label FontSize Target FontSize untuk digunakan

Judul halaman 17 12.75

Label normal 14 10.52

Label kecil 12 9.02

Jenis Label	FontSize Target	FontSize untuk digunakan
Judul halaman	17	12.75
Label normal	14	10.52
Label kecil	12	9.02

Kontrol tombol primer dan sekunder memerlukan perubahan gaya berikut:

Tombol Utama

Color=RGBA(255, 255, 255, 1)
Fill=RGBA(41,114,182,1)
Height=35
FontWeight=Normal

Tombol kedua

Color=RGBA(41,114,182,1)
Fill=RGBA(255, 255, 255, 1)
BorderColor=RGBA(41,114,182,1)
Height=35
FontWeight=Normal

Halaman kustom mengikuti desain navigasi tab yang sama yang digunakan oleh aplikasi berdasarkan model hosting. Struktur HTML semantis yang selaras secara visual membantu pengguna menavigasi halaman kustom dengan lancar saat menggunakan keyboard atau layar Pembaca. Perhatikan bahwa tidak seperti aplikasi kanvas mandiri, kontrol halaman kustom, dan elemen UX lainnya tidak memerlukan penetapan angka tab eksplisit. Kontrol modern tidak memiliki properti TabIndex dan memanfaatkan struktur HTML semantis untuk navigasi.

Berbagai elemen seperti kontrol, kanvas dan komponen kode, wadah, dan sebagainya dapat di-tab berdasarkan posisinya dalam tata letak halaman kustom. Navigasi tab mengikuti navigasi urutan Z. Setiap hentian tab di dalam elemen pengelompokan yang lebih besar seperti komponen, wadah dinavigasi terlebih dulu sebelum tab beralih ke elemen berikutnya dalam hierarki model objek dokumen (DOM).

Berikut adalah contoh navigasi dengan halaman yang berisi kontrol, kode, serta wadah dan komponen kanvas.

Catatan

Kontrol dan elemen yang tumpang tindih pada halaman kustom tidak akan digabungkan DOM-nya, sehingga hentian tab dapat tidak disinkronkan dari tata letak visual. Hal yang sama berlaku untuk posisi elemen dinamis menggunakan rumus.