In der heutigen digitalen Arbeitswelt wächst der Anspruch an individuelle, benutzerfreundliche und leistungsstarke Anwendungen stetig. Standard-Komponenten in Power Apps decken viele Use Cases ab – doch häufig gibt es Situationen, in denen der Standard nicht ausreicht. Genau hier kommen PCF Components (Power Apps Component Framework) ins Spiel. In diesem Beitrag zeige ich, wie man eine PCF Komponente Schritt für Schritt baut: von der Planung über die Entwicklung bis zur Bereitstellung. Zudem beleuchte ich die verschiedenen Gestaltungsmöglichkeiten, technische Voraussetzungen und Grenzen – damit du einschätzen kannst, wann sich eine eigene PCF Component lohnt und wie sie optimal eingesetzt wird. Abschliessend gibt es noch ein paar nützliche Praxistipps.
Was ist das Power Apps Component Framework
Das Power Apps Component Framework (PCF) ist ein Entwicklungs-Framework von Microsoft, mit dem eigene UI-Komponenten für Power Apps und Dynamics 365 gebaut werden können. Ziel ist es, die Standardfunktionen von Canvas- und Model-Driven-Apps zu erweitern und so passgenaue Lösungen für individuelle Business-Szenarien zu schaffen. Ein Beispiel: Ein Unternehmen benötigt in einem Formular ein spezielles Eingabefeld mit Autovervollständigung, das Daten aus mehreren Quellen kombiniert. Solch ein Feature ist mit Standard-Controls kaum umsetzbar – mit einem PCF Component jedoch realisierbar. Damit ist PCF nicht nur für Entwickler spannend, die mehr Freiheit im Frontend wünschen, sondern auch für Unternehmen, die ihre Geschäftsprozesse digitalisieren möchten, ohne Kompromisse bei der Benutzerfreundlichkeit eingehen zu müssen.
Was brauche ich dafür?
Visual Studio Code: VSCode ist leichtgewichtig, kostenlos und bietet eine breite Auswahl an Erweiterungen, die speziell für Web- und TypeScript-Entwicklung optimiert sind. Dadurch wird die Arbeit mit PCF Components deutlich effizienter und komfortabler.
Node.js: Für die Entwicklung von PCF Components wird Node.js benötigt, idealerweise in der aktuellen LTS-Version, da diese stabil ist und langfristig von Microsoft unterstützt wird.
Microsoft Power Platform CLI: Das Power Platform CLI ist das zentrale Werkzeug, um PCF Components zu erstellen, zu bauen, lokal zu testen und schliesslich in die Power Platform zu deployen. Ohne dieses Tool lässt sich der komplette Entwicklungs- und Veröffentlichungsprozess nicht abbilden.
.NET Build tools: Die .NET Build Tools werden benötigt, um PCF Components korrekt zu kompilieren und als Lösungspaket bereitzustellen. Am einfachsten installierst du sie über das Visual Studio Installer mit der Option “.NET-Buildtools” oder direkt über den offiziellen .NET Download Bereich.
Wie lege ich ein neues Projekt an?
Ein neues PCF-Projekt legst du mit dem Power Platform CLI an. Dafür öffnest du ein Terminal im gewünschten Arbeitsverzeichnis und führst den entsprechenden Befehl aus. Dadurch wird ein Projektgrundgerüst erstellt, das alle wichtigen Dateien wie das ControlManifest.Input.xml sowie die TypeScript-Struktur enthält.
pac pcf init --namespace <DeinNamespace> --name <KomponentenName> --template field --run-npm-installTipp 1: React verwenden
Falls du für die Entwicklung deiner Komponente gerne React verwenden möchtest, kannst du dem oben erwähnten Befehl einfach noch das Flag --framework react hinzufügen. Mehr Infos hier.
Wie ist die Projektstruktur aufgebaut
Die Projektstruktur eines PCF Components ist klar gegliedert: Im Ordner mit dem Namen deiner Komponente liegen die zentralen Dateien wie das ControlManifest.Input.xml mit allen Metadaten wie Name, Eigenschaften und Ressourcen sowie die index.ts, die den Einstiegspunkt für die Logik bildet. Auf Projektebene finden sich ausserdem Konfigurationsdateien wie package.json (Abhängigkeiten und Skripte) und tsconfig.json (TypeScript-Einstellungen). Diese Struktur sorgt dafür, dass Metadaten, Logik und Darstellung übersichtlich voneinander getrennt bleiben.
Tipp 2: versteckte & experimentelle Features aktivieren
Um versteckte bzw. experimentelle Features aktivieren zu können, kann auf der Grundebene des Projekts eine featureconfig.json Datei angelegt werden. In dieser Config können dann beispielsweise Features wie CustomEvents oder Theming aktiviert werden.
Alle Feature Optionen und deren Standartwert sind unter ./node_modules/pcf-scripts/featureflags.json zu finden.
ControlManifest im Überblick
Das ControlManifest definiert die grundlegenden Metadaten und Einstellungen deiner PCF-Komponente. Im control Bereich werden Namespace, Version, der Konstruktorname sowie die Anzeigenamen und Beschreibungen festgelegt – diese bestimmen, wie die Komponente in Power Apps erscheint.
Mit property können Ein- und Ausgabewerte für die Komponente definiert werden. In diesem Beispiel haben wir ein sampleProperty vom Typen SingleLine.Text welcher sowohl als Input wie auch als Output Wert verwendet werden kann. Eine genaue Beschreibung, welche Datentypen es gibt oder welche weiteren Einstellungsmöglichkeiten für ein Property-Feld existieren, sieht man hier.
Der Bereich resources gibt an, welche Dateien eingebunden werden, hier also die index.ts als Einstiegspunkt für die Logik. Zusammen mit dem auf control Ebene definierten constructor weis die Komponente nun dass sie die index.ts Datei und die darin enthaltene KomponentenName Klasse als Einstiegspunkt verwenden kann. Wenn zusätzliche files wie z.B. ein style.css geladen werden sollen, können diese hier angegeben werden.
Weitere Details zu möglichen Einstellungen sind hier dokumentiert.
Einstiegspunkt und Funktion
Die index.ts ist der Einstiegspunkt der PCF-Komponente und enthält die gesamte Logik. Im Kopfbereich werden die Typen IInputs und IOutputs aus dem generierten Manifest importiert, damit die Komponente streng typisiert ist. Die Klasse selbst implementiert das ComponentFramework.StandardControl-Interface, wodurch alle nötigen Methoden wie init, updateView, getOutputs und destroy verfügbar sind.
In der init-Methode wird die Komponente initialisiert. Dies ist der einzige Ort, an dem wir Zugriff au die notifyOutputChanged Funktion und das state wie auch das container Objekt haben. Aus diesem Grund empfehle ich diese in der init-Methode direkt in eine Variabel zu schreiben, damit wir auch später noch Zugriff darauf haben. Zusätzlich befindet sich im init-Bereich alles, was die Komponente initialisiert. In unserem Fall wird hier beispielsweise eine Div-Komponente erstellt und dem RenderContainer hinzugefügt.
Die updateView-Methode reagiert auf Änderungen im Kontext. Diese wird also jedes mal ausgeführt wenn sich beispielsweise ein Input property ändert. Hier befindet sich nun also die Update Logik, welche unsere Komponente den neuen Gegebenheiten anpasst.
Mit getOutputs könnten Werte zurück an Power Apps übergeben werden. Wenn wir also im ControlManifest ein output oder bound Property definiert haben, können wir hier den entsprechenden Wert zurückgeben welcher dann in der App verfügbar ist. Wenn wir den Wert eines dieser Output Properties ändern möchten, müssen wir die notifyOutputChanged Funktion aufrufen. Anschliessend können wir über die PowerApp mit der getOutputs-Funktion die aktuellsten Werte abfragen.
Schliesslich dient destroy dazu, Ressourcen oder Eventlistener aufzuräumen, wenn die Komponente entfernt wird.
Praxistipps zum Schluss
Während der Entwicklung einer Komponente kann mit dem Befehl npm run start:watch ein Entwicklungsserver gestartet werden. Dabei wird die Komponente automatisch neu gebaut, und in einem sich öffnenden Browserfenster lässt sich ihr aktuelles Aussehen und Verhalten direkt testen. Wichtig zu beachten ist jedoch, dass diese Playground-Umgebung keine echte Power Apps-Umgebung simuliert. Das bedeutet: Nur weil etwas im Entwicklungs-Playground funktioniert, heisst das nicht, dass es sich im produktiven Einsatz identisch verhält. Um sicherzugehen, bleibt nur die Möglichkeit, die Komponente regelmässig in einem eigenen Tenant bereitzustellen und dort realitätsnah zu testen.
Um die Komponente möglichst effizient in einem Tenant veröffentlichen zu können, empfiehlt es sich, ein eigenes Publish-Script zu definieren. Dafür kann im package.json im Bereich scripts ein zusätzlicher Eintrag mit dem Namen „publish“ ergänzt werden. Dieses Script automatisiert den Veröffentlichungsprozess und kann beispielsweise so aussehen:
{
...
"scripts": {
...
"publish": "pac pcf push --solution-unique-name PCFTestSolution"
},
...
}Wichtig ist dabei, dass „PCFTestSolution“ durch den eigenen Solution-Namen ersetzt wird. Dieser Name bestimmt, in welcher Solution die Komponente veröffentlicht wird. Möchte man die Komponente anschliessend im eigenen Tenant bereitstellen, müssen lediglich die folgenden Befehle ausgeführt werden:
pac auth create --url https://<dein-org>.crm4.dynamics.com <--- Dieser Befehl muss nur einmal ausgeführt werden
npm run publishWichtig: Vor jeder Veröffentlichung muss der Version-Parameter in der ControlManifest.Input.xml angepasst werden. Die Power Platform erkennt Änderungen an einer Komponente nur dann zuverlässig, wenn die neue Versionsnummer höher ist als die zuvor veröffentlichte.
Happy Coding! 😁
Beitrag teilen
Geschrieben von
Simon Gander
Content Services Developer
Profil anzeigen