Desain halaman kustom untuk aplikasi berdasarkan model Anda
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 |
---|---|---|
Label1 | Tampilan | |
Kotak teks1 | Input | |
Pengambil tanggal1 | Input | |
Tombol1 | Input | |
kotak kombo1 | Input | |
Kotak centang1 | Input | |
Tombol pengalih1 | Input | |
Grup radio1 | Input | |
Penggeser1 | Input | |
Peringkat1 | 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 |
1 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 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
Navigasi tab dan aksesibilitas keyboard untuk halaman kustom
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.
Lihat juga
Gambaran umum halaman kustom dalam aplikasi berdasarkan model
Menggunakan PowerFx di halaman kustom