Microsoft führt in PowerApps die Möglichkeit ein, eigene ‚Komponenten‘ zu definieren und diese über App-Grenzen hinweg wiederzuverwenden. In diesem Blog-Beitrag zeigen wir euch, wie ihr eure erste eigene Komponente in PowerApps erstellt.

Components in Preview-Umgebung einschalten

Ihr kennt sicherlich schon die ein oder andere Standardkomponente aus PowerApps, bspw. Galerien, zur Anzeige mehrerer Datensätze oder Formulare zum Erstellen oder Bearbeiten eben dieser. Nachfolgend zeige ich euch an einem kurzen Beispiel, wie ihr eine eigene Komponente ‚Menü‘ erstellt und diese anschließend innerhalb eurer App auf anderen Bildschirmen wiederverwendet.

Da sich die Funktion ‚Components‘ derzeit noch in der Preview befindet, müsst ihr euch vorab eine Preview-Umgebung erstellen. Navigiert euch dazu in das Admin Center und klickt oben rechts auf ‚Neue Umgebung‘. Wählt anschließend bei der Region ‚Preview‘ aus und erstellt eure Umgebung.

Anschließend könnt ihr wie gewohnt in der App-Übersicht eine neue Canvas-App erstellen. Da Components noch in der Preview sind, müsst ihr diese in den Einstellungen der App noch separat aktivieren.

Als erstes müssen wir innerhalb unserer App eine neue Komponente erstellen. Im Einfügen-Bereich findet ihr nun neben den üblichen Objekten ganz rechts die Komponenten. Erstellt hier eine neue Komponente. Im Objekt-Explorer seht ihr, dass nun nicht mehr die Screens, sondern die Komponenten dargestellt werden. Ihr könnt also einfach zwischen diesen beiden Ansichten wechseln.

Gebt eurer Komponente einen sinnvollen Namen und nehmt ggf. im Eigenschaftsbereich weitere Einstellungen vor (z.B. Ändern der Größe). Für unser Menübeispiel möchten wir gleich unsere Unternehmensfarben mit einbinden – da sich diese aber für jedes Unternehmen ändern können, sollte die Farbe dynamisch an unsere Komponente übergeben werden.

Komponenten mit In- und Output ermöglichen Flexibilität

Richtig gelesen! Eine der besonderen Eigenschaften von Komponenten ist die Fähigkeit sowohl Daten aus der eigentlichen App zu empfangen, aber auch wieder in die App zurückzuspielen. Dies machen wir uns gleich zunutze und definieren die Farbe unseres Menüs als sog. Custom Property. Schaut euch gerne auch die anderen Datentypen an und probiert einfach ein wenig aus.

Nun geht es daran, das eigentlich Menü zu designen. Kunst war noch nie meine Stärke, daher beschränke ich mich auf Rechtecke.

Fügt also ein oder mehrere Rechtecke hinzu und legt die ‚Fill‘-Eigenschaft auf die eben erstellte Custom Property fest (NameDerKomponente.NameDerEigenschaft, bei mir bspw. cmp_menue.menueColor).

Fertig ist unsere Menü-Komponente. Wechselt nun auf euren leeren Start-Screen und fügt eure Komponente hinzu. Anschließend könnt ihr in den Objekt-Eigenschaften eure benutzerdefinierte Eigenschaft festlegen und so die Menüfarbe wechseln.