Reka bentuk halaman tersuai untuk aplikasi berpandukan model anda

Artikel
03/14/2023

Artikel ini memberikan panduan untuk mereka bentuk halaman tersuai untuk digunakan dalam aplikasi berpandukan model.

Penting

Halaman tersuai adalah ciri baharu dengan perubahan produk yang ketara dan kini mempunyai bilangan had yang diketahui yang digariskan dalam Isu yang Diketahui Halaman Tersuai.

Kawalan disokong dalam halaman tersuai

Penulisan halaman tersuai menyokong subset kawalan aplikasi kanvas pada masa ini. Jadual di bawah menyenaraikan kawalan tidak disokong pada masa ini.

Control	Jenis Kawalan	Nota
Label¹	Paparkan
Kotak Teks¹	Input
Pemilih Tarikh¹	Input
Butang¹	Input
Kotak Kombo¹	Input
Kotak Semak¹	Input
Togol¹	Input
Kumpulan Radio¹	Input
Gelangsar¹	Input
Penarafan¹	Input
Bekas Menegak	Tataletak	Bekas susun atur mendatar responsif baharu
Bekas Mendatar	Tataletak	Bekas susun atur mendatar responsif baharu
Editor Teks Kaya	Input
Galeri	Senarai
Icon	Media
Image	Media
Edit Borang	Input
Borang Paparan	Input
Komponen kod	Tersuai	Tambahkan komponen kod pada halaman tersuai
Komponen kanvas (pratonton)	Tersuai	Tambahkan komponen kanvas pada halaman tersuai

¹ Kawalan adalah kawalan moden baharu. Kawalan telah diperkenalkan untuk aplikasi kanvas dalam Teams. Kawalan adalah berdasarkan Pustaka UI Lancar yang dibalut dengan Power Apps Component Framework.

Komponen tersuai menyokong untuk halaman tersuai

Anda boleh menambah kedua-dua kod rendah (komponen kanvas) dan komponen UX tersuai prokod (komponen kod) ke persekitaran anda dan menjadikannya tersedia untuk semua pembuat. Untuk halaman tersuai artikel kebolehpanjangan UX khusus, lihat tambah komponen kanvas pada halaman tersuai untuk aplikasi berpandukan model anda dan tambah komponen kod pada halaman tersuai untuk aplikasi berpandukan model anda.

Secara umum, pendekatan kebolehpanjangan kod rendah adalah lebih mudah untuk dibina, diuji dan mempunyai kos penyelenggaraan yang lebih rendah. Kami mengesyorkan menilai komponen kanvas terlebih dahulu dan kemudian gunakan komponen kod hanya jika terdapat keperluan untuk penyesuaian yang lebih kompleks dan lanjutan.

Maklumat lanjut:

Dayakan susun atur responsif dengan kawalan bekas

Susun atur halaman tersuai responsif ditakrifkan dengan membina hierarki kawalan Bekas susun atur mendatar dan Bekas susun atur menegak. Kawalan ini ditemui dalam pereka bentuk aplikasi kanvas di bawah Susun atur pada tab Masukkan.

Tetapkan ketinggian dan lebar minimum skrin pada objek Aplikasi untuk mengelakkan bar tatal peringkat halaman dan gunakan bar tatal menegak.

MinScreenHeight=200
MinScreenWidth=200

Secara alternatif, saiz reka bentuk halaman tersuai boleh dilaraskan dalam Tetapan > Paparan dengan Saiz ditetapkan kepada Tersuai. Kemudian tetapkan Lebar dan Ketinggian kepada saiz halaman tersuai desktop yang lebih tipikal seperti lebar 1080 dan tinggi 768. Mengubah tetapan ini selepas kawalan ditambahkan pada skrin mungkin menyebabkan sesetengah sifat tataletak ditetapkan semula.

Tetapkan bekas paling besar untuk memenuhi keseluruhan ruang dan saizkan semula berdasarkan ruang yang tersedia.

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

Pembalutan mendatar bagi bekas berketinggian fleksibel

Untuk menyokong pelarasan halaman daripada desktop sehingga ke lebar yang sempit, dayakan sifat ini pada bekas mendatar dengan ketinggian fleksibel. Tanpa tetapan ini, halaman akan mengetip kawalan apabila halaman sempit.

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

Bekas anak atau kawalan secara langsung di bawah bekas ini perlu ditetapkan supaya mempunyai lebar minimum yang membolehkan halaman untuk dimuatkan dalam lebar 300 px. Pertimbangkan pelapik pada bekas atau kawalan serta bekas induk.

Pembalutan menegak bagi bekas lebar fleksibel

Untuk menyokong pelarasan halaman daripada desktop sehingga ke lebar yang sempit, dayakan sifat ini pada bekas menegak dengan lebar fleksibel. Tanpa tetapan ini, halaman akan mengetip kawalan apabila halaman sempit.

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

Bekas anak atau kawalan secara langsung di bawah bekas ini perlu ditetapkan supaya mempunyai ketinggian minimum yang membolehkan halaman untuk dimuatkan dalam lebar 300 px. Pertimbangkan pelapik pada bekas atau kawalan serta bekas induk.

Maklumat lanjut: Membina susun atur responsif.

Bekas menegak dengan pengepala tetap, badan fleksibel, kaki tetap

Pada Bekas Menegak, tetapkan Menjajarkan (melintang) kepada Meregangkan
Masukkan tiga kawalan Bekas Mendatar dalam bekas induk Bekas Menegak
Pada kawalan bekas mendatar anak pertama dan ketiga, tetapkan Ketinggian regangan dan mengurangkan ketinggian untuk ruang yang diperlukan, seperti Ketinggian=80.

Bekas mendatar dengan dua bekas anak yang sama

Pada bekas menegak induk, tetapkan Menjajarkan (melintang) kepada Meregangkan.
Masukkan dua kawalan Bekas Mendatar dalam bekas induk Bekas Menegak.

Penggayaan halaman tersuai mengawal untuk diselaraskan dengan kawalan aplikasi berpandukan model

Dengan mencipta halaman tersuai daripada pereka bentuk aplikasi moden, ciri ini menggunakan nilai lalai.

Tema untuk halaman tersuai. Nilai tema untuk kawalan yang digunakan dalam halaman tersuai ditetapkan secara automatik untuk dipadankan dengan tema biru lalai pada Antara Muka Disatukan. Tema lalai ini digunakan dalam kedua-dua studio dan pada masa jalanan aplikasi. Pilih tema yang eksplisit dialih keluar daripada pengalaman penulisan halaman tersuai.
Kawalan perlu menggunakan saiz fon yang berbeza, berdasarkan kedudukan mereka dalam hierarki halaman.

Nota

Teks halaman tersuai mempunyai penskalaan 1.33 jadi anda perlu membahagikan FontSize sasaran dengan 1.33 untuk mendapatkan saiz yang diinginkan.

Jenis Label FontSize Sasaran FontSize untuk digunakan

Tajuk halaman 17 12.75

Label biasa 14 10.52

Label kecil 12 9.02

Jenis Label	FontSize Sasaran	FontSize untuk digunakan
Tajuk halaman	17	12.75
Label biasa	14	10.52
Label kecil	12	9.02

Kawalan butang utama dan kedua memerlukan perubahan penggayaan berikut:

Butang utama

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

Butang kedua

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

Halaman tersuai mengikuti reka bentuk navigasi tab sama yang digunakan oleh pengehosan aplikasi berpandukan model. Struktur HTML semantik diselaraskan secara visual membantu pengguna menavigasi halaman tersuai dengan lancar apabila menggunakan papan kekunci atau pembaca skrin. Ambil perhatian bahawa tidak seperti aplikasi kanvas sendiri, kawalan halaman tersuai dan elemen UX lain tidak memerlukan tugasan nombor tab eksplisit. Kawalan moden tidak mempunyai sifat TabIndex dan menggunakan struktur HTML semantik untuk navigasi.

Pelbagai elemen seperti kawalan, kanvas dan komponen kod, bekas dan sebagainya boleh ditabkan berdasarkan kedudukannya di dalam susun atur halaman tersuai. Navigasi tab mengikut navigasi susunan Z. Tab individu berhenti dalam elemen pengumpulan lebih besar seperti komponen, bekas dinavigasi terlebih dahulu sebelum tab bergerak keluar ke elemen seterusnya dalam pohon model objek dokumen (DOM).

Berikut adalah navigasi contoh dengan halaman yang mengandungi kawalan, kod dan komponen kanvas dan bekas.

Nota

Kawalan bertindan dan elemen pada halaman tersuai tidak akan mempunyai DOM yang digabungkan supaya henti tab akan tidak disegerakkan daripada susun atur visual. Sama juga untuk kedudukan elemen dinamik menggunakan formula.