Dizajniranje prilagođene stranice za aplikaciju zasnovanu na modelu

Članak
04/14/2023

Ovaj članak pruža savete za dizajniranje prilagođene stranice za upotrebu u aplikaciji zasnovanoj na modelu.

Važno

Prilagođene stranice su nova funkcija sa značajnim promenama proizvoda i trenutno ima brojna poznata ograničenja navedena u članku Poznati problemi prilagođene stranice.

Podržane kontrole na prilagođenoj stranici

Izrada prilagođenih stranica trenutno podržava podskup kontrola aplikacija sa podlogom. U tabeli ispod navedene su trenutno podržane kontrole.

Control	Tip kontrole	Beleške
Oznaka¹	Prikaz
Okvir za tekst¹	Ulaz
Birač datuma¹	Ulaz
Dugme¹	Ulaz
Kombinovano polje¹	Ulaz
Polje za potvrdu¹	Ulaz
Preklopnik¹	Ulaz
Radio grupa¹	Ulaz
Klizač¹	Ulaz
Ocena¹	Ulaz
Vertikalni kontejner	Raspored	Novi odzivni kontejner sa horizontalnim rasporedom
Horizontalni kontejner	Raspored	Novi odzivni kontejner sa horizontalnim rasporedom
Uređivač obogaćenog teksta	Ulaz
Galerija	Lista
Icon	Mediji
Image	Mediji
Uređivanje obrasca	Ulaz
Obrazac za prikaz	Ulaz
Komponente koda	Prilagođeno	Dodavanje komponenti koda prilagođenoj stranici
Komponente podloge (verzija za pregled)	Prilagođeno	Dodavanje komponenti podloge prilagođenoj stranici

¹ Kontrola je nova savremena kontrola. Kontrola je uvedena za aplikacije sa podlom u usluzi Teams. Kontrola se zasniva na Fluent UI biblioteci obmotane sa Power Apps Component Framework.

Podrška prilagođenih komponenti za prilagođenu stranicu

Možete dodati prilagođene UX komponente sa malo kodiranja (komponente podloge) i profesionalnim kodom (komponente koda) u svoje okruženje i učiniti ih dostupnim za sve autore. Za članke o UX proširivosti specifične za prilagođenu stranicu, pogledajte dodavanje komponente podloge na prilagođenu stranicu za aplikaciju zasnovanu na modelu i dodavanje komponenti koda prilagođenoj stranici za aplikaciju zasnovanu na modelu.

Uopšteno, pristup proširivosti sa niskim kodom je jednostavniji za pravljenje, testiranje i ima manje troškove održavanja. Preporučujemo da prvo procenite komponente podloge, a da zatim koristite komponente koda samo ako postoji potreba za složenijim i naprednijim prilagođavanjem.

Još informacija:

Omogućavanje reaktivnog rasporeda sa kontrolom kontejnera

Reaktivni prikazi prilagođene stranice definisani su pravljenjem hijerarhije kontrola Kontejner sa horizontalnim rasporedom i Kontejner sa vertikalnim rasporedom. Ove kontrole se nalaze u dizajneru aplikacija sa podlogom u okviru Raspored na kartici Umetni.

Podesite minimalnu visinu i širinu ekrana na objektu App da biste sprečili trake za pomeranje nivoa stranice i koristili vertikalnu traku za pomeranje sadržaja.

MinScreenHeight=200
MinScreenWidth=200

Opcionalno, prilagođena veličina dizajna stranice može da se podesi u meniju Postavke > Prikaz gde je Veličina postavljena na Prilagođeno. Zatim podesite širinu i visinu na tipičniju prilagođenu veličinu stranice za radnu površinu kao što su širina 1080 i visina 768. Promena ove postavke nakon što se kontrole dodaju na ekran može dovesti do resetovanja nekih svojstava rasporeda.

Podesite najviši kontejner da popuni ceo prostor i podesite veličinu na osnovu raspoloživog prostora.

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

Horizontalno umotavanje kontejnera fleksibilne visine

Da biste podržali stranice koje se prilagođavaju sa radne površine na usku širinu, omogućite ova svojstva u horizontalnom kontejneru sa fleksibilnom visinom. Bez ovih postavki, stranica će iseći kontrole kada bude sužena.

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

Podređeni kontejneri ili kontrole direktno ispod ovog kontejnera treba da budu podešeni tako da imaju minimalnu širinu koja omogućava da se stranica uklopi u širinu od 300 piksela. Uzmite u obzir unutrašnji razmak na kontejneru ili kontroli, kao i nadređene kontejnere.

Vertikalno umotavanje kontejnera fleksibilne širine

Da biste podržali stranice koje se prilagođavaju sa radne površine na usku širinu, omogućite ova svojstva u vertikalnom kontejneru sa fleksibilnom širinom. Bez ovih postavki, stranica će iseći kontrole kada bude sužena.

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

Podređeni kontejneri ili kontrole direktno ispod ovog kontejnera treba da budu podešeni tako da imaju minimalnu visinu koja omogućava da se stranica uklopi u širinu od 300 piksela. Uzmite u obzir unutrašnji razmak na kontejneru ili kontroli, kao i nadređene kontejnere.

Još informacija: Pravljenje reaktivnog rasporeda prikaza.

Vertikalni kontejner sa fiksnim zaglavljem, fleksibilnim telom, fiksnim podnožjem

Na opciji Vertikalni kontejner, postavite Poravnaj (horizontalno) na Razvuci
Umetnite tri kontrole za Horizontalni kontejner unutar nadređenog Vertikalnog kontejnera
Na prvoj i trećoj kontroli podređenog horizontalnog kontejnera postavite da Visina razvlačenja bude isključena i smanjite visinu na potreban prostor, kao što je npr. Visina= 80.

Horizontalni kontejner sa dva ravnopravna podređena kontejnera

Na nadređenom horizontalnom kontejneru, postavite Poravnaj (vertikalno) na Razvuci.
Umetnite dve kontrole za Vertikalni kontejner unutar nadređenog Horizontalnog kontejnera.

Stilizovanje kontrola prilagođene stranice za usklađivanje sa kontrolama aplikacija zasnovanim na modelu

Kreiranjem prilagođene stranice iz savremenog dizajnera aplikacija, ove funkcije koriste podrazumevane vrednosti.

Tema za prilagođenu stranicu. Vrednosti tema za kontrole koje se koriste na prilagođenoj stranici automatski se postavljaju tako da odgovaraju podrazumevanoj plavoj temi objedinjenog interfejsa. Ova podrazumevana tema se koristi i u studiju i za vreme izvođenja aplikacije. Eksplicitan odabir teme uklanja se iz iskustva stvaranja prilagođenih stranica.
Kontrole moraju da koriste drugu veličinu fonta, koja se zasniva na njihovom položaju u hijerarhiji stranice.

Napomena

Tekst prilagođene stranice ima povećanje od 1,33, pa morate da podelite ciljnu FontSize za 1,33 da biste dobili željenu veličinu.

Tip oznake Ciljni FontSize FontSize za korišćenje

Naslov stranice 17 12.75

Normalne oznake 14 10.52

Male oznake 12 9.02

Tip oznake	Ciljni FontSize	FontSize za korišćenje
Naslov stranice	17	12.75
Normalne oznake	14	10.52
Male oznake	12	9.02

Kontrole primarnog i sekundarnog dugmeta zahtevaju sledeće promene stila:

Primarna dugmad

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

Sekundarna dugmad

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

Prilagođene stranice prate isti dizajn navigacije karticama koji koristi aplikacija zasnovana na modelu hosta. Vizuelno usklađena semantička HTML struktura pomaže korisnicima da se nesmetano kreću po prilagođenim stranicama kada koriste tastaturu ili čitač ekrana. Imajte na umu da za razliku od samostalnih aplikacija sa podlogom, kontrolama prilagođenih stranica i drugim elementima korisničkog interfejsa nisu potrebni eksplicitne dodele brojeva kartica. Savremene kontrole nemaju TabIndex svojstvo i koriste semantičku HTML strukturu za navigaciju.

Različiti elementi, poput kontrola, komponenti podloge i koda, kontejnera itd. mogu se označiti karticama na osnovu njihovog položaja u rasporedu prilagođene stranice. Navigacija karticom prati navigaciju po Z redu. Pojedinačni graničnici kartica unutar većih elemenata grupisanja, poput komponenti, prvo se kreću po kontejnerima pre nego što se kartica prebaci na sledeći element u stablu objektnog modela dokumenta (DOM).

Evo primera navigacije sa stranicom koja sadrži kontrole, kodove i komponente podloge i kontejnere.

Napomena

Preklapajuće kontrole i elementi na prilagođenoj stranici neće spojiti svoj DOM tako da zaustavljanje kartica može biti nesinhronizovano u vizuelnom rasporedu. Isto važi i za pozicioniranje dinamičkih elemenata pomoću formula.