Was ist das Power Apps Component Framework genau?
Das Power Apps Component Framework gibt uns als Software Entwickler:innen die Möglichkeit Code-Komponenten zu erstellen, um den Anwender:innen eine bessere Nutzererfahrung zu bieten.
Mit diesem Framework ist es zum Beispiel möglich, CRM Felder zu ersetzen und auf Basis der Feldwerte eine benutzerdefinierte Komponente zu erstellen.
Ein Anwendungsbeispiel hierfür ist es, ein Prozent-Zahlenfeld im CRM mit einem Schieberegler zu ersetzen, der von 0 bis 100 Prozent bewegt werden kann.
Warum ist es so mächtig?
Um die Macht dieses Frameworks zu Papier zu bringen, führen wir hier die wichtigsten Stärken an, damit Sie sich selbst ein Bild davon machen können:
- PCF Komponenten werden im selben Kontext gerendert und werden daher zur selben Zeit geladen, wie die anderen CRM-Komponenten. Das unterscheidet PCF Komponenten zum Beispiel von gewöhnlichen Webressourcen.
- Wiederverwendbarkeit: Generische PCF Komponenten können beliebig oft eingesetzt werden. Einmaliger Entwicklungsaufwand kann sich somit mehrfach auszahlen.
- Einmal implementierte Komponenten können zum Beispiel in Model Driven Apps und seit neuestem auch in Canvas Apps verwendet werden.
- Direkter Server-Zugriff: Per Web-API können Daten nahtlos abgefragt werden.
- Einfaches Deployment: Alle Dateien werden in einer einzigen Lösungsdatei gebündelt.
- Direkte Einbindung – keine nervigen Lade-Icons: Im Gegensatz zu Canvas Apps werden PCF Komponenten direkt mitgeladen.
Welche Skills und Tools benötigt man dafür?
Grundsätzlich reichen Kenntnisse in TypeScript und JavaScript aus, um dieses Framework nutzen zu können. Je mehr Erfahrung Sie mit Frameworks wie JavaScript, TypeScript, React und Angular haben, desto leichter wird Ihnen die Entwicklung einer PCF Komponente fallen.
Folgende Tools werden für den Start benötigt:
- .NET Framework 4.6.2
- Visual Studio Code
- NPM
- Microsoft Power Apps CLI
Arbeiten mit dem Power Apps Component Framwork
Projektanlage
Mit dem Power Apps Command Line Interface kann man in kurzer Zeit ein neues PCF Projekt anlegen. Dieses besteht aus einer Manifest-Datei, hier kann man das PCF Control definieren, Styling anbinden und diverse Features, wie zum Beispiel einen WebAPI-Zugriff, freischalten.
Des Weiteren findet man in der Projektstruktur ein TypeScript-File mit den wichtigsten vorgefertigten Methoden der Komponente: init, updateView und getOutputs. Hier passiert der Großteil der Implementierung.
Zu guter Letzt befindet sich ein CSS-File im Projekt, womit Sie das Erscheinungsbild der Komponente individuell anpassen können.
Hinweis auf unterstütze Frameworks
Entwickler:innen haben auch die Möglichkeit React für die Implementierung von PCF Controls zu verwenden. Sobald das Framework korrekt eingebunden ist, kann man mit der Erstellung der React Komponente beginnen. Diese können dann in der init-Methode des PCF Controls gerendert werden.
Testen
Mittels NPM Kommando kann die PCF Komponente lokal getestet werden. Der lokal instanziierten Testumgebung kann man Parameter mitgeben und darin auch die Ausgabewerte der Komponente einsehen. Somit kann man nicht nur optische Anpassungen schnell und einfach testen, sondern auch prüfen, ob die Komponente ebenso logisch richtig funktioniert.
Um die Qualität in der PCF Entwicklung zu gewährleisten, bietet es sich an ein JavaScript Testing Framework zu verwenden und mit Unit Tests diverse Testfälle abzudecken.
Deployment
Wenn die Entwicklung der Komponente abgeschlossen ist, kann man mithilfe der CLI Kommandos eine Lösung erstellen und diese schlussendlich zu einer zip.-Datei packen. Die fertige Solution Datei kann dann ganz einfach unter Lösungen im CRM importiert werden.
PCF Gallery
Da PCF Komponenten so generisch eingesetzt werden können und auch eine Vielzahl von Entwickler:innen mittlerweile erkannt haben, dass man mit diesem Framework großartige Lösungen bauen kann, gibt es inzwischen ein riesiges Portfolio an fertigen Komponenten. Dieses kann man unter https://pcf.gallery/ finden. Bevor man mit einer Umsetzung startet, empfiehlt es sich daher auf jeden Fall hier einen Blick reinzuwerfen.
PCF Builder
Wer sich mit den PCF CLI Kommandos nicht anfreunden kann, kann auf eine Visual Studio Extension zurückgreifen. Die Erweiterung „PCF Builder“ ermöglicht es den Entwickler:innen PCF Komponenten schneller zu bauen. Alle dafür notwendigen Kommandos erhält man direkt im Visual Studio Code als übersichtliche Dropdown Auswahl. Weitere Informationen zu diesem Tool finden Sie hier: PCF Builder.
Abschließendes
Mit diesem Blog-Artikel konnten Sie hoffentlich einige Informationen über das Power Apps Component Framework erhalten. Falls Sie weitere Informationen zu dieser Technologie wünschen, besuchen Sie gerne die offizielle Microsoft Power Apps Component Framework Dokumentation.