Power Apps Component Framework
Für Anforderungen, die sich nicht mit den OOB Controls im Power Apps Studio umsetzen lassen, hat Microsoft eine Möglichkeit geschaffen, selbst entwickelte Code-Komponenten in Power Apps zu integrieren. In diesem Deep Dive erstellen wir eigene Controls mit Power Apps.
Es werden sowohl Model-Driven als auch Canvas-Apps unterstützt. Möglich ist dabei so ziemlich alles, was Javascript und HTML hergeben - natürlich inklusive der großen Frameworks Angular und React.
Für den Deep Dive werden wir eine Beispielkomponente von Microsoft als Basis nehmen und sie etwas ergänzen.
Tooling
Damit am Ende ein handliches Zip-File entsteht, das wir in unsere Power Apps Umgebung importieren können, muss Folgendes installiert sein:
- Npm
- .NET Framework 4.6.2 Developer Pack
- .NET Core 3.1 SDK
- Visual Studio Code
- MSBuild (oder Visual Studio 2017/2019)
- Power Apps CLI
Los geht's
Wir kopieren von hier den Ordner für die Beispielkomponente TS_IFrameControl und öffnen am Zielort ein Kommandozeilenfenster.
Nach dem Ausführen von npm install sind alle nötigen Pakete vorhanden.
Wir können nun VSCode aufrufen und uns die Datei TSIFrameControl\index.ts anschauen, wo sich die eigentliche Implementierung befindet.
Das Control definiert die zwei Properties Latitude und Longitude, mit deren Hilfe eine bing maps URL erzeugt wird, die anschließend als src-Parameter an ein Iframe übergeben wird.
Als kleine Demo definieren wir ein neues Property URL und verwenden dieses an Stelle der bing-URL für das Iframe.
Dazu fügen wir folgendes zur Liste der Properties in ControlManifest.Input.xml ein:
<property name="url" display-name-key="url_Display_Key" description-key="url_Desc_Key" of-type="SingleLine.Text" usage="bound" required="true" />
Als nächstes wird die Methode updateBingMapURL um den Parameter url erweitert, den wir an das Iframe übergeben:
Zu guter Letzt noch den Aufruf der Methode in updateView() anpassen und das URL-Property aus dem Kontext übergeben:
Das Component Framework wird updateView() jedes Mal erneut aufrufen, sobald sich ein Property unserer Komponente ändert.
Um das zu testen führen wir npm start watch in der Kommandozeile aus. Es öffnet sich eine praktische Testumgebung mit unserer Komponente im Browser.
Hier lässt sich die Komponente interaktiv testen und wir können alle Properties über ein eigenes Panel editieren.
Führen wir nun eine Codeänderung durch, in dem wir beispielsweise die Breite des Iframes unter css\TS_IFrameControl.css ändern, führt dies automatisch zu einer Aktualisierung der Preview in der Testumgebung.
Paketierung
Um die fertige Komponente in Power Apps testen zu können fehlt noch die Erstellung eines Solution Package. Folgende Befehle sind hierfür über die CLI auszuführen:
- Anlegen eines Ordners Solutions im Projektverzeichnis über mkdir Solutions und Wechsel dorthin über cd solutions
- Anlegen eines Common Data Service-Lösungsprojekts mit
pac solution init --publisher-name apptech --publisher-prefix at - Hinzufügen der Projektreferenz zur Lösung über
pac solution add-reference --path c:\Projects\TS_IFrameControl - Anpassen des Lösungsnamens und anderer Einstellungen im Solution Manifest unter
Solution\src\Other\Solution.xml - Paket erstellen mit MSBuild (Pfad zu MSBuild.exe kann abweichen)
"C:\Program Files (x86)\Microsoft Visual Studio\2019\Enterprise\MSBuild\Current\Bin\MSBuild.exe"/t:build /restore
Das fertige ZIP-Paket können wir anschließend aus dem Ordner Solution\bin\Debug in die Projektmappen unter https://make.powerapps.com/ importieren.
Komponente in der Canvas App testen
Nachdem die Lösung erfolgreich im Hintergrund importiert wurde, erscheint sie in der Liste unter Projektmappen. Damit wir die Code Component auch Canvas Apps verwenden dürfen, muss noch ein Schalter in den Umgebungseinstellungen im Power Apps Admin Center aktiviert werden. Den Schalter findet ihr unter Umgebungen > Einstellungen (selektierte Umgebung) > Produkt > Funktionen
Erstellen wir nun eine neue Canvas App im Power Apps Studio, können wir unsere selbstgebaute Komponente über Einfügen > Benutzerdefiniert > Komponente importieren hinzufügen:
Nun taucht das Control auch direkt in der Liste der verfügbaren Komponenten unter Codekomponenten auf und lässt sich beliebig oft in der App verwenden.
Um das zu testen verwenden wir das Iframecontrol zudammen mit einer Texteingabe und binden das URL-Property an die Text-Eigenschaft des Eingabefeldes:
Fazit
Über das Component Framework lassen sich wunderbar genau die spezifischen Funktionen ergänzen, die ansonsten von Haus aus nicht umsetzbar wären. Damit erschließen sich gänzlich neue Anwendungsbereiche für Power Apps und es lässt sich auch die eine Spezialfunktion umsetzen, die sich der Kunde so sehr wünscht, die aber mit Bordmitteln nicht machbar ist.