Dizajniranje prilagođene stranice iz aplikacije stvorene prema modelu (pretpregled)
Članak sadrži savjete za dizajniranje prilagođene stranice za upotrebu u aplikaciji stvorenoj prema modelu.
Važno
- Osnovna funkcionalnost prilagođenih stranica prešla je na opću dostupnost u svim regijama. Međutim, neke specifične ili nove mogućnosti još uvijek su u javnom pretpregledu i označene su (pretpregledom).
- Značajke pretpregleda nisu namijenjene u proizvodne svrhe i mogu imati ograničene funkcije. Te su značajke dostupne prije službenog izdavanja da bi se klijentima omogućio prijevremeni pristup i slanje povratnih informacija.
- Prilagođene stranice nova su značajka sa značajnim promjenama proizvoda i trenutno imaju niz poznatih ograničenja navedenih u Poznati problemi prilagođene stranice.
Podržane kontrole na prilagođenoj stranici
Izrada prilagođenih stranica trenutno podržava podskup kontrola aplikacije od gotovih gradivnih elemenata. U donjoj tablici navedene su trenutačno podržane kontrole.
| Control | Vrsta kontrole | Bilješke |
|---|---|---|
| Oznaka1 | Prikaži | |
| Tekstni okvir1 | Unos | |
| Birač datuma1 | Unos | |
| Gumb1 | Unos | |
| Kombinirani okvir1 | Unos | |
| Potvrdni okvir1 | Unos | |
| Prebacivanje1 | Unos | |
| Izborna grupa1 | Unos | |
| Klizač1 | Unos | |
| Ocjena1 | Unos | |
| Okomiti spremnik | Raspored | Novi responzivni vodoravni spremnik |
| Vodoravni spremnik | Raspored | Novi responzivni vodoravni spremnik |
| Uređivač obogaćenog teksta | Unos | |
| Galerija | Popis | |
| Ikona | Mediji | |
| Image | Mediji | |
| Uređivanje obrasca | Unos | |
| Obrazac prikaza | Unos | |
| Komponente koda | Prilagođeno | Dodavanje komponenata koda prilagođenoj stranici |
| Komponente radnog područja (pretpregled) | Prilagođeno | Dodavanje komponenata radnog područja prilagođenoj stranici |
1 Upravljanje je nova moderna kontrola. Kontrola je uvedena za aplikacije od gotovih gradivnih elemenata u aplikaciji Teams. Kontrola se temelji na tečnoj biblioteci korisničkog sučelju omotanoj Power Apps component framework.
Podrška prilagođenih komponenti za prilagođenu stranicu
Možete dodati prilagođene komponente UX-a s niskim kodom (komponente radnog područja) i pro-kod (komponente koda) u svoje okruženje i učiniti ih dostupnima za sve autore. Za posebne članke o proširenju UX-a za prilagođene stranice pogledajte dodavanje komponenti radnog područja prilagođenoj stranici za aplikaciju stvorenu prema modelu i dodavanje komponente koda prilagođenoj stranici za aplikaciju stvorenu prema modelu.
Općenito, pristup proširivosti s niskim kodom jednostavniji je za izgradnju i testiranje, a manji su i troškovi održavanja. Preporučujemo vam da prvo procijenite komponente radnog područja i potom upotrijebite komponente koda samo ako postoji potreba za složenijom i naprednijom prilagodbom.
Dodatne informacije:
Omogućavanje responzivnog izgleda uz kontrolu spremnika
Responzivni izgledi prilagođene stranice definiraju se hijerarhijskom izgradnjom kontrola Vodoravnog spremnika i Okomitog spremnika. Te se kontrole nalaze u dizajneru aplikacija od gotovih gradivnih elemenata pod Raspored na kartici Umetni.
Postavite minimalnu visinu i širinu zaslona na objektu aplikacije da biste spriječili klizače na razini stranice i koristili okomiti pomični klizač.
MinScreenHeight=200
MinScreenWidth=200
Po želji, prilagođena veličina dizajna stranice može se prilagoditi u > prikazu postavki s veličinom postavljenom na Prilagođeno. Zatim postavite širinu i visinu na tipičniju prilagođenu veličinu stranice radne površine kao što su širina 1080 i visina 768. Promjena ove postavke nakon dodavanja kontrola na zaslon može uzrokovati ponovno postavljanje nekih svojstava izgleda.
Postavite najviši spremnik kako biste ispunili cijeli prostor i promijenili veličinu na temelju raspoloživog prostora.
X=0
Y=0
Width=Parent.Width
Height=Parent.Height
Vodoravno omatanje spremnika fleksibilne visine
Da biste podržali podešavanje stranica od radne površine prema dolje do uske širine, omogućite ta svojstva na vodoravnom spremniku s fleksibilnom visinom. Bez tih postavki stranica će isjeckati kontrole kada je stranica uska.
Direction=Horizontal
FlexibleHeight=true
Justify=Stretch
Align=Stretch
VerticalOverflow=Scroll
Wrap=True
Podređeni spremnici ili kontrole izravno ispod ovog spremnika trebaju biti postavljeni tako da imaju minimalnu širinu koja omogućuje da stranica stane unutar širine od 300 px. Razmotrite podstavu na spremniku ili kontroli, kao i roditeljske spremnike.
Vertikalno omatanje spremnika fleksibilne širine
Da biste podržali podešavanje stranica od radne površine prema dolje do uske širine, omogućite ta svojstva na okomitom spremniku fleksibilne širine. Bez tih postavki stranica će isjeckati kontrole kada je stranica uska.
Direction=Vertical
FlexibleWidth=true
Justify=Stretch
Align=Stretch
HorizontalOverflow=Scroll
Wrap=True
Podređeni spremnici ili kontrole izravno ispod ovog spremnika trebaju biti postavljeni tako da imaju minimalnu visinu koja omogućuje da stranica stane unutar širine od 300 px. Razmotrite podstavu na spremniku ili kontroli, kao i roditeljske spremnike.
Više informacija: Izgradnja responzivnog rasporeda.
Okomiti spremnik s fiksnim zaglavljem, fleksibilnim kućištem i fiksnim podnožjem
Pod opcijom Okomiti spremnik postavite Poravnanje (vodoravno) na Rastegni
Umetnite tri kontrole za Vodoravni spremnik unutar nadređenog Okomitog spremnika
Pod prvom i trećom podređenom kontrolom vodoravnog spremnika postavite Visinu rastezanja u isključen položaj i smanjite visinu prema potrebnom prostoru, primjerice Visina=80.
Vodoravni spremnik s dva jednaka podređena spremnika
Za nadređeni spremnik postavite Poravnanje (okomito) na Rastegni.
Umetnite dvije kontrole za Okomiti spremnik s nadređenim Vodoravnim spremnikom.
Uređivanje kontrola prilagođene stranice za usklađivanje s kontrolama aplikacije stvorene prema modelu
Stvaranjem prilagođene stranice putem modernog dizajnera aplikacija te značajke koriste zadane vrijednosti.
Tema za prilagođenu stranicu. Vrijednosti teme za kontrole korištene na prilagođenoj stranici automatski se postavljaju tako da odgovaraju zadanoj plavoj temi objedinjenog sučelja. Zadana se tema upotrebljava u studiju i za vrijeme izvođenja aplikacije. Izričit odabir teme uklanja se iz iskustva stvaranja prilagođene stranice.
Kontrole moraju koristiti drugu veličinu fonta koja se temelji na njihovom položaju u hijerarhiji stranice.
Napomena
Tekst prilagođene stranice ima povećanje od 1,33 pa morate podijeliti ciljanu Veličinu fonta s 1,33 za dobivanje željene veličine.
Vrsta oznake Ciljana veličina fonta Veličina fonta za upotrebu Naslov stranice 17 12.75 Normalne oznake 14 10.52 Male oznake 12 9.02 Primarne i sekundarne kontrole gumba zahtijevaju sljedeće promjene stila:
Primarni gumbi
Color=RGBA(255, 255, 255, 1) Fill=RGBA(41,114,182,1) Height=35 FontWeight=NormalSekundarni gumbi
Color=RGBA(41,114,182,1) Fill=RGBA(255, 255, 255, 1) BorderColor=RGBA(41,114,182,1) Height=35 FontWeight=Normal
Navigacija karticama i pristupačnost tipkovnice za prilagođene stranice
Prilagođene stranice slijede isti dizajn navigacije karticama koji se koristi za hostiranje aplikacije stvorene prema modelu. Vizualno usklađena semantička HTML struktura pomaže korisnicima da se nesmetano kreću po prilagođenim stranicama kada koriste tipkovnicu ili čitač zaslona. Imajte na umu da za razliku od samostalnih aplikacija od gotovih gradivnih elemenata, kontrole prilagođene stranice i drugi elementi UX-a ne trebaju imati točno dodijeljene brojeve kartica. Moderne kontrole nemaju svojstvo TabIndex i upotrebljavaju semantičku HTML strukturu za navigaciju.
Različiti elementi kao što su kontrole, komponente radnog područja i koda, spremnici i slično mogu se označiti karticama na temelju njihovog položaja na prilagođenoj stranici. Navigacija karticama slijedi Z raspored navigacije. Pojedinačni graničnici kartica unutar većih elemenata grupiranja kao što su komponente i spremnici navigiraju se prije premještanja kartice na novi element u stablu objektnog modela dokumenta (DOM).
Donosimo primjer navigacije sa stranicom koja sadrži kontrole, kod i komponente radne površine te spremnike.
Napomena
Preklapajuće kontrole i elementi na prilagođenoj stranici neće spojiti svoj DOM tako da zaustavljanje kartica može biti nesinkronizirana i izvan vizuala. Isto vrijedi i za pozicioniranje dinamičkih elemenata pomoću formula.
Pogledajte također
Pretpregled prilagođene stranice aplikacije stvorenoj prema modelu
Upotreba dodatka Power Fx na prilagođenoj stranici
Izgradnja responzivnog rasporeda
Dodavanje prilagođene stranice aplikaciji stvorenoj prema modelu