HTML Styling Element

Veröffentlicht am 4. März 2023 (Zuletzt verändert am 9. Mai 2023) • 2 Min. Lesezeit • 341 Wörter
Power Apps HTML CSS Styling

Universelles Styling Element für eure Power App

Standarmäßig haben Power Apps keine moderne Erscheinung. Hier ist es an den Makern den Apps ein ansprechendes Styling zu verpassen. Die häufigste Anpassung die zu sehen ist sind Hintergrund-Elemente mit abgerundeten Ecken. Oftmals wird hierfür ein Button verwendet. Das ist für den Anfang auch sehr praktisch. In einem vorherigen Blog Beitrag (LINK) habe ich euch HTML Divs im Allgemeinen einmal vorgestellt. In diesem Beitrag zeige ich euch mein Lieblings-DIV welches ich in so gut wie jeder App nutze.

Komponente angewendet auf einem Bildschirm

GIF des finalen Elements

HTML Styling Element

Das finale Styling Element

With(
    {
        left:       Parent.PaddingLeft,
        right:      Parent.PaddingRight,
        top:        Parent.PaddingTop,
        bottom:     Parent.PaddingBottom    
    },
    "<div style='"&
        "position: absolute;"&
        "left: " & left & "px;"&
        "right: " & right & "px;"&
        "top: " & top & "px;" &
        "bottom: " & bottom & "px;" &
        "box-shadow: 3px 3px 3px 0px rgba(200,200,200,0.75);"&
        "border-radius: 10px;"&
        "background: #ffffff;"&
    "'></div>"
)

Einbau in eine Komponente

In einigen Projekten baue ich dieses Div in eine Komponente ein. Das erlaubt es weitere Funktionen umzusetzen. In den meisten Fällen baue ich dann noch ein zweites überlagertes Div ein um zum Beispiel einen abgestuften Header.

Komponente angewendet zum Stylen eines Katalog (Gallerie)

Eigenschaften der Komponenete

Die Komponente besteht aus 2 Div Elementen sowie einem Rechteck. Folgende Eigenschaften können beispielsweise aus der App übergeben werden

  • Padding Left (Number)
  • Padding Right (Number)
  • Padding Top (Number)
  • Padding Bottom (Number)
  • Header Height (Number)
  • Header Visible (Boolean)
  • Separator Color (Color)
  • Separator Visible (Boolean)

Ausblick

Dieses HTML Div ist unabhängig davon ob es in einer Komponte verwendet wird oder nicht extrem flexibel einsetzbar. In diesem Beitrag habe ich vor allem den Fokus darauf gelegt, die Komponente so zu gestalten, dass der Schatten gut dargestellt werden kann. Es können natürlich noch weitere Werte dynamisch eingestellt werden. Zum Beispiel, der border-radius, die Hintergrundfarbe(n) oder auch die Farbe des Schattens. Ich ändere diese Werte aktuell so gut wie nie, aber passt das ganze gerne an eure Bedürfnisse an.

Auf dieser Seite
Folg mir

Immer aktuell bei Neuigkeiten zur Power Platform