App-Designrichtlinien

Moderne Steuerelemente

Moderne Steuerelemente in Canvas-Apps stellen einen erheblichen Fortschritt bei der Entwicklung und Gestaltung von Benutzeroberflächen innerhalb des Microsoft-Ökosystems dar. Diese Steuerelemente basieren auf dem Fluent Design System von Microsoft und sind darauf ausgelegt, ein schnelles, leistungsorientiertes und leicht zugängliches Benutzererlebnis zu bieten und gleichzeitig eine nahtlose Integration mit den Designfunktionen sicherzustellen. Die Einführung dieser Steuerelemente, einschließlich Registerkartenlisten, Statusleisten, Infoschaltflächen, Drehfeld und mehr, unterstreicht eine strategische Umstellung auf die Erstellung intuitiver, reaktionsfähiger und visuell ansprechender Anwendungen. Durch die Verwendung dieser modernen Steuerelemente können Entwickler auf einfache Weise anspruchsvolle UI-Elemente implementieren, die sowohl ästhetisch ansprechend als auch funktionell ansprechend sind und die Benutzerbindung insgesamt verbessern.

Das inhärente Design dieser Steuerelemente unter Berücksichtigung von Themen ermöglicht ein einheitliches und konsistentes Look and Feel über Anwendungen hinweg, wodurch der Aufwand bei der Anpassung und dem Branding von Apps erheblich reduziert wird. Die Möglichkeit, die Stile aller Steuerelemente basierend auf dem festgelegten Design automatisch zu aktualisieren, vereinfacht den Entwurfsprozess und stellt sicher, dass Anwendungen visuell einheitlich bleiben. Dies entspricht perfekt den Anforderungen moderner Unternehmen, die markenkonsensiert bleiben möchten, und bietet hochwertige digitale Erfahrungen. Die modernen Steuerelemente betonen auch die Barrierefreiheit und Leistung, um sicherzustellen, dass Anwendungen von einer breiten Palette von Zielgruppen verwendet werden können, einschließlich derjenigen mit Behinderungen, die sich an inklusiven Designprinzipien orientieren. Daher sind die modernen Steuerelemente in Canvas-Apps nicht nur eine Reihe von UI-Komponenten, sondern ein transformatives Toolset, mit dem Entwickler effizientere, wartungsfähige, barrierefreie und zusammenhängende Anwendungen erstellen können, die den sich entwickelnden Anforderungen von Unternehmen und Benutzern gleichermaßen entsprechen.

Formularentwurf und -richtlinien

Organisieren Ihres Formulars

• Unterteilen Sie Das Formular in logische Abschnitte und gruppieren Sie verwandte Felder zusammen.
• Ziel ist es, Ihr Formular auf einem einzigen Bildschirm zu halten. Wenn das Formular lang ist, können Sie es auf mehrere Bildschirme, Schritte oder Registerkarten aufteilen.
• Verwenden Sie klare und einfache Sprache für Feldbeschriftungen, und vermeiden Sie nicht vertraute Begriffe oder Jargon.
• Implementieren Sie Validierungsregeln, um die Datengenauigkeit sicherzustellen. Geben Sie für Pflichtfelder eindeutig an, dass sie erforderlich sind. Überprüfen Sie E-Mail-Adressen, Telefonnummern und andere Formate nach Bedarf.

Wiederverwenden von Formularen

• Verwenden Sie ein einzelnes Formular zum Erstellen neuer Datensätze, zum Bearbeiten vorhandener Datensätze und zum Anzeigen von Datensätzen im schreibgeschützten Modus.
• Durch die Wiederverwendung desselben Formulars wird die Entwicklungs- und Wartungszeit reduziert und gleichzeitig Konsistenz gewährleistet.

Formularmodi

Legen Sie den Formularmodus dynamisch basierend auf Benutzeraktionen fest. Beispiel:

• Legen Sie beim Erstellen eines neuen Datensatzes das Formular auf den Modus "Neu" fest.
• Legen Sie beim Bearbeiten eines vorhandenen Datensatzes das Formular auf den Modus "Bearbeiten" fest.
• Legen Sie beim Anzeigen eines Datensatzes das Formular auf den Modus "Ansicht" fest.

Kontrollplatzierung

• Platzieren Sie verschiedene Steuerelemente (z. B. Katalog, Anzeigeformular und Bearbeitungsformular) auf separaten Bildschirmen, um sie zu unterscheiden.
• Kombinieren Sie diese Steuerelemente mit Formeln, um eine einheitliche Benutzeroberfläche zu erstellen.

Behälter

Da die Canvas-App größer wird, um mehr Geschäftsszenarien zu bewältigen, nimmt die Anzahl der Steuerelemente weiter zu, und es ist erforderlich, die Steuerelemente basierend auf ihrer Funktion zu organisieren. Eine einfache Möglichkeit besteht darin, die Steuerelemente zusammen auszuwählen und in einer Gruppe zu gruppieren. Das Gruppieren von Steuerelementen wird jedoch nicht immer empfohlen. Das Canvas-App-Steuerelement Container kann eine Reihe von Steuerelementen enthalten und verfügt über eigene Eigenschaften.

Container funktionieren als leere Räume, in denen Sie Steuerelemente in Relation zur oberen linken Ecke des Containers einfügen und organisieren können. Sie haben die Flexibilität, Container zu verschachteln, was die Erstellung komplexerer Layouts und die Bereitstellung von Designfreiheit ermöglicht.

Container sind tatsächliche Steuerelemente mit ihren eigenen Eigenschaften wie Width und BorderColor. Container wirken sich auf das App-Layout aus und helfen Screen-Leser-Benutzern, die Struktur der App zu verstehen.

Sie können zwar beliebige Steuerelemente in einer Gruppe hinzufügen, sie sollten jedoch nur logisch verwandte Steuerelemente in einem Container hinzufügen.

Durch das Organisieren von Elementen in Power Apps mithilfe von Gruppen können Benutzer gemeinsame Eigenschaften auf mehrere Elemente anwenden. Bei Änderungen einzelner Eigenschaften innerhalb einer Gruppe können allerdings manuelle Anpassungen erforderlich sein. Darüber hinaus haben Gruppen aus Gründen der Barrierefreiheit kein Vorhandensein in der logischen Struktur einer App, da Screenreader sie nicht erkennen können. Darüber hinaus ist es aufgrund der fehlenden Möglichkeit, Gruppen zu verschachteln, schwierig, komplexere Layouts zu erstellen.

Galeriedesign und Richtlinien

Vermeiden Sie das Ändern von Galerieelementen innerhalb der Galerie.

Vermeiden Sie das Ändern der Items Eigenschaft einer Galerie innerhalb von Ereignissen untergeordneter Steuerelemente wie OnChange oder OnSelect. Dies kann zu unerwartetem Verhalten führen, insbesondere beim Umgang mit bestimmten Steuerelementen, die Ereignisse auslösen, wenn sich ihre Werte ändern.

Seien Sie vorsichtig mit durch OnChange ausgelösten Steuerelementen

Seien Sie vorsichtig, wenn Sie Steuerelemente wie Kombinationsfeld, Datumsauswahl, Schieberegler oder Umschaltfläche in Galerien verwenden. Diese Steuerelemente können das OnChange Ereignis unerwartet auslösen, was zu potenziellen Problemen wie Endlosschleifen führt.

Auswirkungen auf die Leistung beim Patchen

Achten Sie auf die Leistungseinbußen beim Patchen oder Aktualisieren von Elementen in einem Katalog, insbesondere beim Umgang mit einer großen Anzahl von Elementen. Patching kann langsam sein, und die Galerie lädt möglicherweise alle Elemente neu, was die Leistung beeinträchtigen kann.

Behandeln von Endlosschleifen mit Sorgfalt**

Wenn die Änderung von Katalogdaten Ereignisse auslöst, die zu Endlosschleifen führen, sollten Sie moderne Steuerelemente oder Steuerelemente, die OnChange bei einer Änderung ihrer Daten nicht auslösen, in Erwägung ziehen, um die Schleife zu beenden.

Vermeiden Sie geschachtelte Galerien

Geschachtelte Galerien können zu Leistungsproblemen und komplexen Datenbindungen führen.

Vermeiden Sie wenn möglich das Verschachteln von Galerien. Versuchen Sie stattdessen, Ihre Datenstruktur zu entwerfen und Funktionen auf optimierte Weise zu verwenden.

Verwenden Sie flexible Höhen in Galerien

Kataloge mit fester Höhe können zu eingeschränkter Sichtbarkeit von Inhalten führen, insbesondere beim Umgang mit dynamischen Daten.

Verwenden Sie flexible Höhegalerien, indem Sie die Height-Eigenschaft auf Parent.Height oder einen dynamischen Wert basierend auf Ihren Daten festlegen. Dadurch wird sichergestellt, dass der Katalog seine Höhe an unterschiedliche Datenmengen anpasst.

Optimieren des Ladens von Daten

Beim Optimieren des Ladens von Daten in Power Apps möchten Sie möglicherweise nur die erforderlichen Spalten in einem Katalog abrufen und anzeigen, anstatt das gesamte Dataset abzurufen.

Hier ist ein Beispiel dafür, wie Sie dies erreichen können: Angenommen, Sie haben eine Sammlung EmployeeData mit mehreren Spalten, und Sie möchten nur die Spalten "Name" und "Abteilung" in einem Katalog anzeigen.

// Collection named ProductSales with sample sales data

ClearCollect(ProductSales, 
    Table(
        { ProductName: "Phone", UnitPrice: 499.99, QuantitySold: 100 },
        { ProductName: "Laptop", UnitPrice: 999.99, QuantitySold: 50 },
        { ProductName: "Tablet", UnitPrice: 299.99, QuantitySold: 75 }
    )
)

// Bind the gallery to display only the "ProductName" and "QuantitySold" columns

Gallery1.Items = ShowColumns(ProductSales, ProductName, QuantitySold)

Weitere Informationen zu bewährten Methoden der Galerie.

Erstellen wiederverwendbarer Komponenten

Wann benutzerdefinierte Codekomponenten mithilfe des Power Apps-Komponenten-Frameworks (PCF) erstellt werden sollten

Power Platform ermöglicht die Erstellung wiederverwendbarer Komponenten über power Apps Component Framework (PCF). Ausführlichere Informationen finden Sie hier.

Hier sind Szenarien, in denen Sie die Erstellung von PCF-Komponenten in Power Apps in Betracht ziehen können:

Komplexe UI-Elemente

Wenn Sie komplexe Benutzeroberflächenelemente oder Steuerelemente erstellen müssen, die in den Standardmäßigen Power Apps-Steuerelementen nicht leicht verfügbar sind.

Benutzerdefinierte Steuerelemente für bestimmte Anforderungen

Wenn Ihre App bestimmte Anforderungen hat, die von den vordefinierten Steuerelementen nicht erfüllt werden, und Sie müssen benutzerdefinierte Steuerelemente erstellen, die auf Ihre Anforderungen zugeschnitten sind.

Einheitliche Benutzererfahrung in allen Apps

Wenn Sie eine konsistente Benutzererfahrung über mehrere Power Apps oder Umgebungen hinweg beibehalten möchten, indem Sie bestimmte Funktionen innerhalb einer PCF-Komponente kapseln.

Wiederverwenden über Apps hinweg

Wenn Sie davon ausgehen, dass sie ein bestimmtes Funktions- oder Benutzeroberflächenelement in mehreren Apps wiederverwenden müssen, können Sie beim Erstellen einer PCF-Komponente einmal erstellen und wiederverwenden.

Implementieren erweiterter Logik

Wenn Sie erweiterte Geschäftslogik oder Berechnungen implementieren müssen, die über die Funktionen von Standardformeln oder Funktionen in Power Apps hinausgehen.

Verbesserte Benutzererfahrung

Wenn Sie das allgemeine Benutzererlebnis verbessern möchten, indem Sie visuell ansprechende und interaktive Komponenten erstellen, die mit den Standardsteuerelementen nicht erreichbar sind.

Nächster Schritt