Power Apps Design Hack: Box Shadows, Color Gradients und Border Radius

Eine Power App ansprechend zu gestalten scheint auf den ersten Blick sehr einfach zu sein – etwas Hover-Effekt hier, etwas Farbe und Ausrichtung da. Schon mit wenigen Klicks sieht die App durchaus präsentabel aus. Doch wie können Power Apps über diese Standardmöglichkeiten hinaus gestaltet und mit den «gewissen Etwas» versehen werden?

Mit HTML Text-Elementen.

Power Apps bietet die Möglichkeit, HTML Text-Elemente auf den Screens Ihrer App zu platzieren. Diese lassen sich mit HTML-Code befüllen, was das Inline-Styling mit CSS ermöglicht. Wie bei einer Webseite können Sie aus den unendlichen Möglichkeiten von CSS schöpfen. Wenn Sie den unten beschriebenen Tipps folgen, ist es nicht einmal nötig, dass Sie sich mit HTML und CSS auskennen.

Zu diesem Beitrag gibt es ein Follow-up: Power Apps Design Hacks V2.0: Controls, Container, Fortschrittsbalken, Unicodeicons und einheitliches Styling

Vorbereitung

Fügen Sie in Ihrer Power App ein HTML-Textelement über Insert > Text > „HTML text“  hinzu. Dieses bildet die Grundlage für spätere Schritte.

Im Property „HtmlText“ geben Sie folgenden HTML-Code ein: „

<div style=’width:100%; height:150px; background:#ea6212; Ihre CSS-Befehle‘></div>

Den Platzhalter «Ihre CSS-Befehle» ersetzen Sie später durch den gewünschten CSS-Code. Bei «height» geben Sie entweder eine feste Grösse, beispielsweise 150px, oder aber die Höhe des dazugehörigen Elements (bspw. ein Button = Button1) an:

height:“ & Button1.Height & „px;

Elemente, auf die Sie ein mit HTML/CSS definiertes Styling anwenden wollen, können Sie anschliessend mit transparentem Hintergrund vor dem HTML-Element platzieren. Im Beispiel unten habe ich den Testbutton mit transparentem Hintergrund direkt über das HTML-Testelement gelegt. Dadurch verliert der Button seine Funktionalität (OnSelect) nicht und der Text ist sichtbar. Der Übersichtlichkeit halber habe ich die beiden Elemente gruppiert.

Power Apps und Box Shadows

Bei Box Shadows handelt es sich im HTML/CSS Fachjargon um einen Schlagschatten eines Objekts. Das Ziel dabei ist es, Leben in eine Ansicht zu bringen, da die Objekte nicht am Hintergrund zu kleben scheinen.

<div style=’width:270px; height:150px; background: #ea6212; box-shadow: 5px 5px 20px -2px rgba(0,0,0,0.75);‘></div>

Kommentar zu den box-shadow-Werten: Horizontale Verschiebung | Vertikale Verschiebung | Blur Radius | Spread Radius | Farbe inkl. Deckkraft. Diese Zahlen können Sie beliebig verändern, bis Sie den gewünschten Schlagschatten erhalten.

PowerApps und Color Gradients

Farbverläufe sind ein grosses Thema in modernen Designs. Doch leider bietet Power Apps im Moment noch keine Möglichkeit, dies einfach umzusetzen.

Kopieren Sie folgenden HTML-Code in das HtmlText-Property des HTML text-Elements:

<div style=’width:100%; height:150px; background: linear-gradient(90deg,#ea6212 0%, #FF9040 80%); background: -webkit-linear-gradient(90deg,#ea6212 0%, #FF9040 80%); background: -moz-linear-gradient(90deg,#ea6212 0%, #FF9040 80%);‘></div>

Kommentar zu den Werten in der Klammer: Winkel | Farbe 1 (unten) | Farbe 2 (oben). Auch hier können Sie die Werte in den Klammern entsprechend Ihren Wünschen anpassen.

PowerApps und Border Radius

Mit Border Radius definieren Sie den Radius der Ecken eines Elements. Je grösser der Wert, desto runder erscheint die Form, bis sie ein Kreis wird.

Border Radius ist ein Feature, welches in Power Apps für Buttons zur Verfügung steht. Wer jedoch bei anderen Elementen einen Border Radius setzen möchte, muss auf diese Möglichkeit umsteigen.

Kopieren Sie folgenden HTML-Code in das HtmlText-Property des HTML text-Elements:

<div style=’width:100%; height:150px;background: #ea6212; border-radius: 20px‘></div>

Kommentar border-radius: Radius aller Ecken, mit 4 Werten kann der Radius jeder Ecke im Uhrzeigersinn von oben links einzeln definiert werden

Mit dem Design-Gedanken im Hinterkopf gestaltet es sich gleich viel einfacher, eine App in PowerApps von einem leeren Screen aus aufzubauen. Wird die Anwendung nämlich gleich von Anfang ansprechend gestaltet, werden Sie mehr Spass daran haben, weiter an der App zu tüfteln.

Denn Design ist nicht etwas, das Sie am Ende auf die Schnelle auf die App anwenden können, wie ein hübscher Filter auf einem Bild. Es gilt: Technologie kann kopiert werden. Es ist das Design, das Emotionen weckt und unser Produkt einzigartig macht.

Beispiels-Screenshots einiger Apps mit Design-Elementen

Die Screenshots dieser Power Apps stammen von konkret umgesetzten Kundenprojekten. Die detaillierten Beschreibung der verwendeten Design Hacks finden Sie hier: Power Apps Design Hacks V2.0: Controls, Container, Fortschrittsbalken, Unicodeicons und einheitliches Styling