Zaprojektuj niestandardową stronę dla swojej aplikacji opartej na modelu

Artykuł
03/15/2023

Ten artykuł zawiera wskazówki dotyczące projektowania niestandardowych stron do użycia w aplikacji sterowanej modelami.

Ważne

Strony niestandardowe są nową funkcją, która uległa znacznym zmianom w produkcie, i obecnie mają szereg znanych ograniczeń opisanych w Znane problemy z niestandardowymi stronami.

Obsługiwane formanty na stronie niestandardowej

Tworzenie stron niestandardowych obsługuje obecnie podzbiór elementów sterujących aplikacji kanwy. W poniższej tabeli przedstawiono listę aktualnie obsługiwanych elementów sterujących.

Kontrola	Typ elementu sterującego	Notatki
Etykieta¹	Wyświetl
Pole tekstowe¹	Dane wejściowe
Selektor daty¹	Dane wejściowe
Przycisk¹	Dane wejściowe
Pole kombi¹	Dane wejściowe
Check box¹	Dane wejściowe
Przełącznik¹	Dane wejściowe
Grupa przycisków radiowych¹	Dane wejściowe
Suwak¹	Dane wejściowe
Ocena¹	Dane wejściowe
Kontener pionowy	Układ	Nowy responsywny kontener układu poziomego
Kontener poziomy	Układ	Nowy responsywny kontener układu poziomego
Edytor tekstu sformatowanego	Dane wejściowe
Galeria	Lista
Ikona	Multimedia
Obraz	Multimedia
Formularz edycji	Dane wejściowe
Formularz wyświetlania	Dane wejściowe
Składniki kodu	Okres niestandardowy	Dodawanie składników kodu do strony niestandardowej
Komponenty kanwy (wersja zapoznawcza)	Okres niestandardowy	Dodawanie składników kanwy do strony niestandardowej

¹ Kontrola to nowa, nowoczesna kontrola. Kontrolka został wprowadzony dla aplikacji kanw w Teams. Kontrolka jest oparty na bibliotece Fluent UI i platformie Power Apps Component Framework.

Obsługa składników niestandardowych dla strony niestandardowej

Możesz dodać do swojego środowiska zarówno niskokodowe (komponenty kanwy), jak i pro-kodowe (komponenty kodowe) niestandardowe komponenty UX i udostępnić je wszystkim twórcom. Artykuły dotyczące rozszerzalności UX dla stron niestandardowych można znaleźć w dodawanie składników kanwy do strony niestandardowej dla aplikacji opartej na modelu oraz dodawanie składników kodu do strony niestandardowej dla aplikacji opartej na modelu

Ogólnie rzecz biorąc, podejście do rozszerzalności o niskim kodzie jest prostsze do zbudowania, przetestowania i ma niższy koszt utrzymania. Zalecamy, aby najpierw ocenić komponenty kanwy, a następnie użyć komponentów kodowych tylko wtedy, gdy istnieje potrzeba bardziej złożonego i zaawansowanego dostosowywania.

Więcej informacji:

Włącz responsywny układ z kontrolą kontenera

Responsywne układy stron definiuje się poprzez zbudowanie hierarchii kontrolek Kontener układu poziomego i Kontener układu pionowego. Kontrolki te znajdują się w projektancie aplikacji kanwy pod Układ w zakładce Wstaw.

Ustaw minimalną wysokość i szerokość ekranu w obiekcie Aplikacja, aby zapobiec paskom przewijania na poziomie strony i użyj paska przewijania treści w pionowym.

MinScreenHeight=200
MinScreenWidth=200

Opcjonalnie można dostosować rozmiar projektu strony niestandardowej w widoku Ustawienia > Wyświetl z Rozmiar ustawiony na Niestandardowe. Następnie ustaw szerokość i wysokość na bardziej typowy pulpit, niestandardowy rozmiar strony, np. szerokość 1080 i wysokość 768. Zmiana tego ustawienia po dodaniu formantów do ekranu może spowodować zresetowanie niektórych właściwości układu.

Ustaw kontener najwyższej części, aby wypełnić całe miejsce i rozmiary na podstawie dostępnego miejsca.

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

Poziome układ konteneru wysokościowego

Aby obsługiwać strony dopasowujące się od pulpitu do wąskiej szerokości, włącz te właściwości w poziomym kontenerze o elastycznej wysokości. Bez tych ustawień strona będzie przycinać formanty, gdy jest zawężenie strony.

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

Podrzędne kontenery lub formanty bezpośrednio pod tym kontenerem powinny mieć minimalną szerokość, która umożliwia dopasowanie strony do szerokości 300 pikseli. Rozważ szerokość kontenerów lub formantów, a także kontenerów nadrzędnych.

Wertykalne części konteneru o elastycznej szerokości

Aby obsługiwać strony dopasowujące się od pulpitu w dół do wąskiej szerokości, włącz te właściwości w pionowym kontenerze o elastycznej szerokości. Bez tych ustawień strona będzie przycinać formanty, gdy jest zawężenie strony.

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

Kontenery podrzędne lub kontrolki znajdujące się bezpośrednio pod tym kontenerem powinny mieć minimalną wysokość, która pozwala na dopasowanie strony do szerokości 300 pikseli. Rozważ szerokość kontenerów lub formantów, a także kontenerów nadrzędnych.

Dowiedz się więcej: Tworzenie układów dynamicznych.

Kontener pionowy ze stałym nagłówkiem, elastyczna treść, stała stopka

W Kontenerze pionowym ustaw Wyrównaj (poziomo) na Rozciągnij
Wstaw trzy elementy sterujące Kontenera poziomego do elementu nadrzędnego Kontener pionowy
W pierwszym i trzecim podrzędnym poziomie kontrolek kontenera ustaw Wysokość rozciągania jako wyłączona i zmniejsz wysokość do potrzebnego miejsca, np. Wysokość=80.

Kontener poziomy z dwoma parzystymi kontenerami podrzędnymi

W nadrzędnym Kontenerze pionowym ustaw Wyrównaj (pionowo) na Rozciągnij.
Wstaw trzy elementy sterujące Kontenera ionowego do elementu nadrzędnego Kontener pionowy.

Stylizowanie niestandardowych kontrolek strony w celu dostosowania ich do kontrolek aplikacji opartych na modelu

Tworząc niestandardową stronę z nowoczesnego projektanta aplikacji, funkcje te używają wartości domyślnych.

Motyw dla strony niestandardowej. Wartości motywu dla elementów sterujących używanych na stronie niestandardowej są automatycznie ustawiane tak, aby pasowały do domyślnego niebieskiego motywu interfejsu zunifikowanego. Ten domyślny motyw jest używany zarówno w studio, jak i podczas uruchamiania aplikacji. Wyraźny wybór motywu został usunięty z doświadczenia tworzenia stron niestandardowych.
Kontrolki muszą używać innego rozmiaru czcionki, który jest oparty na ich pozycji w hierarchii strony.

Uwaga

Tekst strony niestandardowej ma skalowanie 1,33, więc musisz podzielić docelowy FontSize przez 1,33, aby uzyskać pożądany rozmiar.

Typ etykiety Docelowy rozmiar czcionki Rozmiar czcionki do użycia

Tytuł strony 17 12.75

Normalne etykiety 14 10.52

Małe etykiety 12 9.02

Typ etykiety	Docelowy rozmiar czcionki	Rozmiar czcionki do użycia
Tytuł strony	17	12.75
Normalne etykiety	14	10.52
Małe etykiety	12	9.02

Elementy sterujące przycisku głównego i dodatkowego wymagają następujących zmian w stylizacji:

Przyciski podstawowe

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

Przyciski dodatkowe

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

Strony niestandardowe wykorzystują ten sam projekt nawigacji zakładek, który jest używany przez aplikację opartą na modelu hostingu. Wizualnie wyrównana semantyczna struktura HTML pomaga użytkownikom płynnie poruszać się po niestandardowych stronach przy użyciu klawiatury lub czytnika ekranu. Zauważ, że w przeciwieństwie do samodzielnych aplikacji kanwy, niestandardowe kontrolki stron i inne elementy UX nie wymagają wyraźnego przypisania numerów tabulatorów. Nowoczesne kontrolki nie posiadają właściwości TabIndex i wykorzystują semantyczną strukturę HTML do nawigacji.

Różne elementy, takie jak kontrolki, składniki kanwy i kodu, kontenery i tak dalej mogą być podzielone na zakładki w zależności od ich pozycji w niestandardowym układzie strony. Nawigacja w zakładkach następuje po nawigacji w kolejności Z. Pojedyncze tabulatory wewnątrz większych elementów grupujących takich jak komponenty, kontenery są nawigowane w pierwszej kolejności, zanim tabulator przejdzie do następnego elementu w drzewie modelu obiektu dokumentu (DOM).

Oto przykład nawigacji na stronie zawierającej kontrolki, kod oraz elementy i kontenery kanwy.

Uwaga

Nakładające się kontrolki i elementy na stronie niestandardowej nie będą miały połączonych DOM, więc tabulatory mogą nie być zsynchronizowane z układem wizualnym. Podobnie jest w przypadku dynamicznego pozycjonowania elementów za pomocą formuł.