M365Con 2027 – die kostenlose Online-Konferenz · 11–22 Jan 2027 · 120 sessions→ m365con.net

Blog · Mirko Peters

Wann Sie ein benutzerdefiniertes PCF-Steuerelement statt Canvas-Komponenten in Power Apps einsetzen sollten

Von ·

Erfahren Sie, wann sich benutzerdefinierte PCF-Codekomponenten gegenüber Low-Code-Canvas-Komponenten in Power Apps lohnen. Vergleichen Sie Kompetenzen, Leistung und Architektur.

Automatisch mit KI aus dem Originalbeitrag übersetzt. Englisches Original lesen

Cover: Power Apps Component Framework - Simply Explained

Die Wahl zwischen codebasierten Power Apps Component Framework (PCF)-Steuerelementen und Low-Code-Canvas-Komponenten entscheidet darüber, ob Ihr Projekt erfolgreich verläuft oder ins Stocken gerät. Dieser Leitfaden erläutert die zentralen architektonischen Unterschiede, die erforderlichen Kompetenzen, die Auswirkungen auf die Leistung und die Entscheidungskriterien, damit Entwickler und Ersteller für komplexe UI-Herausforderungen das passende Werkzeug auswählen.

Das Wichtigste in Kürze

Die architektonische Trennlinie: Ersteller vs. Entwickler

Jede Power App stößt irgendwann an eine funktionale Grenze. Sie benötigen eine spezielle Datenvisualisierung, einen interaktiven Grundriss, ein tabellenartiges Raster zum Bearbeiten oder ein Unterschriftenfeld, doch die Standard-Drag-and-drop-Werkzeugliste bietet diese Funktion schlicht nicht. In solchen Momenten greifen Teams häufig zu Workarounds: Textfelder werden hinter Bildern versteckt, unsichtbare Auslöser übereinandergelegt und zehn einzelne Mechanismen verdrahtet, um eine nahtlose Benutzererfahrung zu simulieren. Das funktioniert zwar vorübergehend, beeinträchtigt jedoch schnell die Leistung der App und erzeugt ein kaum wartbares Geflecht für jeden, der die Lösung später übernimmt.

Um diese architektonische Grenze zu überwinden, unterteilt die Power Platform die Erweiterung der Benutzeroberfläche in zwei klar getrennte Wege: Canvas-Komponenten und PCF-Codekomponenten. Zu verstehen, wo der eine endet und der andere beginnt, ist für eine effiziente App-Planung unverzichtbar. Ersteller erstellen Canvas-Komponenten direkt in der Canvas ihrer App mithilfe vertrauter Formeln und ganz ohne Code. Sie lassen sich schnell bereitstellen, von anderen Low-Code-Entwicklern leicht anpassen und eignen sich ideal für standardisierte UI-Muster. PCF-Codekomponenten hingegen werden von professionellen Entwicklern entwickelt. Sie sind als in sich geschlossene Einheiten der Benutzeroberflächenlogik gepackt, die sich über modellgesteuerte Apps, Canvas-Apps und Power Pages erstrecken können.

Canvas-Komponenten für Tempo, PCF für Leistungsumfang

Bei der Entscheidung, welchen Ansatz Ihr Projekt benötigt, müssen Sie Entwicklungsgeschwindigkeit gegen tiefgreifende funktionale Anforderungen abwägen. Canvas-Komponenten eignen sich besonders, wenn Sie einen wiederkehrenden Abschnitt einer Canvas-App bündeln möchten, etwa ein individuelles Navigationsmenü oder ein gestaltetes Kartenlayout, ohne den visuellen Editor zu verlassen. Sie sind Teil des App-Pakets, übernehmen nahtlos den Kontext der App und benötigen weder Bereitstellungspipelines noch Befehlszeilenwerkzeuge.

Canvas-Komponenten sind allerdings grundsätzlich durch die Ausdruckssprache und die Layout-Engine der Canvas-Umgebung eingeschränkt. Sie können die Plattform-Sandbox nicht verlassen, um umfangreiche JavaScript-Bibliotheken von Drittanbietern zu nutzen, komplexe benutzerdefinierte SVG-Visualisierungen darzustellen oder Rasterverhalten nativ in editierbare Datenraster mit hoher Informationsdichte zu verwandeln. Hier kommt das Power Apps Component Framework ins Spiel. Mit der Microsoft Power Platform CLI entwickeln Entwickler echte Web-Komponenten mit TypeScript und modernen Webstandards. Diese Code-Komponenten deklarieren Ein- und Ausgaben explizit über eine Manifestdatei. So kann die Host-App Daten ohne Ratespiel nahtlos an das Steuerelement anbinden, ohne seinen internen Zustand erraten zu müssen.

Performance-Optimierung mit React und Fluent UI

Ein benutzerdefiniertes Steuerelement von Grund auf zu erstellen, bedeutete früher, jede externe Abhängigkeit mitzuliefern. Das blähte die Dateigrößen oft auf und verlangsamte die Ladezeiten. Moderne PCF-Entwicklung vermeidet diesen Aufwand durch Plattformbibliotheken. Entwickler können Komponenten mit React und Fluent UI erstellen, dem nativen Design-System von Microsoft, und nutzen dabei Bibliotheken, die die Hostumgebung bereits vorab geladen hat.

Wenn eine App mehrere benutzerdefinierte Steuerelemente lädt, die diese Plattformbibliotheken gemeinsam nutzen, lädt der Browser keinen doppelten Framework-Code herunter. Das sorgt für eine flüssige, reaktionsschnelle Benutzeroberfläche, die sich optisch in das übrige Microsoft-365-Ökosystem einfügt. Im Hintergrund übernehmen die Lebenszyklus-Methoden der Komponente (init, updateView, getOutputs und destroy) die Verwaltungsaufgaben: Zeichnen, Aktualisieren bei Datenänderungen und Speicherfreigabe, wenn das Steuerelement entfernt wird. Diese strikte Lebenszyklus-Disziplin verhindert die Speicherlecks und trägen Darstellungen, die unprofessionellen Code-Einschleusungen so häufig zusetzen.

Governance und die Realität der langfristigen Wartung

Der Einsatz benutzerdefinierter Code-Komponenten bringt einen Wartungsaufwand mit sich, den Low-Code-Lösungen in der Regel vermeiden. Da PCF-Steuerelemente einen Build-Schritt, ein Quellcode-Repository und die Bereitstellung über Dataverse-Lösungen erfordern, brauchen sie einen festen Verantwortlichen. Verlässt der ursprüngliche Entwickler das Unternehmen ohne ordentliche Dokumentation, kann ein benutzerdefiniertes Steuerelement schnell zu einer undurchschaubaren Blackbox werden, die sich nicht mehr warten lässt.

Zudem müssen IT-Administratoren strikte Governance-Richtlinien durchsetzen, damit sich doppelte oder schlecht optimierte Code-Komponenten nicht in den Unternehmensumgebungen ausbreiten. Bevor Sie einen individuellen PCF-Build genehmigen, sollten Lösungsarchitekten prüfen, ob kein natives Steuerelement und keine Canvas-Komponente neunzig Prozent der benötigten Funktionalität abdecken kann. Reicht ein Standardansatz schon weitgehend aus, überwiegen die Einsparungen bei der Wartung fast immer den Wunsch nach einer pixelgenauen Individualentwicklung.

Fazit

Die Wahl zwischen Canvas-Komponenten und dem Power Apps Component Framework hängt davon ab, wie gut Ihre technischen Ressourcen zum konkreten UI-Problem passen. Nutzen Sie Canvas-Komponenten für die schnelle, codefreie Kapselung von Oberflächenelementen innerhalb von Canvas-Apps, und reservieren Sie PCF-Code-Komponenten für anspruchsvolle Anforderungen an Leistung, die über Dataverse-basierte Lösungen hinausgehen. Um dieses Thema zu vertiefen und Expertenmeinungen zur modernen Cloud-Entwicklung bei Microsoft zu hören, hören Sie sich die vollständige Episode des M365 FM Podcasts an.

Häufige Fragen

Können Canvas-Komponenten in modellgesteuerten Apps verwendet werden?

Nein, Canvas-Komponenten sind ausschließlich für Canvas-Apps gedacht. Wenn Sie benutzerdefinierte UI-Steuerelemente in modellgesteuerten Apps oder in Power Pages benötigen, müssen Sie Code-Komponenten des Power Apps Component Framework (PCF) verwenden.

Welche Programmiersprachen sind für die Entwicklung von PCF-Steuerelementen erforderlich?

Für benutzerdefinierte Code-Komponenten sind praktische Kenntnisse in TypeScript (oder JavaScript), HTML und CSS erforderlich. Außerdem sollten Sie mit der Microsoft Power Platform CLI vertraut sein, um die Grundstruktur zu erstellen und das Paket zu verpacken.

Müssen Endbenutzer programmieren können, um ein PCF-Steuerelement zu verwenden?

Überhaupt nicht. Sobald ein Entwickler ein PCF-Steuerelement erstellt und in einer Dataverse-Lösungsumgebung bereitgestellt hat, können Maker es wie jedes Standardsteuerelement per Drag-and-drop in Formulare, Ansichten oder Dashboards ziehen.

Welchen Zweck hat die Manifestdatei einer Komponente?

Das Manifest ist eine XML-Datei, die die Metadaten der Komponente, die erwarteten Eingabeeigenschaften und die Ausgabeereignisse deklariert. Es fungiert als Verdrahtungsplan, damit Power Apps Daten korrekt an die Code-Komponente binden kann.

Power Apps Power Platform Canvas app Dataverse Microsoft Excel Model-driven app Power Pages

Verwandte Artikel

RSS