top of page

Virtuelle Komponenten in PowerApps: Was sind sie und was ist neu?

Dejan Pantos
6. Jan.6 Min. Lesezeit

Mit der Einführung von React (virtuellen) Code-Komponenten bietet Microsoft eine neue, optimierte Möglichkeit, Code-Komponenten in Power Apps zu erstellen. Durch die Nutzung der von der Plattform bereitgestellten React- und Fluent UI-Bibliotheken können Entwickler die Paketgrösse erheblich reduzieren und gleichzeitig die Performance ihrer Anwendungen steigern.

Im Gegensatz zu den traditionellen Standard-Code-Komponenten, bei denen jede Komponente eigene Versionen von React und Fluent UI enthält, teilen sich die neuen virtuellen Komponenten die zentralen React- und Fluent-Pakete innerhalb der Power Apps Umgebung. Dies reduziert Redundanzen, optimiert Ladezeiten und sorgt für ein konsistentes Design über alle Komponenten und App-Grössen

Seit ihrer Einführung im Jahr 2022 haben sich virtuelle Komponenten von einem experimentellen Feature zu einer ausgereiften und leistungsstarken Lösung für die Entwicklung in Power Apps entwickelt.


Abstrakte Darstellung eines modularen Designs: Bunte, halbtransparente Würfel in Blau-, Grün-, Gelb-, Orange- und Rottönen, die sich in einer isometrischen Anordnung zu einer komplexen Struktur zusammensetzen. Die hellen Farben und schimmernden Oberflächen erzeugen einen futuristischen, technologischen Eindruck.

Was du in diesem Blog lernen wirst

In diesem Blog zeige ich dir die spannenden Möglichkeiten, die React (virtuelle) Code-Komponenten in Power Apps bieten. Sie erfahren:

  1. Was React (virtuelle) Code-Komponenten sind: Wie sie sich von traditionellen Komponenten unterscheiden und welche Vorteile sie bieten.

  2. Die Vorteile virtueller Komponenten: Leistungsverbesserungen, kleinere Paketgrössen und vereinfachtes Bibliotheksmanagement.

  3. Was Fluent UI ist und wie es in Power Apps verwendet wird: Erfahren Sie mehr über die Fluent-Designsprache und die Komponentenbibliothek.

  4. Wie man eine React-basierte PCF-Komponente erstellt: Eine Schritt-für-Schritt-Anleitung zur Einrichtung, Integration von Fluent UI und Bereitstellung Ihrer benutzerdefinierten Komponente.

Am Ende dieses Leitfadens wirst du wissen, wie du virtuelle Komponenten nutzen kannst, um leistungsstarke, moderne und effiziente UI-Steuerelemente in Power Apps zu erstellen.


Die wichtigsten Vorteile virtueller Komponenten

  • Verbesserte Leistung: Das Rendering über den virtuellen DOM reduziert den Speicherverbrauch und verbessert die Rendering-Effizienz.

  • Kleinere Paketgrössen: React- und Fluent UI-Bibliotheken werden nicht mehr in einzelnen Komponenten eingebettet, sondern zentral von der Power Apps-Hostumgebung bereitgestellt.

  • Vereinfachtes Bibliotheksmanagement: Entwickler müssen React und Fluent UI nicht mehr lokal verwalten oder einbinden, was Versionskonflikte vermeidet.

  • Schnellere Entwicklung: Weniger Overhead und ein optimierter Bibliotheksgebrauch führen zu schnellere Entwicklungen.

  • Konsistentes Design: Durch die Nutzung von Fluent UI aus der Plattform bleibt das Design in allen Komponenten innerhalb von Power Apps einheitlich.


Neue PCF-Projekte, die mit der CLI-Version pac CLI v1.37.4 erstellt werden, enthalten automatisch diese aktualisierten Versionen in den Dateien manifest.xml und package.json. Für bestehende Projekte wird empfohlen:

  • React-Version im Manifest auf 16.14.0 zu aktualisieren.

  • Abhängigkeiten mit dem Befehl zu aktualisieren:

npm update

  • Alternativ kannst du die Abhängigkeiten neu installieren:

npm install

Technische Unterschiede zwischen Standard- und virtuellen Steuerelementen

Standard-Steuerelement

Virtuelles Steuerelement

Rendert im eigenem virtuellem DOM

Rendert im virtuellen DOM

Benötigt lokale React-/Fluent UI-Bibliotheken

Nutzt React-/Fluent UI-Bibliotheken aus der Power Apps-Hostumgebung

Grösseres bundle.js

Deutlich kleineres bundle.js

Höherer Speicher- und CPU-Verbrauch

Effizienteres Rendering und Speicherverbrauch


Warum sind die neuen virtuelle Komponenten wichtig?

Vor der Einführung der neuen virtueller Komponenten mussten Entwickler alle benötigten Bibliotheken lokal verwalten und einbinden, was zu:

  • grösseren Paketgrössen,

  • möglichen Versionskonflikten und

  • längeren Ladezeiten führte.

Mit den neuen virtuellen Komponenten verwaltet die Power Apps-Plattform diese Bibliotheken zentral. Dies:

  • reduziert den Entwicklungsaufwand,

  • minimiert die Paketgrössen und

  • verbessert die Leistung und Wartbarkeit von Komponenten.


Was ist Fluent Design und Fluent UI?

Das Fluent Design System ist Microsofts Designsprache, die sich auf die Erstellung von ansprechenden, zugänglichen und leistungsstarken Benutzererlebnissen konzentriert. Sie bietet einen einheitlichen Designansatz über Plattformen hinweg und sorgt für Konsistenz.

Fluent UI ist Microsofts offizielle React-Komponentenbibliothek, die das Fluent Design System zum Leben erweckt. Sie bietet sofort einsetzbare, anpassbare Komponenten, die mit Microsofts Ökosystem, einschliesslich Teams, Office und Dynamics 365, kompatibel sind.


Entwickler profitieren von einer Vielzahl von vorgefertigten Elemente wie DataGrid, Buttons, Dropdowns und mehr, die leicht an individuelle Bedürfnisse angepasst werden können. Fluent UI sorgt nicht nur für ein einheitliches Erscheinungsbild, sondern reduziert auch die Entwicklungszeit durch wiederverwendbare Komponenten.



Fluent 2-Logo neben einer stilisierten, schimmernden Struktur aus transparenten, farbigen Quadraten, die übereinander gestapelt sind. Die Darstellung unterstreicht das moderne und flexible Designsystem von Fluent UI, das in Power Apps und anderen Microsoft-Produkten eingesetzt wird.

Fluent UI in Power Apps

Fluent UI-Steuerelemente wurden zuerst in Power Apps for Teams eingeführt und sind später zu den Standardsteuerelementen für benutzerdefinierte Seiten geworden. Durch die Integration von Fluent UI stellt Power Apps sicher, dass das Design mit der gesamten Microsoft-Design übereinstimmt und ein einheitliches Erlebnis über verschiedene Produkte wie Teams, Office und Dynamics 365 bietet.


Aufbau einer React-basierten PCF-Komponente mit Fluent UI DataGrid

Das Power Apps Component Framework (PCF) ermöglicht es Entwicklern, benutzerdefinierte UI-Komponenten für modelgetriebene oder Canvas-Apps zu erstellen. Durch die Kombination von PCF mit Fluent UI können moderne, responsive und leistungsstarke Komponenten entwickelt werden.

In dieser Anleitung zeige ich dir, wie du:

  • ein PCF-Projekt einrichtest,

  • Fluent UI’s DataGrid integrierst,

  • die Komponente testest und in Power Apps bereitstellst,

  • die Komponente zu einer Lösung hinzufügst und in einem Formular verwendest.


Schritt 1: Projekt einrichten


1.1 Projektordner erstellen

Erstelle einen neuen Ordner für dein PCF-Projekt und navigiere hinein:

mkdir ProgressComponent
cd ProgressComponent

1.2 Ordner in Visual Studio Code öffnen

Starte Visual Studio Code:

code .

1.3 Power Platform CLI installieren

Stellen Sie sicher, dass die neueste Version der Power Platform CLI installiert ist:

pac install latest

1.4 React-basiertes PCF-Projekt initialisieren

Initialisiere ein PCF-Projekt mit React:

pac pcf init -n ProgressComponent -ns SampleNamespace -t field -fw react -npm

Parameter:

  • -n: Name der Komponente (z. B. ProgressComponent).

  • -ns: Namespace der Komponente (z. B. SampleNamespace).

  • -t: Typ der Komponente (field für feldgebundene Komponenten).

  • -fw react: Framework (React).

  • -npm: Automatische Installation der Abhängigkeiten.


1.5 Fix Sicherheitsprobleme beheben

Falls npm Schwachstellen meldet (z. B. 2 vulnerabilities (1 low, 1 high), behebe diese mit folgendem Befehl:

npm audit fix

Dies wird versuchen, alle Probleme zu beheben. Führe nach dem Ausführen des Befehls eine Überprüfung durch, um sicherzustellen, dass keine Schwachstellen mehr vorhanden sind:

npm audit

Wenn in der Ausgabe found 0 vulnerabilities angezeigt wird, ist alles in ordnung.

1.6 ControlManifest.Input.xml überprüfen

Öffne die Datei ControlManifest.Input.xml in deinem Projektverzeichnis. Suche nach den folgenden <platform-library> -Deklarationen:


Ausschnitt aus einer ControlManifest.Input.xml-Datei mit Ressourcen-Definitionen für eine Power Apps-Komponente. Es werden die React-Bibliothek (Version 16.14.0) und die Fluent UI-Bibliothek (Version 9.46.2) eingebunden, zusammen mit einer CSS-Datei und einer Ressourcendatei (.resx). Dies zeigt die grundlegende Struktur zur Integration von Abhängigkeiten und Ressourcen in einer PCF-Komponente

Was zu prüfen ist

  • React: Stelle sicher, dass die React-Bibliothek in der Version 16.14.0 oder höher ist.

  • Fluent: Überprüfen Sie, ob die Fluent UI-Bibliothek in der Version 9.46.2 oder höher ist.

1.7 Fehlende Bibliotheken bei Bedarf installieren

Wenn die benötigten Bibliotheken (React oder Fluent) fehlen, installiere sie manuell mit den folgenden npm-Befehlen.

npm install react@16.14.0 react-dom@16.14.0 
npm install @fluentui/react@9.46.2

Schritt 2: Fluent UI DataGrid hinzufügen

  1. Öffne die Fluent UI React Controls Dokumentation.

  2. Suche nach der DataGrid-Komponente.

  3. Kopiere den bereitgestellten Beispielcode.

2.1  Anpassen der Datei HelloWorld.tsx

Öffne die Datei HelloWorld.tsx und füge den zuvor kopierten Code ein.

Schritt 3: Aktualisieren der index.ts-Datei

Passe die index.ts-Datei an, um die Fluent UI DataGrid-Komponente zu verwenden:

  1. Navigiere und öffne zur HelloWorld.tsx-Datei.

  2. Überprüfe was exportiert wird.

  3. In deinem Fall lautet der Export:

    1. export const Default

  4. Passe die index.ts-Datei an:

    • Passe die Import-Anweisung in der index.ts-Datei für HelloWorld so an, dass sie dem Export entspricht: import { Default } from "./HelloWorld";

  5. Aktualisiere die updateView-Methode Da Ihre Komponente keinen Kontext benötigt, kannst du sie direkt zurückgeben:

public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {return React.createElement(Default);}

Durch diese Schritte stellst du sicher, dass die Komponente korrekt importiert und gerendert wird, ohne dass ein Kontext erforderlich ist.


Die Ordnerstruktur sollte folgendermassen organisiert sein:  

  

Ordnerstruktur eines PCF-Projekts in Power Apps. Der Hauptordner ProgressComponent enthält wichtige Dateien wie ControlManifest.Input.xml für die Konfigurationsdefinition, HelloWorld.tsx und index.ts für den Code der Komponente, sowie weitere Dateien wie package.json und pcfconfig.json, die die Abhängigkeiten und Einstellungen des Projekts verwalten. Diese Struktur bildet die Grundlage für die Entwicklung einer React-basierten PCF-Komponente.

Schritt 4: Testen der Komponente

  • Erstelle das Projek:

npm run build

  • Führe diesen Befehl aus, um eine Vorschau der Komponente zu erhalten:

npm start

  • Öffne die bereitgestellte URL (z. B. http://localhost:8181) in deinem Browser, um das DataGrid anzuzeigen.


Schritt 5: Komponente zu Power Apps übertragen


Übertrage die Komponente in dein Environment:

pac pcf push -pp wor

Hinweis: "pp" steht für Publisher Prefix (z. B. „wor“).

Überprüfe dein Environment:

pac auth list

Wechsle bei Bedarf in die korrekte Umgebung:

pac auth select -i 1

Schritt 6: Komponente zu einer Lösung hinzufügen

  1. Öffne das Power Apps Maker Portal.

  2. Navigiere zu deiner Solution.

  3. Wähle Add existing > More > Developer > Custom Control.

    Screenshot aus dem Power Apps Maker Portal, das die Option zur Hinzufügung einer benutzerdefinierten Komponente zeigt. Im Menü "Add existing" unter "More > Developer" ist die Auswahl "Custom control" hervorgehoben. Dies ist der Schritt, um eine benutzerdefinierte PCF-Komponente (Power Apps Component Framework) zu einer Lösung hinzuzufügen und in einem Formular oder einer App zu verwenden.

  4. Wähle deine Komponente ProgressComponent aus und füge sie hinzu.

Schritt 7: Verwendung der Komponente in einem Formular

  1. Öffne den Formular-Editor in Ihrer modellgesteuerten App.

  2. Wechsle zum Tab Komponenten.

    Darstellung des Formular-Editors in Power Apps. Der Bereich "Components" ist geöffnet, und das Symbol für Komponenten (vier Quadrate) ist hervorgehoben. Hier können Benutzer bestehende oder benutzerdefinierte Komponenten durchsuchen und hinzufügen, um ein Formular individuell anzupassen und zu gestalten.

  3. Klicke auf Get more Components und suche nach deiner Komponente: ProgressComponent.

    Schaltfläche 'Weitere Komponenten hinzufügen' im Power Apps-Formular-Editor, mit der zusätzliche Komponenten zur Anpassung von Formularen gesucht und hinzugefügt werden können.

  4. Ziehe die Komponente per Drag & Drop an die gewünschte Stelle im Formular

    Tabelle mit Dateien und deren Metadaten, einschließlich der Spalten "File", "Author", "Last updated" und "Last update". Die Tabelle zeigt verschiedene Dokumenttypen (z. B. Meeting Notes, Präsentation, Trainingsaufzeichnung), die zugehörigen Autoren (z. B. Max Mustermann, Erika Mustermann), den Zeitpunkt der letzten Bearbeitung sowie den letzten Status, z. B. "You edited this" oder "You recently opened this". Diese Übersicht eignet sich zur Verwaltung und Nachverfolgung von Dokumenten und deren Aktivitäten in einer kollaborativen Umgebung wie Microsoft Teams oder SharePoint.

    Diese Anleitung bietet selbstverständlich ein stark vereinfachtes Beispiel. Die Komponente lässt sich jedoch erweitern und anpassen und eignet sich hervorragend als Einstieg in die Welt der virtuellen Komponenten.

Fazit

Virtuelle Komponenten stellen einen deutlichen Fortschritt für PowerApps dar. Sie bieten die Leistung und Flexibilität, die Entwickler für moderne, skalierbare Lösungen benötigen. Dadurch wird die Entwicklung nicht nur schneller und sauberer, sondern auch das Nutzererlebnis verbessert – dank kleinerer, effizienterer benutzerdefinierter Steuerelemente.


Während Microsoft das Framework weiter optimiert, werden virtuelle Komponenten zweifellos zum Standard für leistungsfähige, produktionsreife Anwendungen in PowerApps werden.


Persönlich finde ich diese Lösung von Microsoft grossartig. Sie spart viel Zeit, und man muss sich weniger um Design oder Performance kümmern. Meiner Meinung nach ist dies ein Schritt in die richtige Richtung, und ich bin gespannt, wie sich das in Zukunft weiterentwickelt.

Ergänzende Ressourcen

Für weitere Informationen zu Fluent UI und den Komponenten, nutze die folgenden Ressourcen:

🔗 Fluent UI React Controls Erkunde verfügbare Fluent UI-Steuerelemente mit ausführlichen Beispielen, Anwendungsfällen und Anpassungsoptionen für eine nahtlose Integration in Ihre Power Apps-Projekte.

🔗 Fluent UI Get Started Guide Dieser Leitfaden unterstützt dich bei den ersten Schritten mit Fluent UI, einschliesslich Installation, Einrichtungshinweisen und Best Practices für die Verwendung von Fluent UI-Komponenten in React-Projekten.

🔗Fluent UI Theming Erfahre, wie du Fluent UI-Komponenten mithilfe von Theming und Stilen an Ihre Power Apps-Markenrichtlinien oder spezifische Designanforderungen anpasst.


Comments

bottom of page