Inhalt des Artikels

Bisher gab es noch nicht die Möglichkeit wiederverwendbare Komponenten in Microsoft PowerApps zu nutzen. Zwar ist es möglich, einzelne Komponenten per „Copy & Paste“ zu kopieren und an einer benötigten Stelle einzufügen.

Möchte man jedoch Änderungen an dieser Komponente vornehmen, muss diese Änderungen an allen kopierten Komponenten einzeln vorgenommen werden. Mit der Einführung, von wiederverwendbaren Komponenten, können Sie die Komponente einmalig erstellen, beliebig oft in die Canvas-App einfügen und anschließend alle zeitgleich bearbeiten.

Bisher handelt es sich bei dem Feature lediglich um ein experimentelles Feature. Was bedeutet, dass Sie es in den erweiterten App-Einstellung aktivieren müssen und es keine Garantie gibt, dass es in Zukunft tatsächlich veröffentlicht wird. In dem folgenden Artikel erklären wir Ihnen, wie Sie experimentelle Features freischalten und für was Sie wiederverwendbare Komponenten nutzen können.

Component PowerApps

Freischalten von experimentellen Features in PowerApps

Um die erweiterten Einstellungen zu öffnen, müssen Sie die App zuerst im PowerApps Studio öffnen.

Component PowerApps

Anschließend klicken Sie auf „File“ und wählen „Advanced settings“ aus.

Component PowerApps

Component PowerApps

Ganz oben erscheinen die Preview Features. Scrollen Sie weiter runter kommen die Experimental Features. Aktivieren Sie das Feature „Components“.

Component PowerApps

Bitte beachten Sie, dass bei den Preview Features, die Funktion „Improved App Rendering“ aktiviert sein muss.

Component PowerApps

Erstellen einer wiederverwendbaren Komponente in Microsoft PowerApps

Ist das Feature freigeschaltet, können Sie unter „Insert“ und „Components“ eine neue Kompnente erstellen.

Component PowerApps

Wir möchten einen wiederverwendbaren Header erstellen. Deshalb ändern wir zuerst den Namen der Komponente und auch die Proportionen. Die Standardproportionen liegen bei 640x640.

Component PowerApps

Component PowerApps

Wir fügen ein Label ein. Ein Label kann einen Text, Nummern, Daten oder Währungen enthalten. Uns geht es lediglich um einen Text.

Component PowerApps

Unter den Icons wählen wir das Zurück-Icon aus.

Component PowerApps

Passen Sie Größe und Position der beiden Elemente an. Wählen Sie das Zurück-Icon aus und wählen Sie als Funktion, die Back-Funktion aus.

Component PowerApps

Als nächstes fügen wir ein Bild ein. Das Element soll dynamisch sein und das Bild des Nutzers beinhalten. Wählen Sie das Bildelement aus und tippen Sie die User-Formel ein.

Component PowerApps

Component PowerApps

Erstellen von Custom Properties in Microsoft PowerApps

Jetzt ist es Zeit Custom Properties zu erstellen und diese in der Komponente zu verwenden. Mit den Custom Properties können beispielsweise Füllfarbe, Farbe, Proprtionen und vieles mehr bestimmt werden. Referenzieren Elemente in einer Komponente auf eine Custom Property und es werden Anpassungen in der Custom Property vorgenommen, sind diese Änderungen sofort für alle Komponenenten aktiv.

Als Datentypen stehen beispielsweise Wert, Text, Tabelle oder Farbe zur Verfügung. So können erfahrene PowerApps User Elemente automatisch in der Größe anpassen lassen, wenn die Größe der Komponente sich verändert.

Zuerst erstellen wir eine Farbe. Achten Sie besonders auf den Property Name. Dieser ist einzigartig und wird später in der Formel wiederverwendet. Wählen Sie als Property Type „Input“ aus und als Datentyp „Color“.

Component PowerApps

Klicken Sie jetzt auf Color, können Sie eine Standardfarbe bestimmen.

Component PowerApps

Jetzt möchten wir, dass die beiden Elemente (Zurück-Icon und Text) auf das Color Property referenzieren. Hierfür klicken Sie das Element an, wählen die Schriftfarbe aus und geben als Formel „NameDerKomponente.NameDerProperty“ an. In unserem Fall also, „Header.Color“.

Component PowerApps

Jetzt möchten wir die Füllfarbe unserer Komponente anpassen.

Component PowerApps

Bedingt durch das dunkle Blau sind wir nicht mehr in der Lage die beiden eingefügten Elemente zu sehen. Damit diese wieder gut sichtbar werden, wählen wir bei der Color Property Weiß aus. Dank der Referenzierung, ist bei beiden Elementen die Farbe angepasst.

Component PowerApps

Component PowerApps

Nun erstellen wir eine Text Property für unsere Komponente.

Component PowerApps

Wählen Sie nun das Text-Element aus und referenzieren Sie es auf das soeben erstellte Text Property.

Component PowerApps

Wird der Text für das Text Property jetzt angepasst, passiert dies automatisch auch auf unserer Komponente.

Component PowerApps

Verwenden einer wiederverwendbaren Komponente

Jetzt können wir die Komponente in der Applikation wiederverwenden. Wechseln Sie von Components auf Screens und fügen Sie die soeben erstellte Komponente in die Applikation ein.

Component PowerApps

Selbstverständlich können Sie die eingefügte Komponente und deren Elemente auch direkt in der App bearbeiten. Doch vorsicht, sollten Sie ein Element direkt in der App bearbeiten, für welches eine Custom Property erstellt wurde, werden Änderungen aus der Custom Property nicht mehr übernommen.

Component PowerApps

Fazit der wiederverwendbaren Komponenten in Microsoft PowerApps

Auch wenn es sich hierbei um ein exeprimentelles Feature handelt, und wir uns nicht sicher sein können, ob diese Funktion in Zukunft einmal tatsächlich zur Verfügung steht. Sind wir sehr optimistisch, Microsoft wird ein sehr ähnliches Feature, oder eben genau dieses veröffentlichen.

Gerade bei größeren Applikationen, wäre es überaus hilfreich gleiche Komponenten zentral zu bearbeiten. Ebenfalls gibt es die Möglichkeit, mithilfe von Collections und der LookUp Funktion, dynamische Textinhalte in den Komponenten anzeigen zu lassen.

So kann beispielweise der Name der Seite dynamisch angezeigt werden. Damit lassen manuelle Arbeiten, aufgrund von nachträglichen Änderungen, auf ein Minimum reduzieren.

Sie haben weitere Fragen? Kontaktieren Sie einen unserer Consultants oder hinterlassen Sie ein Kommentar.