Best Practices und Anleitungen für Codekomponenten, die mit dem Power Apps Component Framework erstellt wurden

Verwenden Sie diese bewährten Methoden für Power Apps Komponentenframework, um Codekomponenten mit besserer Benutzerfreundlichkeit, Unterstützung und Leistung zu entwickeln, bereitzustellen und zu verwalten. Die Anleitung umfasst die folgenden Bereiche:

• Power Apps Component Framework
• Microsoft PowerApps
• TypeScript und JavaScript
• Entwicklung der HTML-Browser-Benutzeroberfläche
• Azure DevOps/GitHub

In diesem Artikel werden bewährte Methoden und Anleitungen für Fachleute bei der Entwicklung von Codekomponenten beschrieben. Dieser Artikel zielt darauf ab, die jeweiligen Vorteile zu beschreiben, damit Ihre Codekomponenten die Benutzerfreundlichkeit, Unterstützbarkeit und Leistungsverbesserungen dieser Tools und Tipps nutzen können.

Power Apps Component Framework

Dieser Abschnitt enthält Best Practices und Anleitungen zum Power Apps Component Framework.

Vermeiden Sie, Development-Builds in Dataverse bereitzustellen.

Erstellen Sie Codekomponenten im Produktions- oder Entwicklungsmodus. Vermeiden Sie die Bereitstellung von Entwicklungsbuilds in Dataverse, da sie sich negativ auf die Leistung auswirken und aufgrund ihrer Größe sogar an der Bereitstellung gehindert werden können. Selbst wenn Sie planen, einen Release-Build später bereitzustellen, kann es leicht passieren, dass Sie die erneute Bereitstellung vergessen, wenn Sie keine automatisierte Release-Pipeline haben. Weitere Informationen finden Sie unter Debuggen benutzerdefinierter Steuerelemente.

Verwenden Sie keine nicht unterstützten Framework-Methoden

Verwenden Sie keine nicht dokumentierten internen Methoden, die in der ComponentFramework.ContextDatei vorhanden sind. Diese Methoden funktionieren möglicherweise, aber da sie nicht unterstützt werden, funktionieren sie möglicherweise in zukünftigen Versionen nicht mehr. Die Verwendung eines Steuerungsskripts, das auf das HTML Document Object Model (DOM) der Hostanwendung zugreift, wird nicht unterstützt. Alle Teile des Hostanwendungs-DOMs, die sich außerhalb der Grenzen der Codekomponenten befinden, können ohne vorherige Ankündigung geändert werden.

Verwenden Sie die init-Methode zum Anfordern netzwerkerforderlicher Ressourcen

Wenn der Hostingkontext eine Codekomponente lädt, ruft er zuerst die Init-Methode auf. Verwenden Sie diese Methode, um Netzwerkressourcen wie Metadaten anzufordern, anstatt auf die updateView-Methode zu warten. Wenn die updateView-Methode aufgerufen wird, bevor die Anforderungen zurückgegeben werden, muss Ihre Codekomponente diesen Zustand verarbeiten und einen visuellen Ladeindikator bereitstellen.

Bereinigen Sie die Ressourcen innerhalb der destroy-Methode

Der Hosting-Kontext ruft die destroy-Methode auf, wenn eine Codekomponente aus dem Browser-DOM entfernt wird. Verwenden Sie die destroy Methode, um alle WebSockets Ereignishandler zu schließen und zu entfernen, die Sie außerhalb des Containerelements hinzufügen. Wenn Sie React verwenden, nutzen Sie ReactDOM.unmountComponentAtNode innerhalb der destroy-Methode. Das Bereinigen von Ressourcen auf diese Weise verhindert Leistungsprobleme, die durch das Laden und Entladen von Codekomponenten innerhalb einer bestimmten Browsersitzung verursacht werden.

Vermeiden Sie unnötige Aufrufe zum Aktualisieren einer DataSet-Eigenschaft

Wenn Ihre Codekomponente vom Typ „DataSet“ ist, machen die gebundenen DataSet-Eigenschaften eine refresh-Methode verfügbar, die bewirkt, dass der Hostingkontext die Daten neu lädt. Das Aufrufen dieser Methode wirkt sich unnötigerweise auf die Leistung Ihrer Codekomponente aus.

Minimieren Sie die Aufrufe von notifyOutputChanged

Unter bestimmten Umständen ist es unerwünscht, dass Aktualisierungen eines UI-Steuerelements (z. B. Tastendrücke oder Mausbewegungsereignisse) jeweils notifyOutputChanged aufrufen, da mehr Aufrufe von notifyOutputChanged dazu führen, dass viel mehr Ereignisse an den übergeordneten Kontext weitergegeben werden als nötig. Verwenden Sie stattdessen ein Ereignis, wenn ein Steuerelement den Fokus verliert oder wenn die Berührungs- oder Mausaktion des Benutzers abgeschlossen ist.

API-Verfügbarkeit prüfen

Überprüfen Sie bei der Entwicklung von Codekomponenten für verschiedene Hosts (modellgesteuerte Apps, Canvas-Apps, Portale) immer die Verfügbarkeit der APIs, die Sie für den Support auf diesen Plattformen verwenden. Beispielsweise ist context.webAPI in Canvas-Apps nicht verfügbar. Informationen zur Verfügbarkeit einzelner APIs finden Sie unter API-Referenz zum Power Apps Component Framework.

Temporäre Null-Eigenschaftswerte verwalten, die an updateView übergeben werden

Es werden Nullwerte an die updateView-Methode übergeben, wenn die Daten nicht bereit sind. Ihre Komponenten sollten diese Situation berücksichtigen und damit rechnen, dass die Daten null sein könnten und dass ein nachfolgender updateView-Zyklus aktualisierte Werte enthalten kann. updateView ist sowohl für Standard- als auch für React-Komponenten verfügbar.

Modellbasierte Apps

Dieser Abschnitt enthält Best Practices und Anleitungen zu Codekomponenten in modellgesteuerten Apps.

Interagieren Sie nicht direkt mit formContext

Wenn Sie Erfahrung in der Arbeit mit Client-APIs haben, sind Sie es möglicherweise gewöhnt, mit formContext zu interagieren, um auf Attribute, Steuerelemente und Aufruf-API-Methoden wie save, refresh und setNotification zuzugreifen. Codekomponenten werden voraussichtlich für verschiedene Produkte wie modellgesteuerte Apps, Canvas-Apps und Dashboards verwendet, sodass sie keine Abhängigkeit formContextdavon haben können.

Eine Problemumgehung besteht darin, die Codekomponente an eine Spalte zu binden und einen Ereignishandler OnChange zu dieser Spalte hinzuzufügen. Die Codekomponente kann den Spaltenwert aktualisieren und der Ereignishandler OnChange kann auf den formContext zugreifen. In Zukunft wird eine Unterstützung für benutzerdefinierte Ereignisse hinzugefügt, die das Kommunizieren von Änderungen außerhalb eines Steuerelements ermöglichen werden, ohne eine Spaltenkonfiguration hinzuzufügen.

Begrenzen Sie die Größe und Häufigkeit von Aufrufen für WebApi

Wenn Sie die context.WebApi Methoden verwenden, beschränken Sie sowohl die Anzahl der Aufrufe als auch die Datenmenge. Jedes Mal, wenn Sie den WebApiAufruf ausführen, zählt sie zu den API-Berechtigungs- und Dienstschutzgrenzwerten des Benutzers. Berücksichtigen Sie beim Ausführen von CRUD-Vorgängen für Datensätze die Größe der Nutzlast. Im Allgemeinen gilt: Je größer die Anforderungsnutzlast, desto langsamer ist Ihre Codekomponente.

Canvas-Apps

Dieser Abschnitt enthält Best Practices und Anleitungen zu Codekomponenten in Canvas-Apps.

Minimieren der Anzahl der Komponenten auf einem Bildschirm

Jedes Mal, wenn Sie Ihrer Canvas-App eine Komponente hinzufügen, dauert das Rendern eine begrenzte Zeit. Die Renderzeit erhöht sich mit jeder hinzugefügten Komponente. Messen Sie sorgfältig die Leistung Ihrer Codekomponenten, wenn Sie mithilfe der Entwicklerleistungstools mehr zu einem Bildschirm hinzufügen.

Derzeit bündelt jede Codekomponente eine eigene Bibliothek gemeinsamer Bibliotheken wie Fluent UI und React. Das Laden mehrerer Instanzen derselben Bibliothek lädt diese Bibliotheken nicht mehrmals. Das Laden mehrerer verschiedener Codekomponenten führt jedoch dazu, dass der Browser mehrere gebündelte Versionen dieser Bibliotheken lädt. In Zukunft können Sie diese Bibliotheken mit Codekomponenten laden und freigeben.

Den Herstellern erlauben, Ihre Codekomponente zu gestalten

Wenn App-Hersteller Codekomponenten aus einer Canvas-App verwenden, möchten sie einen Stil nutzen, der dem Rest ihrer App entspricht. Verwenden Sie Eingabeeigenschaften, um Anpassungsoptionen für Designelemente wie Farbe und Größe bereitzustellen. Wenn Sie die Microsoft Fluent-Benutzeroberfläche verwenden, ordnen Sie diese Eigenschaften den von der Bibliothek bereitgestellten Designelementen zu. Zukünftig wird den Codekomponenten Designunterstützung hinzugefügt, um diesen Prozess zu vereinfachen.

Befolgen Sie die Best Practices für die Leistung von Canvas-Apps

Canvas-Apps bieten eine breite Palette von Best Practices aus der App und der Lösungsüberprüfung. Stellen Sie sicher, dass Ihre Apps diesen Empfehlungen folgen, bevor Sie Codekomponenten hinzufügen. Weitere Informationen finden Sie unter

• Tipps zur Verbesserung der Leistung von Canvas-Apps
• Überlegungen zur optimierten Leistung in Power Apps

TypeScript und JavaScript

Dieser Abschnitt enthält Best Practices und Anleitungen zu TypeScript und JavaScript in Codekomponenten.

ES5 vs. ES6

Standardmäßig zielen Codekomponenten auf ES5 ab, um ältere Browser zu unterstützen. Wenn Sie diese älteren Browser nicht unterstützen möchten, ändern Sie das Ziel in ES6 innerhalb des pcfproj Ordners tsconfig.json. Weitere Informationen finden Sie unter ES5 vs ES6.

Modulimporte

Bündeln Sie immer die Module, die Ihre Codekomponente benötigt, anstatt Skripts zu verwenden, die das Laden über das SCRIPT Tag erfordern. Wenn Sie z. B. eine Diagramm-API eines Drittanbieters verwenden möchten, bei der im Beispiel gezeigt wird, wie <script type="text/javascript" src="somechartlibrary.js></script> zur Seite hinzugefügt wird, wird dieser Ansatz innerhalb einer Codekomponente nicht unterstützt. Die Bündelung aller erforderlichen Module isoliert die Codekomponente von anderen Bibliotheken und unterstützt auch die Ausführung im Offlinemodus.

Konfigurieren von ESLint für Codekomponenten

Beim Linting durchsucht ein Tool den Code nach potenziellen Problemen. Die von pac pcf init verwendete Vorlage installiert die eslint-Module in Ihrem Projekt und konfiguriert es durch Hinzufügen einer .eslintrc.json-Datei. Eslint erfordert die Konfiguration für die Codierungsstile TypeScript und React. Es kann auch einige dieser Probleme nach Möglichkeit automatisch beheben. Verwenden Sie zum Konfigurieren den folgenden Befehl:

npx eslint --init

Beantworten Sie dann die folgenden Fragen, wenn Sie dazu aufgefordert werden:

• Wie möchten Sie ESLint verwenden? Antwort: Um die Syntax zu überprüfen, Probleme zu erfinden und den Codestil zu erzwingen

• Welche Arten von Modulen verwendet Ihr Projekt? Antwort: JavaScript-Module (Import/Export)

• Welches Framework verwendet Ihr Projekt? Antwort: React

• Verwendet Ihr Projekt TypeScript? Antwort: Ja

• Wo wird Ihr Code ausgeführt? Antwort: Browser

• Wie möchten Sie einen Stil für Ihr Projekt definieren? Antwort: Fragen zu Ihrem Stil beantworten

• Welches Format soll Ihre Konfigurationsdatei haben? Antwort: JSON (Diese Antwort aktualisiert das vorhandene .eslintrc.json)

• Welche Art der Einrückung verwenden Sie? Antwort: Leerzeichen (Dieser Einzugsstil ist die Standardeinstellung bei Visual Studio Code)

• Welche Anführungszeichen verwenden Sie für Zeichenfolgen? Antwort: Einzeln

• Welche Zeilenenden verwenden Sie? Antwort: Windows (Dieses Zeilenende ist bei Visual Studio Code der standardmäßige CRLF-Zeilenendstil.)

• Benötigen Sie Semikolons? Antwort: Ja

Bevor Sie eslint verwenden können, müssen Sie dem package.json einige Skripte hinzufügen.

 "scripts": {
    ...
    "lint": "eslint MY_CONTROL_NAME --ext .ts,.tsx",
    "lint:fix": "npm run lint -- --fix"
  }

Das eslint-Skript akzeptiert den Ordner, der Ihren Code enthält. Ersetzen Sie MY_CONTROL_NAME mit dem gleichen Namen wie die Codekomponente, die beim Aufrufen von pac pcf init verwendet wird.

In der Befehlszeile können Sie jetzt Folgendes verwenden:

npm run lint:fix

Durch diesen Befehl wird der Code im Projekt so geändert, dass er Ihrem gewählten Stil entspricht, und es werden auch einige Probleme gemeldet, die später behoben werden.

"ignorePatterns": ["**/generated/*.ts"]

Entwicklung der HTML-Browser-Benutzeroberfläche

Dieser Abschnitt enthält bewährte Methoden und Anleitungen für die Entwicklung von HTML-Browseroberflächen.

Verwenden von Microsoft Fluent UI React

Fluent UI React ist das offizielle Open-Source-React-Frontend-Framework, das entwickelt wurde, um Erfahrungen zu erstellen, die sich nahtlos in eine breite Palette von Microsoft-Produkten einfügen. Power Apps selbst verwendet Fluent UI, sodass Sie eine Benutzeroberfläche erstellen können, die mit den restlichen Apps konsistent ist.

Verwenden Sie pfadbasierte Importe von Fluent, um die Paketgröße zu reduzieren

Derzeit verwenden die mit pac pcf init genutzten Codekomponentenvorlagen kein Tree-Shaking. Tree-shaking ist der Prozess, bei dem webpack Module erkennt, die Sie importieren, aber nicht verwenden, und sie entfernt. Wenn Sie mit dem folgenden Befehl aus Fluent UI importieren, importieren und bündeln Sie die gesamte Bibliothek:

import { Button } from '@fluentui/react'

Um das Importieren und Bündeln der gesamten Bibliothek zu vermeiden, verwenden Sie pfadbasierte Importe, bei denen Sie die spezifische Bibliothekskomponente mithilfe des expliziten Pfads importieren:

import { Button } from '@fluentui/react/lib/Button';

Durch die Verwendung des spezifischen Pfads wird die Größe Ihres Bundles sowohl in Entwicklungs- als auch in Releasebuilds reduziert.

Sie können Tree-Shaking (das nur Release- und Produktions-Builds betrifft) nutzen, indem Sie Ihre tsconfig.json so aktualisieren, dass sie im Abschnitt compilerOptions die folgende Modulkonfiguration verwendet:

"module": "es2015",
"moduleResolution": "node"

Mehr Informationen: Fluent UI – Erweiterte Nutzung.

React-Rendering optimieren

Wenn Sie React verwenden, befolgen Sie reactspezifische bewährte Methoden zum Minimieren des Renderings von Komponenten. Dieser Ansatz führt zu einer reaktionsfähigen Benutzeroberfläche. Die folgende Liste enthält einige der bewährten Methoden:

• Rufen Sie updateView nur innerhalb der ReactDOM.render-Methode auf, wenn eine Änderung an einer gebundenen Eigenschaft oder einem Framework-Aspekt erfordert, dass die Benutzeroberfläche diese Änderung widerspiegelt. Verwenden Sie updatedProperties , um zu bestimmen, was geändert wurde.
• Verwenden Sie nach Möglichkeit PureComponent (mit Klassenkomponenten) oder React.memo (mit Funktionskomponenten), um unnötiges erneutes Rendern von Komponenten zu vermeiden, wenn sich ihre Props nicht ändern.
• Zerlegen Sie bei großen React-Komponenten Ihre Benutzeroberfläche in kleinere Komponenten, um die Leistung zu verbessern.
• Vermeiden Sie die Verwendung von Pfeilfunktionen und Funktionsbindungen innerhalb der Renderfunktion. Diese Vorgehensweisen erzeugen bei jedem Rendern eine neue Callback-Closure und führen dazu, dass die untergeordnete Komponente bei jedem Rendern der übergeordneten Komponente erneut gerendert wird. Verwenden Sie stattdessen die Funktionsbindung im Konstruktor oder verwenden Sie Klassenfeld-Pfeilfunktionen. Siehe Umgang mit Ereignissen – React.

Überprüfung der Barrierefreiheit

Stellen Sie sicher, dass auf Codekomponenten zugegriffen werden kann, damit Benutzer mit Tastatur und Sprachausgabe diese verwenden können:

• Bieten Sie Tastaturnavigationsalternativen zu Maus- und Touchereignissen. Wenn Ihre Komponente beispielsweise eine Dropdownliste bereitstellt, stellen Sie sicher, dass ein Benutzer die TAB-TASTE verwenden kann, um den Fokus festzulegen und dann mithilfe der Pfeiltasten in den Optionen zu navigieren.
• Stellen Sie sicher, dass für alt die ARIA-Attribute so festgelegt sind, dass Bildschirmleseprogramme eine genaue Darstellung der Benutzeroberfläche der Codekomponente ausgeben. Die Microsoft Fluent UI-Bibliothek erleichtert die Verwendung dieser Attribute, da viele der Komponenten bereits zugänglich und mit der Sprachausgabe kompatibel sind.
• Moderne Browser-Entwicklertools bieten heute hilfreiche Möglichkeiten, um die Barrierefreiheit zu überprüfen. Verwenden Sie diese Tools, um nach allgemeinen Problemen mit der Barrierefreiheit bei Ihrer Codekomponente zu suchen.

Weitere Informationen finden Sie unter Erstellen barrierefreier Canvas-Apps in Power Apps.

Verwenden Sie immer asynchrone Netzwerkaufrufe

Verwenden Sie bei Netzwerkaufrufen niemals eine synchrone Blockierungsanforderung, da diese Anforderung bewirkt, dass die App nicht mehr reagiert und zu einer langsamen Leistung führt. Weitere Informationen finden Sie unter Asynchrones Interagieren mit HTTP- und HTTPS-Ressourcen.

Code für mehrere Browser schreiben

Modellgesteuerte Apps, Canvas-Apps und Portale unterstützen alle mehrere Browser. Stellen Sie sicher, dass Sie nur Techniken verwenden, die von allen modernen Browsern unterstützt werden, und testen Sie dies mit einer repräsentativen Gruppe von Browsern für Ihre beabsichtigte Zielgruppe.

• Grenzwerte und Konfigurationen
• Unterstützte Webbrowser
• Von Office verwendete Browser

Codekomponenten sollten die Unterstützung mehrerer Clients und Anzeigeformate planen

Codekomponenten können in mehreren Clients (modellgesteuerte Apps, Canvas-Apps, Portalen) und Anzeigeformaten (Mobil, Tablet, Web) gerendert werden. Bei Verwendung in modellgesteuerten Apps können DataSet Codekomponenten in Hauptformularrastern, zugehörigen Datensatzraster, Unterrastern oder Dashboards platziert werden. Bei Verwendung in Canvas-Apps können Codekomponenten in reaktionsfähigen Containern platziert werden, die die Größe dynamisch ändern, indem sie die vom App-Maker bereitgestellte Konfiguration verwenden.

• Mithilfe von trackContainerResizeCodekomponenten können Sie auf Änderungen der verfügbaren Breite und Höhe reagieren. In einigen Fällen rendert das Festlegen dieser Eigenschaft eine andere Benutzeroberfläche, die dem verfügbaren Platz entspricht. Sie können allocatedHeight und allocatedWidth mit getFormFactor kombinieren, um zu bestimmen, ob die Codekomponente auf einem Mobilgerät, Tablet oder Webclient ausgeführt wird. Weitere Informationen finden Sie in diesem Tutorial zum Choices Picker.
• Durch die Implementierung setFullScreenkönnen Benutzer erweitern, um den gesamten verfügbaren Bildschirm zu verwenden, auf dem platz begrenzt ist. Weitere Informationen finden Sie unter Canvas-App-Rasterkomponente.
• Wenn die Codekomponente in der angegebenen Containergröße kein sinnvolles Erlebnis bieten kann, sollte sie die Funktion entsprechend deaktivieren und dem Benutzer Feedback geben.

Immer bereichsbezogene CSS-Regeln verwenden

Wenn Sie das Styling für Ihre Codekomponenten mit CSS umsetzen, stellen Sie sicher, dass Sie das CSS auf Ihre Komponente beschränken. Verwenden Sie die automatisch generierten CSS-Klassen, die auf das Containerelement DIV für Ihre Komponente angewendet werden. Wenn Sie Ihr CSS global anwenden, können Sie das bestehende Styling des Formulars oder der Bildschirmansicht beeinträchtigen, in der die Codekomponente gerendert wird. Wenn Sie ein CSS-Framework eines Drittanbieters verwenden, verwenden Sie eine Namespaceversion dieses Frameworks, oder schließen Sie das Framework entweder manuell oder mithilfe eines CSS-Präprozessors in einen Namespace um.

Wenn Ihr Namespace beispielsweise SampleNamespace und der Name Ihrer Codekomponente LinearInputComponent lautet, fügen Sie mit Folgendem eine benutzerdefinierte CSS-Regel hinzu:

.SampleNamespace\.LinearInputComponent rule-name

Vermeiden Sie die Verwendung von Webspeicherobjekten

Code-Komponenten sollten die HTML-Webspeicherobjekte wie window.localStorage und window.sessionStorage nicht zum Speichern von Daten verwenden. Lokal auf dem Browser oder mobilen Client des Benutzers gespeicherte Daten sind nicht sicher und sind nicht zuverlässig verfügbar.

ALM, Azure DevOps und GitHub

Bewährte Methoden für Codekomponenten mit ALM, Azure DevOps und GitHub finden Sie im Artikel zur Anwendungslebenszyklusverwaltung (Code Component Application Lifecycle Management, ALM)

Ähnliche Artikel

• Was sind Code-Komponenten
• Codekomponenten für Canvas-Apps
• Erstellen und Entwickeln einer Code-Komponente
• Erlernen des Power Apps component framework
• Codekomponenten in Power Pages verwenden