Zaprojektuj niestandardową stronę dla swojej aplikacji opartej na modelu

Ten artykuł zawiera wskazówki dotyczące projektowania niestandardowych stron do użycia w aplikacji sterowanej modelami. Strona niestandardowa umożliwia utworzenie strony podobnej do aplikacji opartej na kanwie w aplikacji opartej na modelu.

Obsługiwane kontrolki na stronie niestandardowej

Tworzenie stron niestandardowych obsługuje podzbiór kontrolek aplikacji kanwy. W poniższej tabeli wymieniono aktualnie obsługiwane kontrolki.

¹ Kontrola to nowa, nowoczesna kontrola. Kontrolka została wprowadzona dla aplikacji kanwy w usłudze Teams. Kontrolka jest oparta na bibliotece Fluent UI, opakowanej w Power Apps Component Framework.

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

Możesz dodać do swojego środowiska niestandardowe komponenty UX zarówno typu low-code (składniki kanwy), jak i pro-code (składniki kodowe), a następnie udostępnić je wszystkim twórcom. Aby zapoznać się z artykułami dotyczącymi rozszerzania środowiska użytkownika dla stron niestandardowych, zobacz dodawanie komponentów kanwy do strony niestandardowej dla aplikacji opartej na modelu oraz dodawanie komponentów kodu do strony niestandardowej dla aplikacji opartej na modelu.

Ogólnie rzecz biorąc, podejście do rozszerzalności niskokodowej jest prostsze w tworzeniu i testowaniu oraz wiąże się z niższymi kosztami 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:

• Galeria komponentów Canvas
• Składniki kodu (próbka)
• Zasoby społeczności dotyczące komponentów kodu

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. Te kontrolki znajdują się w Power Apps Studio na karcie Wstaw w obszarze Układ.

Ustaw minimalną wysokość i szerokość ekranu dla obiektu App, aby zapobiec paskom przewijania całej strony i użyć pionowego paska przewijania dla elementu body.

MinScreenHeight=200
MinScreenWidth=200

Opcjonalnie można dostosować niestandardowy rozmiar projektu strony w Ustawienia>Wyświetl, po ustawieniu opcji Rozmiar na Niestandardowe. Następnie ustaw Szerokość i Wysokość na bardziej typowy niestandardowy rozmiar strony dla komputera stacjonarnego, na przykład szerokość 1080 i wysokość 768. Zmiana tego ustawienia po dodaniu kontrolek na ekranie może spowodować, że niektóre właściwości układu zostaną zresetowane.

Ustaw najwyższy kontener tak, aby wypełniał całą dostępną przestrzeń i zmieniał rozmiar w zależności od dostępnej przestrzeni.

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

Poziome zawijanie kontenera o elastycznej wysokości

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 przycina kontrolkę, gdy jest wąska.

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

Kontenery podrzędne lub formanty bezpośrednio pod tym kontenerem powinny mieć minimalną szerokość, która pozwala stronie zmieścić się w szerokości 300 pikseli. Rozważ szerokość kontenerów lub formantów, a także kontenerów nadrzędnych.

Zawijanie w pionie kontenera 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 przycina kontrolkę, gdy jest wąska.

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

1. Dla Kontenera pionowego ustaw Wyrównaj (poziomo) na Rozciągnij

2. Wstaw trzy kontrolki Kontener poziomy wewnątrz nadrzędnego elementu Kontener pionowy.

3. W pierwszej i trzeciej podrzędnej poziomej kontrolce kontenera wyłącz opcję Rozciągnij wysokość i zmniejsz wysokość do wymaganej wartości, na przykład Height=80.

Kontener poziomy z dwoma równymi kontenerami podrzędnymi

1. W nadrzędnym Kontenerze pionowym ustaw Wyrównaj (pionowo) na Rozciągnij.

2. Wstaw dwie kontrolki Kontener pionowy w nadrzędnym elemencie Kontener poziomy.

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

Podczas tworzenia strony niestandardowej w nowoczesnym projektancie aplikacji te funkcje korzystają z 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. Jawne wybieranie motywu zostało usunięte ze środowiska tworzenia stron niestandardowych.

• Kontrolki muszą używać innego rozmiaru czcionki, który jest oparty na ich pozycji w hierarchii strony.

  Notatka

  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

• 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
  

Nawigacja po kartach i dostępność klawiatury dla stron niestandardowych

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 za pomocą klawisza Tab jest zgodna z 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ładowa nawigacja ze stroną zawierającą kontrolki, kod oraz komponenty i kontenery canvas.

Zobacz także

Przegląd własnych stron aplikacji opartych na modelu (wersja zapoznawcza)

Używanie PowerFx na stronie niestandardowej

Tworzenie responsywnego układu

Dodawanie strony niestandardowej do aplikacji opartej na modelu

Uaktualnianie kontrolek Fluent UI do nowoczesnych kontrolek