Eine benutzerdefinierte Seite für ihre modellgesteuerten App entwerfen

Dieser Artikel enthält Tipps zum Entwerfen einer benutzerdefinierten Seite zur Verwendung in einer modellgesteuerten App. Mit einer benutzerdefinierten Seite können Sie eine Seite erstellen, die einer Canvas-App in Ihrer modellgesteuerten App ähnelt.

Unterstützte Steuerelemente auf einer benutzerdefinierten Seite

Benutzerdefinierte Seitenerstellung unterstützt eine Teilmenge von Canvas-App-Steuerelementen. In der folgenden Tabelle sind die derzeit unterstützten Steuerelemente aufgeführt.

¹ Control ist ein neues modernes Steuerelement. Das Steuerelement wurde eingeführt für Canvas-Apps in Teams. Die Steuerung basiert auf Fließende UI-Bibliothek eingewickelt mit Power Apps Component Framework.

Unterstützung benutzerdefinierter Komponenten für benutzerdefinierte Seiten

Sie können Ihrer Umgebung sowohl Low-Code- (Canvas-Komponenten) als auch Pro-Code- (Code-Komponenten) benutzerdefinierte UX-Komponenten hinzufügen und sie für alle Hersteller verfügbar machen. Artikel zu benutzerdefinierten seitenspezifischen UX-Erweiterbarkeit finden Sie unter Hinzufügen von Canvas-Komponenten zu einer benutzerdefinierten Seite für Ihre modellgesteuerte App und Hinzufügen von Codekomponenten zu einer benutzerdefinierten Seite für Ihre modellgesteuerte App.

Im Allgemeinen ist der Ansatz der Low-Code-Erweiterbarkeit einfacher zu erstellen, zu testen und hat geringere Wartungskosten. Wir empfehlen, zuerst Canvas-Komponenten zu bewerten und dann Codekomponenten nur zu verwenden, wenn eine komplexere und erweiterte Anpassung erforderlich ist.

Weitere Informationen:

• Canvas-Komponentenkatalog
• Beispiele für Codekomponenten
• Community-Ressourcen für Codekomponenten

Aktivieren Sie dynamisches Layout mit Container-Steuerung

Dynamische benutzerdefinierte Seitenlayouts werden durch den Aufbau einer Hierarchie von Container mit horizontalem Layout und Vertikaler Layout-Container kontrolliert. Diese Steuerelemente finden Sie in Power Apps Studio unter Layout auf der Registerkarte Einfügen.

Legen Sie die minimale Bildschirmhöhe und -breite für das Objekt App fest, um Bildlaufleisten auf Seitenebene zu verhindern und eine vertikale Bildlaufleiste zu verwenden.

MinScreenHeight=200
MinScreenWidth=200

Optional kann die Größe des angepassten Seitendesigns in Einstellungen>Anzeige angepasst werden, wobei Größe auf Benutzerdefiniert festgelegt ist. Legen Sie dann die Breite und Höhe auf eine für den Desktop typischere angepasste Seitengröße fest, z.B. Breite 1080 und Höhe 768. Wenn Sie diese Einstellung festlegen, nachdem Steuerelemente zum Bildschirm hinzugefügt wurden, werden möglicherweise einige Layout-Eigenschaften zurückgesetzt.

Legen Sie den obersten Container so fest, dass er den gesamten Platz ausfüllt und die Größe je nach verfügbarem Platz angepasst wird.

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

Horizontaler Zeilenumbruch bei einem Container mit flexibler Höhe

Um Seiten zu unterstützen, die sich vom Desktop auf eine schmale Breite einstellen lassen, aktivieren Sie diese Eigenschaften für einen horizontalen Container mit flexibler Höhe. Ohne diese Einstellungen schneidet die Seite das Steuerelement ab, wenn die Seite schmal ist.

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

Untergeordnete Container oder Steuerelemente direkt in diesem Container sollten auf eine Mindestbreite eingestellt werden, die es ermöglicht, dass die Seite in eine Breite von 300 Pixeln passt. Berücksichtigen Sie die Füllung des Containers oder Steuerelements sowie der übergeordneten Container.

Vertikales Umbrechen eines Containers mit flexibler Breite

Um Seiten zu unterstützen, die sich vom Desktop auf eine schmale Breite einstellen lassen, aktivieren Sie diese Eigenschaften für einen vertikalen Container mit flexibler Breite. Ohne diese Einstellungen schneidet die Seite das Steuerelement ab, wenn die Seite schmal ist.

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

Untergeordnete Container oder Steuerelemente, die sich direkt unter diesem Container befinden, sollten so eingestellt werden, dass sie eine Mindesthöhe haben, die es ermöglicht, dass die Seite innerhalb einer Breite von 300 Pixeln dargestellt werden kann. Berücksichtigen Sie die Füllung des Containers oder Steuerelements sowie der übergeordneten Container.

Mehr Informationen: Dynamische Layouts erstellen.

Vertikaler Container mit fester Kopfzeile, flexiblem Hauptbereich, fester Fußzeile

1. Auf dem Vertikalen Container setzen Sie Ausrichten (horizontal) auf Dehnen

2. Drei horizontale Container-Steuerelemente innerhalb des übergeordneten vertikalen Containers erstellen

3. Schalten Sie im ersten und dritten untergeordneten horizontalen Container-Steuerelement die Dehnungshöhe aus und reduzieren Sie die Höhe auf den benötigten Platz, wie Höhe=80.

Horizontaler Container mit zwei gleich großen Kind-Containern

1. Stellen Sie im übergeordneten horizontalen Container Ausrichten (vertikal) auf Dehnen ein.

2. Fügen Sie zwei vertikale Container-Steuerelemente in den übergeordneten horizontalen Container ein.

Formatieren von benutzerdefinierten Seitensteuerelementen in Anlehnung an Steuerelemente modellgesteuerter Apps

Wenn Sie die benutzerdefinierte Seite im modernen App-Designer erstellen, verwenden diese Funktionen die Standardwerte.

• Thema für die benutzerdefinierte Seite. Designwerte für die auf einer benutzerdefinierten Seite verwendeten Steuerelemente werden automatisch so festgelegt, dass sie dem blauen Standarddesign von Einheitliche Oberfläche entsprechen. Dieses Standardthema wird sowohl im Studio als auch zur Laufzeit der Anwendung verwendet. Die explizite Auswahl eines Designs entfällt in der Bearbeitungsumgebung für benutzerdefinierte Seiten.

• Steuerelemente müssen eine andere Schriftgröße verwenden, die auf ihrer Position in der Seitenhierarchie basiert.

  Anmerkung

  Benutzerdefinierter Seitentext hat eine Hochskalierung von 1,33, daher müssen Sie das Ziel Schriftgröße um 1,33 teilen, um die gewünschte Größe zu erhalten.

  Beschriftungstyp	Zielschriftgröße	Zu verwendende Schriftgröße
  Seitentitel	17	12.75
  Normale Beschriftungen	14	10,52
  Kleine Beschriftungen	12	9.02

• Für Primär- und Sekundärschaltflächen sind die folgenden Änderungen an der Formatierung erforderlich:

  Primäre Schaltflächen

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

  Sekundäre Schaltflächen

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

Registerkarten-Navigation und Tastaturzugänglichkeit für benutzerdefinierte Seiten

Benutzerdefinierte Seiten folgen demselben Registerkarten-Navigationsdesign, das von der modellgesteuerten Hosting-App verwendet wird. Die visuell ausgerichtete semantische HTML-Struktur hilft Benutzern, nahtlos durch die benutzerdefinierten Seiten zu navigieren, wenn sie eine Tastatur oder einen Bildschirmleser verwenden. Beachten Sie, dass benutzerdefinierte Seitensteuerelemente und andere UX-Elemente im Gegensatz zu eigenständigen Canvas-Apps keine expliziten Zuweisungen von Registerkarten benötigen. Moderne Steuerelemente haben keine TabIndex-Eigenschaft und nutzen die semantische HTML-Struktur zur Navigation.

Verschiedene Elemente wie Steuerelemente, Zeichenbereichs- und Codekomponenten, Container usw. können basierend auf ihrer Position im benutzerdefinierten Seitenlayout mit Registerkarten versehen werden. Die Registerkartennavigation folgt der Z-Reihenfolge-Navigation. Einzelne Tabstopps innerhalb größerer Gruppierungselemente wie Komponenten, Container werden zuerst navigiert, bevor die Registerkarte zum nächsten Element im Document Object Model (DOM)-Baum verschoben wird.

Hier ist eine beispielhafte Navigation mit einer Seite, die Steuerelemente, Code- und Canvas-Komponenten sowie Container enthält.

Siehe auch

Übersicht über die benutzerdefinierte Seite der modellgesteuerten App

Power Fx auf einer benutzerdefinierten Seite verwenden

Dynamische Layouts erstellen

Eine benutzerdefinierte Seite zu ihrer modellgesteuerten App hinzufügen

Aktualisieren von Fluent UI-Steuerelementen auf moderne Steuerelemente