5 Tricks, die ich bei jeder Powerapp Entwicklung benutze

1) Farben, Schriften etc. als Variablen

Es ist in PowerApps wunderbar einfach, einem Element eine neue Farbe zu geben. Einfach daraufklicken und im Farbauswahldialog auf der rechten Seite oder oben in der Formel-Zeile die neue Farbe angeben und schon sind wir fertig. Wenn wir dieselbe Farbe auf einem anderen Element setzen, dann wiederholen wir das einfach.

Wenn wir diese Farbe aber nun an allen Elementen der PowerApp ändern müssen wird das aber sehr, sehr schnell sehr, sehr aufwändig. Aus dem Grund tendiere ich dazu, diese Einstellungen nur einmal zu machen und in einer Variablen zu speichern und mich später bei allen Komponenten einfach auf diese Variable zu beziehen.

Dazu benutze ich die "App.onStart" Methode. Sie können diese bearbeiten, indem Sie auf der linken Seite in der Baumansicht oben die App auswählen und dann das "On Start" Attribut bearbeiten. Diese Methode wird bei jedem Start der App automatisch ausgeführt und ist ein idealer Platz zum Setzen globaler Variablen. Sie können sie während der Entwicklung aber auch jederzeit händisch ausführen, indem sie bei dem Eintrag "App" auf die drei Punkte klicken und dann "Run OnStart" ausführen.

Ich setze hier die folgenden zwei Variablen

Set(_CompanyColor,RGBA(143, 56, 56, 1));
Set(_CompanyFont,Font.'Segoe UI');

und beziehe mich im Folgenden beim Styling aller Elemente nur noch auf diese Variablen.

2) Debug Modus

Wenn die PowerApp fertig entwickelt ist und im "echten Leben" von Usern benutzt wird kann es natürlich zu Fehlern kommen. Manchmal wäre es dann gut, wenn wir uns einfach den Wert mancher Variablen oder Eigenschaften darstellen könnten.

Das kann man wunderbar einfach machen, indem wir auf den entsprechenden Seiten Labels platzieren, die uns diese Werte zeigen. Diese sollten normalerweise für den Benutzer nicht sichtbar sein und wir müssten entscheiden können, ob diese Labels angezeigt werden oder nicht.

Dazu erstelle ich mir immer eine Variable "_debugMode", die ich in der „App.onStart“ Methode abhängig vom Wert eines QueryString Parameters setze.

Set(_DebugMode,Param("debug")="true");

Danach setzte ich die Sichtbarkeit aller entsprechenden Labels und Controls, die ich nur im Debug Modus sehen möchte, auf den Wert von _DebugMode.

Wenn ich die App nun speichere, im Browser aufrufe und hinten an die URL ein "&debug=true" mit anhänge, werden mir die Debug Informationen in den Labels angezeigt.

Das ist nur eine rudimentäre Lösung, die man noch durchaus erweitern kann. Normalerweise benutze ich zum Beispiel hier keinen einfachen Labels zur Darstellung der Informationen, sondern erstelle mir eine eigene "Debug Komponente", die mir die Werte dann gleich auch hübsch formatiert darstellt. Oder ich habe einen eigenen Screen, auf dem all diese Werte gebündelt sind und auf den ich in der App nur über einen Button komme, der abhängig vom Debug Modus versteckt ist.

3) Mehrsprachigkeit

Die „App.OnStart“ Methode kann man auch noch für viele andere Dinge benutzen. Wenn wir eine App in mehreren Sprachen bereitstellen wollen, dann könnten wir das auch über Variablen tun, die wir abhängig von der gesetzten Browsersprache beim Start setzen. Ich persönlich tendiere hier aber dazu, dieses nicht über einzelne Variablen zu tun, sondern hier dann eine etwas komplexere Datenstruktur aufzubauen

Set(_Resources,
        If(Language()="de-DE" Or Language()="de-DE",
            {
               TITLE       : "Meine Applikation",
               LABEL_SAVE  :"Speichern",
               LABEL_CANCEL:"Abbrechen"     
            },
            {
                TITLE       :"My Application",
                LABEL_SAVE  :"Save",
                LABEL_CANCEL:"Cancel"     
            }
        )
    );

Der Effekt hiervon ist nun, dass wir eine _Ressourcen Variable haben, die verschiedene Attribute enthält. Diese haben in unserem Beispiel normalerweise englische Werte, es sei denn die Browsersprache ist deutsch. Auf verschiedenen Elementen in der Applikation können wir uns nun statt auf einen fixen Text auf die entsprechenden Werte in der _Ressources Variable beziehen.

Denselben Effekt könnten wir auch mit vielen einzelnen Variablen erzielen. Im Regelfall benutzen wir aber bei einer mehrsprachigen Applikation sehr viele Elemente, die lokalisiert werden müssten. Damit ich eine gewisse Übersichtlichkeit bei der IntelliSense im PowerApps Studio behalte, tendiere ich zu dem beschriebenen Vorgehen und benutze die eine _Resources Variable als eine Art Namespace.

Das Vorgehen lohnt sich auch an anderen Stellen. Wenn Sie etwa recht viele Variablen haben, die das Aussehen ihre Applikation steuern (siehe Abschnitt 1), dann kann es durchaus vernünftig sein, diese etwa in einer "_Styles" Variablen zu kapseln.

4) Variable Navigation

Kommen wir nun zur Navigation. Falls ihre Applikation mehr als einen oder zwei Screens benutzt, kann das Handling einer gleichbleibenden Navigation auf allen Seiten schnell aufwändig werden. Wenn sie auf jedem Screen Buttons platziert haben, über die sie auf alle anderen Screens gelangen können, dann müssen Sie nun jeden einzelnen Screen anpassen und um einen Button erweitern. Neben dem Aufwand kann es hier auch recht schwierig sein, ein über alle Screens einheitliches "Look&Feel" aufrechtzuerhalten.

Nehmen wir mal an, dass ich 2 Bildschirme namens "MainScreen" und "Screen2" habe.

Dann definiere ich mir meistens in der App.OnStart Methode eine Collection "_Navigation" mit den zwei Bildschirmen

Set(_Navigation, Table(
            { Name:"Haupt Bildschirm", Screen:MainScreen },
            { Name:"Bildschirm 2", Screen:Screen2 }
            )       
    );

Danach erstelle ich eine Galerie, die als Datenquelle diese Collection hat und füge in das Galerie Template einen Button ein. Den Text dieses Buttons setze ich auf "ThisItem.Name" und die "OnSelect" Eigenschaft auf "Navigate(ThisItem.Screen)".

Nachdem ich diese Galerie dann grafisch so angepasst habe, wie ich sie haben möchte, kopiere ich Sie auf jeden Bildschirm und habe damit eine einheitliche Navigation. Alternativ kann ich mir dafür auch eine eigene Komponente definieren.

Wenn ich jetzt einen dritten Bildschirm "Screen3" bekomme, dann kann ich ihn einfach in der App.OnStart Methode mit einfügen. Er taucht nun automatisch in der Navigation aller Seiten auf.

Set(_Navigation, Table(
            { Name:"Haupt Bildschirm", Screen:MainScreen },
            { Name:"Bildschirm 2", Screen:Screen2 },
            { Name:"Bildschirm 3", Screen:Screen3 },
            )       
    );

5) Deeplinks

Manchmal wäre es bei der Navigation gut, wenn ich schon beim Aufrufen der App über einen Link direkt auf einen Bildschirm gelangen könnte. Wenn wir die Navigation schon als eine Variable definiert haben, ist das sehr einfach und effizient möglich.

Hierzu erweitern wir zunächst die Navigations-Variable aus dem letzten Kapitel und fügen bei allen Screens, bei denen ein „Deeplinking“ möglich sein soll, ein neues Attribut "ScreenId" ein.

Set(_Navigation, Table(
            { Name:"Haupt Bildschirm", Screen:MainScreen },
            { Name:"Bildschirm 2",     Screen:Screen2,    ScreenId:"screen2" }
            )       
    );

Danach fügen wir den folgenden Funktionsaufruf nach der Definition der Navigationsvariable in die „App.StartScreen„ Methode ein.

If( 
    !IsBlank(Param("screen")),
    With(
        {
            SelectedScreen:LookUp(
                _Navigation,
                !IsBlank(ScreenId) && ScreenId = Param("screen")
            )
        },
        SelectedScreen.Screen
    ),
    NormalerStartScreen
)

Dieser Aufruf prüft zunächst, ob der QueryString Parameter "screen" beim Aufruf der App mit angegeben wurde. Falls ja, dann setzt er die Variable "SelectedScreen" mit dem Bildschirm aus der Navigationsvariablen, bei dem die ScreenId mit dem übergebenen Parameter übereinstimmt. Danach wird eine Navigation auf den gefundenen Screen durchgeführt.

Wenn wir in unserem Beispiel an die URL der aufgerufenen PowerApp ein "&screen=screen2" mit anfügen, startet damit die Applikation auf "Bildschirm 2".

Download

Sie können sich meine PowerApps Starter App hier herunterladen.