Canvas Apps smarter bauen: Tricks, die dir Zeit und Nerven sparen

titelbild powerapps canvasapps bauen

Veröffentlicht:

Autor: Andrea Furrer

Tags: Power Apps

Wer schon einmal eine Power Apps Canvas App gebaut hat, weiss: es gibt unzählige Wege, ans Ziel zu kommen – aber nicht alle sind gleich effizient, übersichtlich oder nachhaltig. Oft sind es die kleinen Kniffe, die den Unterschied machen: eine elegante Funktion, die einem Zeit spart, ein durchdachtes Konzept, das die Wartung erleichtert, oder einfach ein simpler Trick, der die App flüssiger macht.

In diesem Beitrag habe ich eine Sammlung solcher Tipps & Hacks zusammengestellt – eine bunte Mischung aus Best Practices, cleveren Funktionen und persönlichen Learnings. Manche davon sind echte Gamechanger, andere eher kleine Helferlein für den Alltag. Zusammen ergeben sie einen Werkzeugkasten, der dir beim Entwickeln von Canvas Apps das Leben deutlich einfacher macht.

Den Anfang machen die Lieblingstipps der PowerApps-Heroes der IOZ – ihre persönlichen Favoriten aus der täglichen Praxis. Danach folgen weitere Hacks und Empfehlungen, die sich im Laufe meiner eigenen Arbeit bewährt haben.

User-Objekt in Variable schreiben

Simon Gander

Der aktuelle User ist eine Information, die in den Apps häufig an diversen Orten gebraucht wird. Mit dem Set()-Befehl erstellst du eine Variable, die du initial, z.B. im OnStart der App lädst und dir anschliessend während der ganzen App-Session zur Verfügung steht. Liest du überall mit der User()-Funktion den aktuellen User aus, bedeutet dies jedes Mal eine neue Datenbankabfrage.

Set(recCurrentUser, User());

Ganze Collections patchen

Martin Achermann

Wenn du viele Datensätze auf einmal erstellen oder updaten möchtest, ist die naheliegendste Variante, einen ForAll-Loop zu machen, der jedes betroffene Element nach dem anderen in der Liste updatet.

Die effizientere Variante ist, eine Collection mit allen Datensätzen zu erstellen, die dann innert Millisekunden das Update aller Datensätze in einem Zug an die Liste sendet. Wichtige Voraussetzung: Alle Felder der Collection müssen mit Feldern auf der Liste matchen.

Clear(colAufgabenPatch);
    ForAll(
        colAufgabenVorlagen As tmpVorlage,
        Collect(
            colAufgabenPatch,
            {
                Title: tmpVorlage.Title,
                idProjekt: recCurrentItem.ID
            }
        )
    );
    Patch(Aufgabenliste, colAufgabenPatch);

Repetitiven Code vermeiden

Lian Eifert

Mit User-defined functions kannst du eigene Funktionen erstellen, die du überall in deinen Apps wiederverwenden kannst. So vermeidest du repetitiven Code und hältst deinen Code übersichtlich und konsistent.

Ein gängiger Use Case ist beispielsweise das Zusammenstellen eines validen Userobjekts, wie du es zum Patchen in eine SharePoint Liste benötigst:

Erstelle in den Formulas zuerst ein neues Objekt vom Typ „UserObject“ mit den Attributen Claims, DisplayName, Email, Department, JobTitle und Picture:

UserObject := Type( 
    { 
        Claims: Text, 
        DisplayName: Text, 
        Email: Text,
        Department: Text, 
        JobTitle: Text, 
        Picture: Text
    } 
);

Die selbst erstellte Funktion „MailToUser“, die eine Mailadresse vom Typ „Text“ erwartet, stellt dann die nötigen Inhalte für die verfügbaren Attribute zusammen:

MailToUser(Email:Text):UserObject = {
    Claims: "i:0#.f|membership|" & Lower(Email),
    DisplayName: If(!IsBlank(Email), Office365Users.UserProfileV2(Email).displayName),
    Email: Lower(Email)
};

Nun musst du künftig nur noch die folgende Funktion aufrufen, um ein SharePoint-kompatibles User-Objekt zu erhalten:

MailToUser("info@ioz.ch")

Das gleiche gilt für die zweite Funktion „GuidToGroup“, die eine GUID, ebenfalls vom Typ Text, erwartet.

GuidToGroup(Guid:Text):UserObject = {
    Claims: "c:0t.c|tenant|" & Guid,
    DisplayName: LookUp(Office365Groups.ListGroups().value, id = Guid).displayName
};

In diesem Blogbeitrag findest du weitere Informationen und Beispiele zu User-defined functions:

Gradient Backgrounds mit HTML-Elementen

Yunes El Hamad

HTML-Elemente sollen nicht unterschätzt werden. So kann mit diesem Control beispielsweise ein schöner Gradient als Background erstellt werden, anstelle einer monotonen Hintergrundfarbe.

image
Gradient Background mit einem HTML-Control in der Power App
"<div style='width:100%;height:{App.Height}px;background: #97D077; background: linear-gradient(0deg, rgba(151, 208, 119, 1) 50%, rgba(0, 0, 0, 1) 100%);'></div>"

Formulare aufsplitten

Reto Stadelmann

Vermeide grosse Formulare, indem du die Felder auf verschiedene Formulare gruppierst. Platziere jedes dieser Formulare zudem auf einem separaten Screen.

Dies verbessert nicht nur die User Experience (wer hat schon Lust, ein riesiges Formular mit 50 Feldern angezeigt zu bekommen?), sondern es erleichtert dir auch das Debugging und verbessert die Performance der App.

Horizontale und vertikale Container

Colin Fürst

Container sind ein echter Mehrwert. Nicht nur lassen sich die Controls gruppieren, was die Zugehörigkeit der einzelnen Controls auf dem Screen besser hervorhebt, mit den modern Containern (horizontal oder vertikal) lassen sich auch sehr zügig responsive Apps erstellen, ohne mit den X- und Y-Koordination zu „millimetern“.

image
Responsiver Aufbau eines Start-Screens mit mehreren Sections mit horizontalen und vertikalen Containern

Solutions

Wenn du eine Power App baust, hast du meist nicht nur eine App, sondern du benötigst oft auch diverse Workflows und arbeitest vielleicht sogar mit Umgebungsvariablen und Verbindungsreferenzen. Damit du vor lauter Komponenten, die zu deiner Lösung gehören, nicht den Überblick verlierst, bietet es sich an, mit einer Solution zu arbeiten.

Üblicherweise erstellen wir eine Solution pro Lösung. In der Regel befindet sich in dieser Solution eine App, die das Herzstück der Lösung ausmacht, mit den dazugehörigen Flows, Variablen und Verbindungen. Diese sind jeweils mit einem Präfix versehen, sodass die Zugehörigkeit auch ausserhalb der Solution festgestellt werden kann.

Template Screens

Um dein Design in der Canvas App einheitlich zu halten, empfiehlt es sich, mit Template-Screens zu arbeiten. Auf einem Template-Screen kannst du beispielsweise das Grundgerüst eines Screens abbilden: Die Navigation als Komponente auf der linken Seite, einen Container für den Header oben und einen weiteren Container für den Main Content deines Screens. Sobald du dann einen neuen Screen anlegst, machst du dies nicht mehr via New Screen > Blank, sondern indem du den Template-Screen duplizierst.

Einen weiteren Template-Screen kannst du mit Objekten versehen, die du wiederholt verwendest. Buttons zu stylen ist dir zu aufwändig? Mache es einmal richtig, und kopiere künftig den fertig gestylten Button direkt von deinem Template Screen. Brauchst du immer wieder Popups? Erstelle dir dein Popup ready-to-copy auf einem Template Screen.

Im Zweifelsfall einen Screen mehr spendieren

Popups sind eine gute Sache und bringen deine Apps auf das nächste Level. Wenn du jedoch viele Informationen oder gar ganze Formulare in Popups packst, kann die Weiterentwicklung und Fehlerbehebung deiner Apps mühsam werden.

Du möchtest ein Formular in einem Popup prüfen? Dann musst du zuerst einen Weg finden, das Popup überhaupt einzublenden. Befindet sich das Formular auf einem separaten Screen, kannst du diesen Screen einfach direkt über die Tree View im Power Apps Studio aufrufen. Zudem ist die App auch nur bis 300 Controls pro Screen happy mit dir – dieses Limit ist mit einem Formular relativ schnell erreicht. Natürlich ist dies kein hard limit, doch ein zusätzlicher Screen kostet nichts. 😉

Und wenn du trotzdem ein Fan von Popups bist, hält dich nichts davon ab, den zusätzlichen Screen so zu gestalten, als wäre es ein Popup.

Konfigurations-Liste

Hast du in deiner App eine Auswahl-Spalte, deren Auswahl sich hie und da ändern könnte? Möchtest du für einzelne User spezielle Funktionen in der App freischalten? Gibt es Inhalte, die ein Super-User einer App selbstständig bearbeiten soll?

Dann empfiehlt sich der Einsatz einer oder gar mehrerer Konfigurationslisten.

Je nach persönlicher Präferenz oder der Datenmenge kannst du verschiedene Informationen in einer oder mehreren Listen speichern, sodass diese Infos über die Liste angepasst werden können, ohne den Code der App zu bearbeiten. Via einer Zuordnungsspalte (z.B. ConfigType oder ähnliches) kannst du auch gleich mehrere Inhalte in der gleichen Liste pflegen, ohne für jede Auswahl eine separate Liste zu erstellen.

Ein gängiger Use Case: Du hast ein Auswahlfeld mit Themen, die sich ändern können. Anstelle eines Auswahl-Feldes auf der SharePoint-Liste oder gar fix codierten Werten direkt in der App, kannst du die Auswahl in deiner Konfigurationliste pflegen und updaten, ohne die App zu ändern.

Oder du möchtest Super-User in deiner App ernennen, die zusätzliche Funktionen in der App ausführen können. Anstelle einer separaten AD-Gruppe kannst du die User in deiner Konfigurations-Liste pflegen und in der App auslesen.

Filter-Konditionen verknüpfen

Wenn du schon mal eine App mit einem Übersichtsscreen gebaut hast, kennst du bestimmt die Anforderung, mehrere Filter miteinander zu verknüpfen. Am benutzerfreundlichsten ist es dann, pro Filter ein Dropdown mit Werten zur Verfügung zu stellen.

Den Code kannst du am einfachsten verwalten, indem du die einzelnen Filter der Funktion als Parameter mitgibst. Wenn ein Filter leer ist, soll dann aber nicht einfach kein Treffer angezeigt werden, sondern dann soll dieses Kriterium aus dem Filter ausgeschlossen werden.

Vorbei sind die Zeiten mit nicht-delegierbaren If-Funktionen in den Galleries.

Filter(
    Masterliste,
    IsBlank(cmbNummer.Selected.Nummer) || Nummer = cmbNummer.Selected.Nummer,
    IsBlank(cmbTitel.Selected.Title) || Title = cmbTitel.Selected.Title,
    IsBlank(cmbPhase.Selected.Value) || Phase.Value = cmbPhase.Selected.Value,
    IsBlank(cmbStatus.Selected.Value) || Status.Value = cmbStatus.Selected.Value,
    IsBlank(cmbVerkaufsleiter.Selected.mail) || Verkaufsleiter.Email = cmbVerkaufsleiter.Selected.mail,
    IsBlank(cmbRegionalleiter.Selected.mail) || Regionalleiter.Email = cmbRegionalleiter.Selected.mail,
    IsBlank(cmbErstelltVon.Selected.mail) || 'Created By'.Email = cmbErstelltVon.Selected.mail
)

Diesen Code kannst du beliebig mit weiteren Filter-Kriterien erweitern.

Code markieren

Bist du gerade am debuggen und kennst den Wert einer Variable nicht? Vor diesem Tipp hätte ich wohl ein Label auf dem Screen ergänzt, den Wert der Variable dort angezeigt und im Anschluss die neue App inklusive Debugging-Label publiziert, ganz zur Verwunderung des Users, der die App nach der Publizierung als erstes geöffnet hätte.

Doch eigentlich ist dies gar nicht nötig, denn du kannst deine Variable oder einen Teil des Codes, den du dir anschaust, auch einfach markieren, um herauszufinden, mit welchem Wert die App arbeitet.

image
Die Variable varSortOrderTasks enthält aktuell den Wert „Ascending“ vom Typ Text

Hinweis: Bei komplexerem Debugging hilft es trotzdem, auf einem Debug-Screen eine Gallery oder ein Label hinzuzufügen, um die Daten analysieren zu können

Drag&Drop in der Tree View

Ein „neueres“ Feature ist die Möglichkeit, Controls in der Tree View mittels Drag&Drop zu verschieben. Gerade in Containern, in denen die Reihenfolge der Controls in der Tree View der Anordnung der Elemente in der App entspricht, ist es extrem hilfreich, eine Beschriftung an den richtigen Ort zu ziehen, anstelle x-mal mit Rechtsklick > Reorder > Move left das Label dorthin zu verschieben, wo du es möchtest.

Such-Funktion

Der absolute Live-Saver ist für mich die Such-Funktion in den Power Apps. Dabei spreche ich nicht davon, ein Label in der Tree-View zu suchen, sondern den gesamten App-Code nach einer Zeichenfolge zu durchsuchen.

Das mag vielleicht selbstverständlich klingen, doch diese Funktion gibt es noch nicht ewig. Wenn eine Variable Probleme verursacht hat, hiess es vorher: Viiiiel Spass beim manuellen Durchsuchen aller Screens und Controls. 🙈

Die Such-Funktion findest du beim Lupen-Icon auf der linken Seite des Power Apps Studios.

image
Such-Funktion in Power Apps

With-Funktion

Repetitiver Code ist umständlich, mühsam zu pflegen und extrem Ressourcen-intensiv. Stattdessen kannst du mit der With-Formel arbeiten, die dir einen temporären Wert zur Laufzeit zur Verfügung stellt.

Ohne With-Formel würdest du zweimal dasselbe Lookup machen, mit der With-Formel machst du das einmal und kannst gleich mehrere Attribute desselben Objekts abbilden, ohne extra eine Variable dafür zu erstellen.

With(
	{tmpConfig: Lookup(colConfig, Prozessnummer = recCurrentItem.ID)},
	tmpConfig.ConfigType.Value & " " & tmpConfig.Title
)

ForAll-Funktion

Ein Loop in der PowerApp kann schnell mal unübersichtlich werden, gerade wenn verschiedene Funktionen ineinander geschachtelt werden. Gerade dann kann es auch vorkommen, dass sich die App nicht mehr sicher ist, worauf sich ThisRecord nun bezieht.

Mein Tipp? Arbeite mit dem As-Operator, um deinen Code sprechender zu gestalten.

ACHTUNG: das A von „As“ unbedingt gross schreiben.

ForAll(
	colAufgabenvorlagen As tmpCurrentItem,
	Patch(
		colAufgabenvorlagen,
		{ID: tmpCurrentItem.ID},
		{Title: "Neuer Titel"}
	)
);

Live Monitor

App-Nutzer sind manchmal ziemlich kreativ, wenn es darum geht, Fehler in der App heraufzubeschwören. Wenn du dann mal nicht mehr weiter weisst, hilft dir vielleicht der Live-Monitor dabei, das Problem zu lösen.

Öffne den Live-Monitor in der App Übersicht über Mehr > Details > Live monitor

image
Live monitor öffnen, um User zu einer Monitoring-Session in der App einzuladen

Von dort aus kannst du dem betroffenen User via „Copy live monitor link“ einen Link zustellen, um jeden einzelnen Schritt in der App zu tracken.

Alternativ kannst du den Link auch in der App direkt nutzen, um beispielsweise die Performance deiner App unter die Lupe zu nehmen.

image
Live monitor in der App öffnen, für Bug fixing, Performance-Optimierung und weiteres

Power Apps Sprache

Die Syntax von Power Apps ist abhängig von der Browsersprache, mit der du das Power Apps Studio geöffnet hast.

So schreibst du eine Variable in einem englischen Browser:

Set(varTest, "Ein Wert");

So schreibst du die gleiche Variable in einem deutschen Browser:

Set(varTest; "Ein Wert");;

Funktionen werden in der deutschen Browser-Sprache mit zwei anstatt einem Semikolon abgeschlossen, Attribute werden mit einem Semikolon anstatt einem Komma getrennt.

Grundsätzlich spielt es keine Rolle, für welche Sprache du dich entscheidest. Wir empfehlen jedoch den Gebrauch der englischen Schreibweise, denn 99% vom Code in den PowerApps-Foren und Youtube-Videos ist in der englischen Syntax verfasst. Wenn du nun Code aus diesen Quellen zur Inspiration verwendest, soll es nicht daran scheitern, dass die Syntax nicht korrekt ist. 🙂

Und jetzt bist du dran!

Die vorgestellten Tipps sind nur ein kleiner Ausschnitt aus der grossen Welt von Power Apps. Sie sind bewusst bunt gemischt – von einfachen Basics für Einsteiger bis hin zu Kniffen, die eher für Fortgeschrittene spannend sind. Vielleicht kanntest du schon den ein oder anderen Trick, vielleicht war aber auch etwas Neues dabei, das du direkt ausprobieren kannst.

Jetzt interessiert mich: Welche Tipps helfen dir persönlich beim Arbeiten mit Power Apps am meisten? Teile deine Erfahrungen gerne in den Kommentaren – so entsteht ein bunter Pool an Ideen, von dem wir alle profitieren können.

Beitrag teilen
Geschrieben von

Andrea Furrer

Content Services Developer

Profil anzeigen

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

IOZ_LOGO_weiss

Profis für M365-Intranets & digitale Arbeitsplätze, Power Apps, Power Automate Workflows, sowie Managementsysteme.

Angebote

Angebotsübersicht

   
Nach oben scrollen