Microsoft Power Apps gibt es ja schon länger, damit können schnell codearme, individuelle Apps erstellt werden. Neu ist allerdings, dass nun eigene Module ergänzt werden können. Dieses Feature befindet sich aktuell in der Preview-Phase für Canvas Apps.
Power Apps sind nun die Fachbereichsuser wieder in der Lage, auch für ihren Anwendungsfall maßgeschneiderte Lösungen zu erstellen. Die Sicherheit der Daten ist gewährleistet, man muss sich nicht darum kümmern, dass die Applikation in einem Appstore veröffentlicht wird und die Freigabe der Apps innerhalb einer Organisation ist ganz einfach möglich. Diese Hürden nimmt die Power Apps App dem Endbenutzer ab. So können sehr nützliche Anwendungen für den Fachbereich individuell entwickelt werden, die sich auch durch leichtes Bedienen auszeichnen.
Microsoft liefert für die Power Apps eine Unzahl an Controls mit, doch leider erreicht man teilweise die Grenzen der Umsetzung, da für einen gewissen Anwendungsfall die erforderlichen Controls fehlen. Microsoft bietet uns als Entwickler nun die Möglichkeit, zusätzliche Controls für ein Unternehmen zur Verfügung zu stellen.
In die Erstellung von Controls will ich euch einen kurzen Einblick geben. Da ja momentan Vorweihnachtszeit ist, und die meisten von uns bald zuhause einen Christbaum haben: Warum nicht mal einen Weihnachtsbaum in einer PowerApp einbauen? 😊
Einen Weihnachtsbaum in die App einfügen geht ja ganz einfach – Bild einfügen und fertig. Nein, so einfach machen wir es nicht. Ich will nur mit CSS einen Baum zeichnen, und vielleicht möchten wir ja anhand der Daten mehrere Bäume einfügen.
Ich hab mich entschieden, es in React zu machen, warum kommt später.
Zuerst machen wir mal einen HTML Code und mit ein wenig CSS Magie einen Baum :
<div className="fir">
<div className="fir__item"></div>
<div className="fir__item"></div>
<div className="fir__item"></div>
<div className="fir__log"></div>
</div>
Jetzt starten wir endlich mit der Power App Control. Die Microsoft hat dazu ein Getting-Started Tutorial gemacht, das findet ihr hier, dort steht auch, wie ihr eure Entwicklungsumgebung einrichtet, für Power App Controls:
https://docs.microsoft.com/en-us/powerapps/developer/component-framework/create-custom-controls-using-pcf
Ich mache eine neue Tree-Componente in React und kopiere mal das HTML in die Renderer-Methode. Das CSS muss ich noch im Manifest zur Power App Componente hinzufügen.
In der index.ts noch die Tree-Componente einbauen und schon haben wir den Baum in der Componente. Das Development-Environment startet man mit “mpn start”. Es wird automatisch der Browser geöffnet und ihr solltet im Browser die Testumgebung sehen.
Ein Baum ist ja schön, aber eigentlich wäre es nett, wenn wir über einen Parameter mehrer Bäume zeichnen könnten. Wir wollen ja den Wald vor lauter Bäume nicht mehr sehen 😊
Den Parameter bekommen wir mit folgenden Zeilen. In der folgenden Zeile können wir elegant, den Wert “undefined” auf den Wert 1 setzen.
let numberOfTrees = context.parameters.numberOfTrees.raw || 1
Der Grund, warum ich es in react gemacht habe: Wenn ich jetzt mehre Bäume haben möchte, brauche ich nur ein array mit einer gewissen Anzahl erstellen.
const repeater: Array<{}> = [...Array(this.props.numberOfTrees)];
Dieses Array müssen wir nur noch durchiterieren, das mache ich mit Array.map. Wichtig bei wiederholenden Elementen muss zwingend ein Komponentenkey gesetzt werden, damit der UI-Updater auch weiß, welche Componente sich geändert hat.
repeater.map((e,i)=> (<TreeComponent key={'tree'+i} />) )
Noch den Baum aufputzen, weil ohne Kugeln ist der Christbaum ja nur halb so schön. Da wir auch in der Applikation die Kugeln steuern wollen, benötigen wir einen zweiten Parameter.
Weitere Details findet ihr im Sourcecode des GIT Repository: https://github.com/cubidobusinesssolutions/PowerAppChristmasControl
Es ist zwar schön, dass wir in der Entwicklungsumgebung jetzt die Componente haben, doch eigentlich wollen wir diese ja in der Power App verwenden. Für die Veröffentlichung gibt es natürlich eine Schritt-für-Schritt-Anleitung von Microsoft: https://docs.microsoft.com/en-us/powerapps/developer/component-framework/import-custom-controls
Grob zusammengefasst, sind folgende Schritte nötig
Wir haben jetzt alles vorbereitet, jetzt kommen wir endlich zur Erstellung unserer Power App:
WICHTIG, wir finden unsere Componente noch nicht. Die Anleitung von der Microsoft findet ihr hier: https://docs.microsoft.com/en-us/powerapps/developer/component-framework/component-framework-for-canvas-apps#add-components-to-a-canvas-app
Weil es aktuell noch ein Preview Feature für Canvas APP ist, muss die Funktionalität extra freigeschaltet werden.
Jetzt können wir unser Custom Component in die APP importieren :
Jetzt können wir unsere Componente hinzufügen:
Die Textboxen noch schnell an das Control binden:
Testen, freuen, dass alles so schnell gegangen ist.
Damit die Parameter in der App während der Laufzeit eingegeben werden können, noch 2 Text Boxen vom Typ Number hinzufügen und die Parameter binden.
In diesem Sinne wünsche ich euch schöne Weihnachten! 😊
