Power Apps Hacks - Vorschaubilder in einer Gallery für verschiedene Dateitypen ermöglichen.

Herzlich willkommen und Moin Moin zu diesem Beitrag in der Serie "Power Apps Hacks".

In dieser Serie behandeln wir einen bunten Blumenstrauß an Power Platform Tipps, Tricks und Funktionen.

Wenn Ihr Ideen für diese Videoreihe habt, hinterlasst uns einfach einen Kommentar unter dem Video!

In unserem Unternehmen betreiben wir ein eigenes internes Kleinanzeigenportal, in das unsere Mitarbeiter*innen Gesuche sowie Angebote inserieren können.

Neben dem Erstellen von Beschreibungen und Upload von Fotos wollen wir den Nutzer*innen ermöglichen auch andere Dokumente, wie z.B. eine PDF, eine Excel- oder Word-Datei ihrer Anzeige anhängen zu können.

Problem:

Wenn wir eine Gallery nutzen, um die Anlagen darzustellen, mit einem Image-Steuerelement, so wird Power Apps uns eine Vorschau des Fotos ausgeben, solange es sich um Dateiformate handelt, die das Image-Steuerelement wiedergeben kann (z.B. .jpg oder .png). Laden wir ein PDF- oder ein Word-Dokument als Anlage hoch, kann das Image-Steuerelement das nicht wiedergeben.

Dafür wollen wir eine Lösung schaffen und unseren Nutzern die Möglichkeit geben zu erkennen, welcher Dateityp sich hinter der Anlage verbirgt und diese Datei über einen Link aufrufen zu können.

Wie das funktioniert und in Power Apps dargestellt werden kann, zeigen wir Euch in diesem Beitrag.

1. Icons für die Darstellung in der Gallery besorgen

Im ersten Schritt benötigen wir die Icons, die wir später als Platzhalter für unterschiedliches Dateitypen ausgeben lassen wollen.

Plattformen um solche Icons zu bekommen, wären flaticon.com oder Icons8.com. Achtet darauf, dass ihr je nach Abomodell verpflichtet seid, den Autor des Icons zu erwähnen.

Wir verwenden für unser Beispiel folgende Icons. Für die Fotos brauchen wir keine Icons als Platzhalter, weil diese später durch unser Image-Steuerelement in der Gallery dargestellt werden können.

Die Icons laden wir über den Media-Bereich in unsere Power App hoch, sodass wir in der App auf diese zugreifen können.

2. Gallery für Anlagen des Inserates mit Icons für den Dateitypen füllen

Als Nächstes benötigen wir die Gallery, in der wir die Anlagen zu einem bestimmten Datensatz anzeigen lassen wollen.

Wir fügen dafür eine herkömmlich Gallery in unsere Power App ein und verbinden Sie mit der gewünschten Datenquelle / dem gewünschten Datensatz.

Gallery "galColPhotos" einfügen als horizontale Gallery. Als Items-Eigenschaft gebt Ihr den Datensatz an, den Ihr aktuell ausgewählt habt und dessen Anlagen Ihr in der Gallery anzeigen wollt. In unserem Beispiel wäre das die aktuell ausgewählte Anzeige, welche wir mit einem LookUp() nachschlagen.

//Die Anlagen des aktuell ausgewählten Datensatzes nachschlagen.
LookUp(KleinanzeigenInserate, ID = galAnzeigenSt.Selected.ID).Attachments

"Attachments" gibt dabei eine Tabelle zurück, die ihr in der Gallerie verwenden könnt.

3. Image-Steuerelement in die Gallery einfügen und Dateityp abprüfen für die dynamische Anzeige von Fotos oder Datei-Icons

Als nächstes, um ein Foto oder passendes Icon je nach Dateityp anzeigen zu können, fügen wir ein Image-Steuerelement "imggalColPhotosDS" in die Gallery ein und wählen die "Image-Eigenschaft" aus.

In die Image-Eigenschaft fügen wir folgenden Code ein:

//Dateityp festlegen, in dem alles hinter dem "." im Dateinamen betrachtet wird
    With(
        {
            //Dateityp evaluieren
            locDateityp: Right(
                ThisItem.DisplayName,
                Len(ThisItem.DisplayName) - Find(
                    ".",
                    ThisItem.DisplayName
                )
            )
        },
//Je Nach Dateityp einen Icon oder das eigentliche Bild zeigen
        Switch(
            locDateityp,
            "docx",
            word,
            "doc",
            word,
            "xls",
            excel,
            "xlsx",
            excel,
            "pdf",
            pdf,
            "ppt",
            powerpoint,
            "pptx",
            powerpoint,
            ThisItem.Value
        )
    )

Mithilfe der With()-Funktion bestimmen wir zunächst den Dateityp der jeweiligen Anlage. Ist der Dateityp bestimmt, können wir nun mithilfe einer Switch()-Funktion prüfen, um welchen Dateityp es sich handelt und ein Icon je nach Dateityp oder das Bild (ThisItem.Value) ausgeben, sollte es sich nur um ein Foto handeln.

4. Anlage über einen Link öffnen.

Im letzten Schritt wollen wir dem Nutzer noch die Möglichkeit geben eine Anlage, auch über einen Link direkt öffnen zu können, sodass der Nutzer sich z.B. ein PDF-Dokument zu einer Anzeige durchlesen oder herunterladen kann.

Wir wählen die OnSelect-Eigenschaft unseres Images "imggalColPhotosDS" aus und füllen sie mit folgendem Code:

Launch(ThisItem.AbsoluteUri)

Klicken wir jetzt das Bild / das Icon an, öffnet sich ein neues Fenster und wir können die Datei betrachten / herunterladen.

Mit dieser Methode könnt Ihr Euren Nutzer*innen also die Möglichkeit geben Anlagen jeglicher Art anzuzeigen und abzurufen mit einer einfachen Gallery und einem Image-Steuerelement.