Návrh vlastní stránky pro modelem řízenou aplikaci

Článek
09/29/2023

Tento článek obsahuje tipy pro návrh vlastní stránky, kterou použijete v modelem řízené aplikaci.

Důležité

Vlastní stránky jsou novou funkcí s výraznými změnami a momentálně má řadu známých omezení, které jsou uvedeny v části Známé problémy s vlastními stránkami.

Podporované ovládací prvky na vlastní stránce

Vytvoření vlastní stránky aktuálně podporuje podmnožinu ovládacích prvků aplikace plátna. Tabulka níže obsahuje aktuálně podporované ovládací prvky.

Ctrl	Typ ovládacího prvku	Poznámky
Popisek¹	Zobrazit
Textové pole¹	Vstup
Výběr data¹	Vstup
Tlačítko¹	Vstup
Kombinované pole¹	Vstup
Zaškrtávací políčko¹	Vstup
Přepínač¹	Vstup
Skupina přepínačů¹	Vstup
Posuvník¹	Vstup
Hodnocení¹	Vstup
Svislý kontejner	Rozložení	Nový responsivní kontejner s horizontálním rozložením
Vodorovný kontejner	Rozložení	Nový responsivní kontejner s horizontálním rozložením
Editor formátovaného textu	Vstup
Galerie	Seznam
Ikona	Médium
Obrázek	Médium
Úprava formuláře	Vstup
Formulář zobrazení	Vstup
Komponenty kódu	Vlastní	Přidání komponent kódu na vlastní stránku
Komponenty plátna (preview)	Vlastní	Přidání komponent plátna na vlastní stránku

¹ Ovládací prvek je nový moderní ovládací prvek. Tento nový ovládací prvek byl zaveden do aplikací plátna v Teams. Ovládací prvek je založen na knihovnu Fluent UI zabalené pomocí Power Apps Component Framework.

Podpora vlastních součástí pro vlastní stránku

Do svého prostředí můžete přidat vlastní součásti uživatelského prostředí jak s minimem kódu (komponenty plátna), tak s profesionálním kódem (komponenty kódu) a zpřístupnit je všem tvůrcům. Články o rozšiřitelnosti uživatelského prostředí specifického pro vlastní stránku najdete v tématech o přidání komponent plátna na vlastní stránku modelem řízené aplikace a přidání komponent kódu na vlastní stránku modelem řízené aplikace.

Obecně lze říci, že rozšiřitelnost využívající minimum kódu je jednodušší na sestavení, testování a má nižší náklady na údržbu. Doporučujeme nejprve vyhodnotit součásti plátna a poté použít komponenty kódu pouze v případě, že je potřeba složitější a pokročilejší přizpůsobení.

Další informace:

Povolení responzivního rozložení pomocí ovládacího prvku kontejneru

Responzivní vlastní rozložení stránky jsou definována vytvořením hierarchie ovládacích prvků Kontejner s horizontálním rozložení a Kontejner s vertikálním rozložení. Tyto ovládací prvky najdete v návrháři aplikací plátna v sekci Rozložení na kartě Vložení.

Nastavte minimální výšku a šířku obrazovky u objektu App, aby nebyl povolen posuvník na úrovni stránky a namísto něj se používal svislý posuvník těla.

MinScreenHeight=200
MinScreenWidth=200

Volitelně lze upravit velikost vlastního návrhu stránky v části Nastavení > Zobrazení, kde Velikost nastavíte na Vlastní. Poté nastavte Šířku a Výšku na typičtější vlastní velikost stránky pro stolní počítače, například šířku 1080 a výšku 768. Změna tohoto nastavení po přidání ovládacích prvků na obrazovku může způsobit obnovení některých vlastností rozvržení.

Nastavte kontejner na nejvyšší úrovni tak, aby vyplnil celý prostor, a změňte jeho velikost podle dostupného prostoru.

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

Horizontální zalamování kontejneru s flexibilní výškou

Chcete-li podporovat stránky, které se samy zúží z výchozí desktopové šířky, povolte tyto vlastnosti ve vodorovném kontejneru s flexibilní výškou. Bez těchto nastavení stránka ořízne ovládací prvky, když se zúží.

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

Podřízené kontejnery nebo ovládací prvky přímo pod tímto kontejnerem by měly být nastaveny tak, aby měly minimální šířku, která umožňuje, aby se stránka vešla na šířku 300 pixelů. Zvažte použití výplně v kontejneru nebo ovládacím prvku a také v nadřazených kontejnerech.

Vertikální zalamování kontejneru s flexibilní šířkou

Chcete-li podporovat stránky, které se samy zúží z výchozí desktopové šířky, povolte tyto vlastnosti ve svislém kontejneru s flexibilní šířkou. Bez těchto nastavení stránka ořízne ovládací prvky, když se zúží.

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

Podřízené kontejnery nebo ovládací prvky přímo pod tímto kontejnerem by měly být nastaveny tak, aby měly minimální výšku, která umožňuje, aby se stránka vešla na šířku 300 pixelů. Zvažte použití výplně v kontejneru nebo ovládacím prvku a také v nadřazených kontejnerech.

Další informace: Vytváření responzivních rozložení.

Vertikální kontejner s pevným záhlavím, flexibilní tělo, pevné zápatí

V ovládacím prvku Svislý kontejner nastavte Zarovnat (vodorovně) na Roztáhnout
Vložení tří ovládacích prvků Vodorovný kontejner do nadřazeného ovládacího prvku Svislý kontejner
Na prvním a třetím podřízeném ovládacím prvku horizontálního kontejneru vypněte Výška natažení a zmenšete výšku na potřebný prostor, například Výška = 80.

Horizontální kontejner se dvěma zarovnanými podřízenými kontejnery

Pro nadřazený horizontální kontejner nastavte Zarovnat (vodorovně) na Roztáhnout.
Vložte dva ovládací prvky Svislý kontejner do nadřazeného ovládacího prvku Vodorovný kontejner.

Změna stylu ovládacích prvků vlastní stránky, aby byly zarovnány s ovládacími prvky modelem řízené aplikace

Po vytvoření vlastní stránky v moderním návrháři aplikací mají následující funkce tyto výchozí hodnoty.

Motiv pro vlastní stránku. Hodnoty motivu pro ovládací prvky použité na vlastní stránce jsou automaticky nastaveny tak, aby odpovídaly výchozímu modrému motivu Sjednoceného rozhraní. Toto výchozí téma se používá jak ve studiu, tak při běhu aplikace. Explicitní výběr motivu je odebrán z prostředí pro vytváření vlastních stránek.
Ovládací prvky musí používat jinou velikost písma, která vychází z jejich pozice v hierarchii stránek.

Poznámka

Text vlastní stránky má převzorkování na 1,33, takže musíte rozdělit cílovou Velikost písma o 1,33, abyste získali požadovanou velikost.

Typ popisku Cílová velikost písma Velikost písma, která se má použít

Nadpis stránky 17 12.75

Normální popisky 14 10.52

Malé popisky 12 9.02

Typ popisku	Cílová velikost písma	Velikost písma, která se má použít
Nadpis stránky	17	12.75
Normální popisky	14	10.52
Malé popisky	12	9.02

Ovládací prvky primárního a sekundárního tlačítka vyžadují následující změny stylu:

Primární tlačítka

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

Sekundární tlačítka

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

Vlastní stránky se řídí stejným návrhem navigace mezi kartami, jaký používá hostitelská modelem řízená aplikace. Vizuálně zarovnaná sémantická struktura HTML pomáhá uživatelům plynule procházet po vlastních stránkách pomocí klávesnice nebo čtečky obrazovky. Všimněte si, že na rozdíl od samostatných aplikací plátna nepotřebují vlastní ovládací prvky stránky a další prvky uživatelského prostředí explicitní přiřazení čísel karet. Moderní ovládací prvky nemají vlastnost TabIndex a využívají sémantickou strukturu HTML pro navigaci.

Různé prvky, jako jsou ovládací prvky, komponenty plátna a kódu, kontejnery atd., lze přecházet pomocí klávesy tabulátoru podle jejich pozice v rozložení vlastní stránky. Navigace po kartách se řídí navigací v pořadí Z. Jednotlivé zarážky tabulátoru uvnitř větších seskupených prvků, jako jsou komponenty nebo kontejnery, jsou navigovány jako první, než klávesa tabulátoru přesune fokus na další prvek ve stromu modelu objektu dokumentu (DOM).

Zde je příklad navigace na stránce obsahující ovládací prvky, kód a komponenty a kontejnery plátna.

Poznámka

Překrývající se ovládací prvky a prvky na vlastní stránce nebudou mít jejich DOM sloučen, takže zarážky tabulátorů mohou být mimo synchronizaci z vizuálního rozvržení. Totéž platí pro dynamické umístění prvků pomocí vzorců.