Galerie Design

Moderne Galerie in Power Apps erstellen – UI Tutorial

Ich zeige dir, wie du in Power Apps eine moderne, responsive Galerie mit bedingter Formatierung erstellst. Dabei nutzen wir verschiedene Spaltentypen aus einer SharePoint-Liste und sorgen für ein Design, das auf allen Bildschirmgrößen überzeugt – egal ob Desktop, Tablet oder Smartphone.

Schritt 1: SharePoint Liste

Wir starten mit einer SharePoint-Liste namens Schulungskatalog, die du dir als Excel-Datei herunterladen und importieren kannst. Bitte beachte, dass du die Personenspalte direkt in SharePoint anlegen musst, da diese auf die Mitarbeiter*innen in deinem Unternehmen zugreift.

Schritt 2: Responsive App erstellen

Erstelle jetzt eine App mit einem Seitendesign. In diesem Beispiel nutze ich das Design „Kopfzeile, Hauptabschnitt, Fußzeile“, da dieses bereits mit Responsive Containern vorausgefüllt ist.

Schritt 3: Tabellenheader gestalten

Zuerst fügst du einen horizontalen Container für die Überschriften ein. Befülle diesen mit 7 Textfeldern, um die Spaltenbezeichnungen bzw. die Aktionsbuttons abzubilden.

Schritt 4: Galerie einfügen und anpassen

Füge im nächsten Schritt eine Galerie ein, die du mit der SharePoint Liste verbindest.

Den strukturellen Aufbau der Galerie musst du wie den Tabellenheader ebenfalls mit einem horizontalen Container lösen. Dadurch ist eine symmetrische Darstellung der Daten gewährleistet.

Schritt 5: Daten anzeigen und formatieren

Jeden Spaltentyp kannst du jetzt individuell gestalten und sehr benutzerfreundlich darstellen.

Textspalte (1)

Nutze dazu am besten ein Textfeld, in dem der Text dargestellt werden kann.

Textfeld
Value = ThisItem.Title

Personenspalte (2)

Füge dafür einen eigenen Container ein, um mehrere personenbezogene Daten darzustellen. In diesem Beispiel ein Bild und den Anzeigenamen.

Bild
Image = ThisItem.'Trainer:in'.Picture

Textfeld
Value = ThisItem.'Trainer:in'.DisplayName

Auswahlspalte (3)

Hier empfehle ich ebenfalls einen eigenen Container, der je nach Kategorie eingefärbt wird.

Textfeld
Value = ThisItem.Kategorie.Value

Container
Fill = Switch(
    ThisItem.Kategorie.Value;
    "Fachlich";RGBA(135;180;240;1);
    "Pflicht";RGBA(254;216;142;1);
    "Soft Skill";RGBA(174;228;179;1)
)

Währungsspalte (4)

Nutze dazu ein Textfeld, in dem der Text inkl. Währungsformatierung dargestellt werden kann. (z.B. 8.000 €)

Textfeld
Value = Text(ThisItem.Kosten;"###,###") & " €"

Zahlenspalte - Prozentwert (5)

Um einen Prozentwert visuell ansprechend darzustellen, empfehle ich dir, die Arbeit mit einem Fortschrittsbalken. Nutze dafür einen eigenen Container, in dem du ein Rechteck mit dynamischer Breite entsprechend dem Prozentwert anzeigst. Zusätzlich kannst du den Balken anhand des Prozentwertes einfärben.

Rectangle
Width = ThisItem.'Teilnahmequote (%)'/100 * Parent.Width
Fill =  If(ThisItem.'Teilnahmequote (%)'<40;
    RGBA(252;144;144;1);
    ThisItem.'Teilnahmequote (%)'<70;
        RGBA(254;216;142;1);
        RGBA(180;228;201;1)
)

Bewertung (6)

Dafür steht dir das Bewertung-Steuerelement zur Verfügung. Nutze dieses im Anzeigen-Modus, um keine Interaktion zu ermöglichen.

Interaktionen (7)

Um ein schnelles Bearbeiten und Löschen von Datensätzen zu ermöglichen, solltest du direkt bei den Datensätzen entsprechende Buttons hinzufügen.

Ich hoffe, diese Anleitung hilft dir, deine Power Apps nutzerfreundlich und ansprechend zu gestalten.

Melde dich gerne für meinen Newsletter an, in dem ich dir Tipps und Tricks rund um Power Apps & Power Automate zusende.

 Hier geht's zum Detailvideo: