Share via

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

  • Artikel

Das Entwickeln, Bereitstellen und Verwalten von Codekomponenten erfordert eine Kombination von u. a. folgenden Bereichen:

  • Power Apps component framework
  • Microsoft Power Apps
  • 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.

Stellen Sie keine Entwicklungs-Builds für Dataverse bereit

Codekomponenten können im Produktions- oder Entwicklungsmodus erstellt werden. Vermeiden Sie die Bereitstellung von Entwicklungs-Builds für Dataverse, da dies die Leistung beeinträchtigen könnte und die Bereitstellung aufgrund ihrer Größe sogar blockiert werden könnte. 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. Mehr Informationen: Debugging von benutzerdefinierten Steuerelementen.

Verwenden Sie keine nicht unterstützten Framework-Methoden

Dazu gehört die Verwendung nicht dokumentierter interner Methoden, die im ComponentFramework.Context existieren. 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 Hosting-Kontext eine Codekomponente lädt, wird die init-Methode zuerst aufgerufen. 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 zu schließen, und entfernen Sie Ereignishandler, die außerhalb des Containerelements hinzugefügt wurden. Wenn Sie React verwenden, nutzen Sie ReactDOM.unmountComponentAtNode innerhalb der destroy-Methode. Durch das Bereinigen von Ressourcen auf diese Weise werden Leistungsprobleme verhindert, 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 von notifyOutputChanged-Aufrufen

Unter bestimmten Umständen ist es unerwünscht, dass bei jedem notifyOutputChanged-Aufruf ein UI-Steuerelement aktualisiert wird (z. B. Tastendrücke oder Mausbewegungsereignisse). Weitere Aufrufe von notifyOutputChanged würden dazu führen, dass viel mehr Ereignisse an den übergeordneten Kontext weitergegeben werden als erforderlich. Ziehen Sie stattdessen in Betracht, ein Ereignis zu verwenden, wenn ein Steuerelement den Fokus verliert, oder wenn das Berührungs- oder Mausereignis des Benutzers abgeschlossen wird.

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 für beide verfügbar, standard- und React-Komponenten.

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. Von Codekomponenten wird erwartet, dass sie in verschiedenen Produkten wie modellgesteuerten Apps, Canvas-Apps und Dashboards funktionieren. Sie dürfen daher nicht von formContext abhängig sein.

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 der Größe und Häufigkeit der Aufrufe von WebApi

Bei Verwendung der context.WebApi-Methoden begrenzen Sie sowohl die Anzahl der Aufrufe als auch die Datenmenge. Jedes Mal, wenn Sie die WebApi aufrufen, wird sie bei den API-Berechtigungs- und Dienstschutzgrenzen des Benutzers angerechnet. 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 die Leistung Ihrer Codekomponenten sorgfältig, wenn Sie mithilfe der Leistungstools der Entwicklertools mehr zu einem Bildschirm hinzufügen.

Derzeit bündelt jede Codekomponente ihre eigene Bibliothek mit gemeinsam genutzten Bibliotheken wie Fluent UI und React. Beim Laden mehrerer Instanzen derselben Bibliothek werden diese Bibliotheken nicht mehrmals geladen. Das Laden mehrerer verschiedener Codekomponenten führt jedoch dazu, dass der Browser mehrere gebündelte Versionen dieser Bibliotheken lädt. In Zukunft können diese Bibliotheken geladen und mit Codekomponenten geteilt werden.

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

TypeScript und JavaScript

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

ES5 im Vergleich zu ES6

Standardmäßig zielen Codekomponenten auf ES5 ab, um ältere Browser zu unterstützen. Wenn Sie diese älteren Browser nicht unterstützen möchten, können Sie das Ziel in der tsconfig.json Ihres pcfproj-Ordners auf ES6 ändern. Mehr Informationen: ES5 im Vergleich zu ES6.

Modulimporte

Bündeln Sie immer die Module, die als Teil Ihrer Codekomponente erforderlich sind, anstatt Skripte zu verwenden, die mithilfe des SCRIPT-Tags geladen werden müssen. Wenn Sie beispielsweise eine Diagramm-API verwenden möchten, die nicht von Microsoft ist und bei der das Beispiel das Hinzufügen von <script type="text/javascript" src="somechartlibrary.js></script> zur Seite zeigt, wird dies 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.

Hinweis

Die Unterstützung von gemeinsamen Bibliotheken über Komponenten hinweg, die Bibliotheksknoten im Komponentenmanifest verwenden, wird noch nicht unterstützt.

Linting

Bei Linting kann ein Tool den Code auf potenzielle Probleme überprüfen. 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 verwendet werden, um einige dieser Probleme nach Möglichkeit automatisch zu beheben. Verwenden Sie zur Konfiguration in der Befehlszeile Folgendes:

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: Einfache

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

  • Benötigen Sie Semikolons? Antwort: Ja

Hinweis

Sie können diese Konfiguration an Ihre speziellen Bedürfnisse anpassen (z. B., wenn Sie React nicht verwenden). Mehr Informationen: Erste Schritte mit ESLint.

Bevor Sie eslint verwenden können, müssen Sie sie package.json einige Skripts 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.

Hinweis

ESLint weist zunächst auf Probleme mit dem Vorlagencode hin (z. B. leerer Konstruktor). Sie können Inline-Kommentare hinzufügen, um ESLint anzuweisen, die folgenden Regeln auszuschließen: // eslint-disable-next-line @typescript-eslint/no-empty-function

Darüber hinaus können Sie zu ignorierende Dateien (z. B. die automatisch generierten Schnittstellen) hinzufügen, indem Sie Folgendes zu .eslintrc.json hinzufügen:

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

Mehr Informationen: ignorePatterns in Konfigurationsdateien.

Tipp

Sie können die Visual Studio Code-Erweiterung installieren, die die .eslintrc.json-Datei des Projekts verwendet, um eine Codemarkierung für alle erkannten Probleme bereitzustellen, mit der Option, diese direkt in der IDE zu beheben. Mehr Informationen: Verwalten von Erweiterungen in Visual Studio Code.

Entwicklung der HTML-Browser-Benutzeroberfläche

Dieser Abschnitt enthält Best Practices und Anleitungen zur Entwicklung der HTML-Browser-Benutzeroberfläche.

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, d. h. Sie können eine Benutzeroberfläche erstellen, die mit dem Rest Ihrer Apps konsistent ist.

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

Derzeit wird bei den mit pac pcf init verwendeten Codekomponentenvorlagen kein Tree Shaking verwendet. Dabei handelt es sich um den Prozess, bei dem webpack importierte Module erkennt, die nicht verwendet werden, und sie entfernt. Wenn Sie beim Importieren von Fluent UI den folgenden Befehl verwenden, wird die gesamte Bibliothek importiert und gebündelt:

import { Button } from '@fluentui/react'

Um zu vermeiden, dass die gesamte Bibliothek importiert und gebündelt wird, können Sie pfadbasierte Importe verwenden, bei denen die spezifische Bibliothekskomponente mithilfe des expliziten Pfads importiert wird:

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

Das Verwenden des spezifischen Pfads reduziert Ihre Paketgröße sowohl in Entwicklungs- als auch in Release-Builds.

Sie können das Tree Shaking (das nur Release-/Produktions-Builds betrifft) nutzen, indem Sie Ihre tsconfig.json so aktualisieren, dass die folgende Modulkonfiguration innerhalb des compilerOptions-Abschnitts verwendet wird:

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

Mehr Informationen: Fluent UI – Erweiterte Nutzung.

React-Rendering optimieren

Bei der Verwendung von React ist es wichtig, die spezifischen Best Practices von React zu befolgen, um das Rendering von Komponenten zu minimieren, was zu einer reaktionsschnelleren Benutzeroberfläche führt. Einige der Best Practices sind nachfolgend aufgeführt:

  • Rufen Sie ReactDOM.render nur innerhalb der updateView-Methode auf, wenn eine Änderung bei einer gebundenen Eigenschaft oder einem Frameworkaspekt erfordert, dass die Benutzeroberfläche die Änderung widerspiegelt. Sie können updatedProperties verwenden, um festzustellen, was sich geändert hat.
  • Verwenden Sie PureComponent (mit Klassenkomponenten) oder React.memo (mit Funktionskomponenten) wo möglich, um unnötiges erneutes Rendern von Komponenten zu vermeiden, wenn deren Eingabeeigenschaften nicht mutiert sind.
  • 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 Renderingfunktion, da diese Praktiken bei jedem Rendern eine neue Rückrufschließung erzeugen und dazu führen, dass die untergeordnete Komponente immer erneut gerendert wird, sobald die übergeordnete Komponente 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 Codekomponenten zugänglich sind, sodass Benutzern nur mit Tastatur und Sprachausgabe sie verwenden können:

  • Stellen Sie Tastaturnavigationsalternativen zu Maus-/Touchereignissen bereit. Wenn Ihre Komponente beispielsweise eine Dropdown-Liste bereitstellt, stellen Sie sicher, dass ein Benutzer die Registerkarte verwenden kann, um den Fokus zu setzen und dann mit den Pfeiltasten durch die Optionen zu navigieren.
  • Stellen Sie sicher, dass alt und ARIA (Accessible Rich Internet Applications)-Attribute festgelegt sind, sodass Sprachausgaben eine genaue Darstellung der Codekomponenten-Schnittstelle ankündigen. 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.

Mehr Informationen: Zugängliche Canvas-Apps in Power Apps erstellen.

Verwenden Sie immer asynchrone Netzwerkaufrufe

Verwenden Sie bei Netzwerkaufrufen niemals eine synchrone Blockierungsanforderung, da dies dazu führt, dass die App nicht mehr reagiert und die Leistung beeinträchtigt wird. Mehr Informationen: 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.

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, deren Größe mithilfe der von der App erstellenden Person bereitgestellten Konfiguration dynamisch angepasst wird.

  • Die Verwendung von trackContainerResize ermöglicht es Codekomponenten, auf Änderungen der verfügbaren Breite und Höhe zu reagieren. In einigen Fällen wird durch diese Einstellung eine andere Benutzeroberfläche gerendert, die dem verfügbaren Platz entspricht. Die Verwendung von allocatedHeight und allocatedWidth kann mit getFormFactor kombiniert werden, um festzustellen, ob die Codekomponente auf einem mobilen, Tablet- oder Web-Client ausgeführt wird. Weitere Informationen finden Sie in diesem Tutorial zur Auswahl.
  • Durch das Implementieren von setFullScreen können Benutzer die gesamte verfügbare Anzeige nutzen, wenn der Platz begrenzt ist. Mehr Informationen: Rasterkomponente der Canvas-App.
  • 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 die Einstellungen für Ihre Codekomponenten mithilfe von CSS implementieren, stellen Sie sicher, dass die CSS mithilfe der automatisch generierten CSS-Klassen, die auf das Container-DIV-Element für Ihre Komponente angewendet werden, auf Ihre Komponente beschränkt wird. Wenn Ihr CSS im globalen Gültigkeitsbereich liegt, bricht es wahrscheinlich das bestehende Styling des Formulars oder Bildschirms, auf dem die Code-Komponente gerendert wird. Wenn Sie ein CSS-Framework eines Drittanbieters verwenden, nutzen Sie eine Namespace-Version dieses Frameworks oder verpacken Sie dieses Framework andernfalls in einen Namespace, entweder von Hand oder mit Hilfe eines CSS-Präprozessors.

Wenn Ihr Namespace beispielsweise SampleNamespace lautet und der Name Ihrer Codekomponente LinearInputComponent ist, würden Sie mithilfe von Folgendem eine benutzerdefinierte CSS-Regel hinzufügen:

.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. Daten, die lokal im Browser oder auf dem mobilen Client des Benutzers gespeichert sind, sind nicht sicher, und es ist nicht garantiert, dass sie zuverlässig verfügbar sind.

ALM/Azure DevOps/GitHub

Siehe den Artikel unter Application Lifecycle Management (ALM) für Codekomponenten für Best Practices zu Codekomponenten mit ALM/Azure DevOps/GitHub.

Ähnliche Artikel