Einleitung:
Beim Erstellen von Power Apps Canvas-Apps kann es schnell lästig werden, ständig dieselben Elemente neu anzulegen und anzupassen. Hier kommen eigene Komponenten ins Spiel: Einmal erstellt, kannst du diese Bausteine in unterschiedlichsten Apps und Screens wiederverwenden. Du sparst damit Zeit, schaffst ein einheitliches Erscheinungsbild und erhöhst die Qualität deiner Anwendungen. Zudem bieten erweiterte Komponenteneigenschaften künftig noch mehr Flexibilität – allerdings mit gewissen Einschränkungen. In diesem Beitrag erfährst du, wie du deine ersten Komponenten erstellst, anpasst und diese neuen Möglichkeiten optimal nutzt. Außerdem schauen wir uns an, was es mit Komponentenbibliotheken auf sich hat und welche Vorteile sie bieten.
Was sind Komponenten in Power Apps Canvas-Apps?
Komponenten sind wiederverwendbare Elemente, die aus Steuerelementen, Layouts und Logiken bestehen. Statt bei jeder neuen App von vorn zu beginnen, definierst du einmal deine Bausteine und nutzt sie anschließend in vielen Apps. Änderungen an einer Komponente wirken sich automatisch überall dort aus, wo sie verwendet wird. Das Ergebnis: mehr Effizienz, einheitliches Design und weniger Pflegeaufwand.
Schritt-für-Schritt: Eine Komponente erstellen
- App öffnen und Komponentenbereich aufrufen:
Öffne deine App im Power Apps Studio. Links siehst du die Baumansicht mit deinen Bildschirmen. Wechsle bei Bedarf über „Einfügen“ > „Komponente“ in den Komponentenbereich. - Neue Komponente anlegen:
Klicke auf „Neue Komponente erstellen“, um eine leere Arbeitsfläche zu erhalten, auf der du deine Steuerelemente platzieren kannst. - Steuerelemente einfügen und gestalten:
Füge Buttons, Labels, Icons oder andere Controls hinzu. Überlege schon jetzt, welche Eigenschaften später dynamisch sein sollen (z. B. Farben, Texte, Sichtbarkeit). - Benutzerdefinierte Eigenschaften hinzufügen:
Über „Benutzerdefinierte Eigenschaften“ steuerst du, welche Parameter von der App an die Komponente (Input) und welche von der Komponente an die App (Output) übergeben werden.- Definiere z. B. eine Eingabeeigenschaft für die Hintergrundfarbe oder eine Ausgabeeigenschaft für einen berechneten Wert.
- Weitere Infos findest du in der Dokumentation zu Komponenteneigenschaften.
- Komponente verwenden:
Wechsel zurück zum Screen deiner Wahl und füge die neu erstellte Komponente ein. Unter „Einfügen“ > „Benutzerdefiniert“ findest du sie jetzt. Platziere sie im Screen, passe ihre Eigenschaften an – fertig!
Erweiterte Komponenteneigenschaften (Vorschau): Mehr Möglichkeiten, aber mit Einschränkungen
Microsoft arbeitet an erweiterten Komponenteneigenschaften, die sich derzeit in der Vorschau (Preview) befinden. Diese experimentellen Funktionen kannst du normalerweise unter Einstellungen > Aktualisierungen > Vorschau aktivieren. Sie geben dir noch mehr Kontrolle über Daten, Funktionen, Aktionen und Ereignisse innerhalb deiner Komponenten. Damit kannst du beispielsweise komplexere Logik integrieren oder gezielt steuern, wann und wie deine Komponente auf externe Ereignisse reagiert.
Hinweis: Bei ganz neuen Apps kann es vorkommen, dass diese erweiterten Komponenteneigenschaften bereits standardmäßig aktiviert sind.
Wichtig: Diese erweiterten Komponenteneigenschaften funktionieren derzeit nicht in Komponentenbibliotheken. Das bedeutet, wenn du deine Komponenten über Bibliotheken verwaltest und verteilst, kannst du die Vorschau Funktionen dort momentan nicht nutzen.
Arten von Eigenschaften in Komponenten – mit Beispielen
- Dateneigenschaften:
Diese Eigenschaften dienen dem Austausch von Informationen zwischen der App und der Komponente.
Beispiel:- Eingabe-Dateneigenschaft: TitleColor (eine Farbe, die von der App an die Komponente übergeben wird, um z. B. den Titel in der gewünschten Corporate-Farbe darzustellen).
- Ausgabe-Dateneigenschaft: SelectedValue (eine Zahl oder ein Text, die/das die Komponente zurückgibt, etwa den Wert eines Schiebereglers oder die Auswahl eines Dropdown-Menüs).
- Funktionseigenschaften:
Diese Eigenschaften ermöglichen die Bereitstellung oder Nutzung von Logik in Form von Funktionen, die von der Komponente oder der App definiert werden. Sie greifen nicht auf interne Variablen zu und nehmen nicht am Datenfluss teil.
Beispiel:- Ausgabe-Funktion: FormatDateString(DateValue): Die Komponente stellt eine Funktion bereit, bei der du ein Datum übergibst und als Rückgabe einen formatierten Text erhältst (z. B. “Montag, 1. Januar 2024”).
- Eingabe-Funktion: CalculateDiscount(OriginalPrice, DiscountRate): Die App definiert eine Funktion, die von der Komponente aufgerufen wird, um einen rabattierten Preis zu berechnen.
- Aktionseigenschaften:
Ähnlich wie Funktionseigenschaften, erlauben Aktionseigenschaften jedoch Nebeneffekte. Sie können also nicht nur einen Wert zurückgeben, sondern auch Sammlungen manipulieren oder Variablen ändern.
Beispiel:- Ausgabe-Aktion: ClearData(): Die Komponente stellt eine Aktion bereit, die beim Aufruf alle internen Sammlungen oder Variablen zurücksetzt, um sie auf einen Ausgangszustand zu bringen.
- Ausgabe-Aktion: RefreshItems(): Die Komponente löst eine Aktion aus, die in der App z. B. einen erneuten Datenabruf anstößt.
- Ereigniseigenschaften:
Diese Eigenschaften erlauben es der Komponente, Ereignisse auszulösen, auf die die App mit eigener Logik reagieren kann. Das funktioniert ähnlich wie ein OnSelect-Ereignis bei einem Button.
Beispiel:- Eingabe-Ereignis: OnItemSelected(): Wenn innerhalb der Komponente ein Benutzer ein Element anklickt, ruft die Komponente diese Ereigniseigenschaft auf. Die App kann dann darauf reagieren, etwa indem sie zusätzliche Details zum ausgewählten Element anzeigt oder Daten im Hintergrund lädt.
- Eingabe-Ereignis: OnValueChanged(): Sobald der Wert eines Schiebereglers in der Komponente angepasst wird, löst diese ein Ereignis aus, das die App nutzen kann, um z. B. sofortige Berechnungen oder UI-Updates durchzuführen.
Standardwerte für Eigenschaften oder Argumente helfen, erwartete Datenschemata festzulegen, wodurch klar ist, welche Datenstruktur genutzt werden soll.
Komponentenbibliotheken: Der empfohlene Weg zur Wiederverwendung – aber ohne erweiterte Eigenschaften
Statt Komponenten direkt in einzelnen Apps zu erstellen, empfiehlt Microsoft, sie in Komponentenbibliotheken abzulegen. Eine Komponentenbibliothek ist ein zentrales Repository, in dem du deine Komponenten verwalten, aktualisieren und für andere freigeben kannst. Nutzen App-Entwickler deine Bibliothek, werden sie benachrichtigt, sobald Aktualisierungen verfügbar sind, und können ihre Apps problemlos auf den neuesten Stand bringen.
Wichtige Punkte zu Komponentenbibliotheken:
- Zentrales Management: Alle Komponenten befinden sich an einem Ort.
- Einfache Updates: App-Ersteller werden informiert, wenn neue Versionen von Komponenten verfügbar sind.
- Empfohlene Methode: Anstatt Komponenten von App zu App zu kopieren, setzt du auf eine Bibliothek, um späteren Pflegeaufwand und Inkonsistenzen zu vermeiden.
Um eine Komponentenbibliothek für Power Apps Canvas-Apps zu erstellen, gehst du wie folgt vor:
- Power Apps öffnen:
Melde dich bei Power Apps (https://make.powerapps.com) mit deinem Microsoft 365- oder Azure Active Directory-Konto an. - Zur Komponentenbibliothek navigieren:
In der linken Navigation findest du normalerweise Einträge wie „Apps“, „Flows“ etc. Wähle dort den Bereich Komponentenbibliotheken aus.- Falls du den Eintrag nicht sofort siehst, klicke links unten auf Mehr > Alles entdecken, und suche anschließend unter „App-Erweiterungen“ den Eintrag Komponentenbibliotheken.
- Optional kannst du dir diesen Bereich anpinnen, damit du beim nächsten Mal schneller darauf zugreifen kannst.
- Neue Komponentenbibliothek erstellen:
Klicke oben links auf Neue Komponentenbibliothek.- Vergib einen aussagekräftigen Namen für deine Bibliothek, z. B. „Standard-UI-Komponenten“.
- Optional kannst du eine Beschreibung hinzufügen, damit andere später wissen, wofür die Bibliothek gedacht ist.
- Komponenten hinzufügen:
Nachdem du die leere Komponentenbibliothek geöffnet hast, befindet du dich in einer Ansicht, die dem Power Apps Studio ähnelt. Hier kannst du nun deine Komponenten erstellen und bearbeiten – ganz so, wie du es aus deinen Apps kennst:- Erstelle eine neue Komponente, indem du im linken Menü auf Komponenten klickst und dann Neue Komponente erstellen auswählst.
- Füge die gewünschten Steuerelemente (Buttons, Labels, Icons, etc.) ein, definiere benutzerdefinierte Eigenschaften und richte die Komponenten nach deinen Vorstellungen ein.
- Komponenten testen (optional):
In einer Komponentenbibliothek kannst du auch Bildschirme erstellen, um deine Komponenten zu testen. Diese Bildschirme dienen nur Testzwecken innerhalb der Bibliothek und werden nicht als eigenständige App bereitgestellt. Sie sind hilfreich, um deine Komponenten in einer realistischen Umgebung auszuprobieren, bevor du sie freigibst. - Speichern und Versionieren:
Wenn du mit der Erstellung deiner Komponenten zufrieden bist, speichere deine Bibliothek über Datei > Speichern.- Du kannst beim Speichern einen Versionshinweis eingeben, um später nachvollziehen zu können, welche Änderungen in welcher Version vorgenommen wurden.
- Anschließend kannst du die Bibliothek veröffentlichen, damit sie für andere App-Entwickler in deiner Organisation verfügbar wird.
- Bibliothek freigeben und nutzen:
Sobald deine Komponentenbibliothek veröffentlicht ist, können andere App-Entwickler sie über Einfügen > Holen Sie sich mehr Komponenten in ihren eigenen Apps verwenden.- Gib die Bibliothek und/oder die enthaltenen Komponenten ggf. für andere Benutzer oder Gruppen frei, damit sie darauf zugreifen können.
- Wenn du Änderungen oder neue Versionen an der Bibliothek veröffentlichst, werden App-Entwickler benachrichtigt, dass eine aktualisierte Version verfügbar ist, die sie in ihre Apps einbinden können.
Einschränkungen:
- Keine erweiterten Komponenteneigenschaften: Aktuell unterstützen Komponentenbibliotheken keine experimentellen, erweiterten Eigenschaften. Möchtest du diese nutzen, musst du die Komponenten (noch) in einer einzelnen App erstellen.
- Keine Bearbeitung in der Bibliothek aktivierter Komponenten in der App: Wird eine Komponente aus der Bibliothek verwendet, kannst du sie nicht direkt in der App bearbeiten, ohne sie lokal zu kopieren.
- Dataverse und Berechtigungen: Das Teilen einer Bibliothek funktioniert ähnlich wie das Teilen einer App. Berechtigungen können auf Besitzer- oder Mitbesitzerebene vergeben werden.
Updates und Versionierung:
Wenn du deine Komponentenbibliothek aktualisierst und veröffentlichst, können App-Ersteller die neuen Versionen in ihre Apps übernehmen. Falls du Anpassungen nicht zulässt, bleiben deine Komponenten in der App unverändert. Erlaubst du Anpassungen, können App-Ersteller lokale Kopien anlegen, um diese individuell anzupassen.
Warum sich das lohnt
Eigene Komponenten sparen dir auf Dauer eine Menge Zeit und sorgen für ein einheitliches Erscheinungsbild deiner Apps. Komponentenbibliotheken sind der nächste Schritt: Sie machen das Verteilen, Aktualisieren und Wiederverwenden von Komponenten einfacher als jemals zuvor. Die experimentellen, erweiterten Eigenschaften bieten noch mehr Flexibilität, doch bislang nicht in Kombination mit Bibliotheken. Halte dich über die Weiterentwicklungen auf dem Laufenden – möglicherweise wird diese Lücke in Zukunft geschlossen.
Tipps & Best Practices:
- Sprechende Namen verwenden:
Gib Komponenten und Eigenschaften eindeutige, verständliche Namen. - Schrittweise vorgehen:
Beginne mit einfachen Komponenten und erweitere diese nach Bedarf. - Dokumentation nutzen:
Notiere, welche Eigenschaften deine Komponente hat und was sie tut. Das erleichtert die Wiederverwendung. - Feedback geben:
Da die erweiterten Eigenschaften noch in der Erprobungsphase sind, freut sich Microsoft über Rückmeldungen in den Power Apps-Communityforen.
Fazit:
Eigene Komponenten machen dich unabhängiger von ständigem Copy & Paste und sorgen für mehr Konsistenz und Professionalität in deinen Power Apps Canvas-Apps. Komponentenbibliotheken heben dieses Prinzip auf die nächste Stufe, indem sie ein zentrales, verwaltetes Repository für wiederverwendbare Bausteine bieten. Die experimentellen erweiterten Komponenteneigenschaften eröffnen dir außerdem neue Möglichkeiten, um deine Komponenten noch mächtiger und flexibler zu gestalten – aktuell allerdings nur außerhalb von Bibliotheken. Nutze diese Tools, um deine Apps effizient, robust und zukunftsfähig zu entwickeln.
Weiterführende Ressourcen:
- Komponenten erstellen in Canvas-Apps
- Komponenteneigenschaften verwalten (experimentell)
- Komponentenbibliothek verwenden
- Power Apps Community: Inspiration, Fragen & Antworten sowie Best Practices
Viel Spaß beim Ausprobieren und Weiterentwickeln deiner Komponenten!
