Hinweis: dieser Gastbeitrag kommt dankenswerterweise von Florian Koller unserer Partnerfirma InData, wir freuen uns über diesen Beitrag!

In dieser Beitragsserie möchten wir zeigen, wie man mit Power Apps Fotos macht und diese in SharePoint speichert, um sie wiederum in der Power App - in unserer Demo als User Avatare - verwenden zu können.

Im dritten und letzten Teil dieser Beitragsserie befassen wir uns hauptsächlich mit dem Erstellen eines Power Automate Flows. Anschließend werden wir ihn in unsere Power App aus Teil 2 der Blogserie einbinden, um die App fertig zu stellen.

Erstellen des Flows in Power Automate

Um möglicher Verwirrung vorzubeugen, wollen wir kurz erklären, was ein Flow überhaupt ist:

Power Automate ist eine cloud-basierte Software von Microsoft, die es Benutzern ermöglicht, Workflows - kurz "Flows" - zu erstellen. Diese Flows werden durch Ereignisse (Events) ausgelöst, um anschließend bestimmte Aktionen auszuführen. In unserem Fall ist das Event das Drücken des „Save To SharePoint“-Buttons und die Aktionen, dass das Bild nach SharePoint hochgeladen wird und der SharePoint-Link zurückgegeben wird.

Um den Flow, der unsere Bilder in SharePoint hochlädt, zu erstellen, gehen wir auf die Website https://emea.flow.microsoft.com/en-us/ und klicken in der linken Seitenleiste auf „Templates“. In der Suchzeile geben wir nun “power apps sharepoint” ein und wählen “Upload a Photo to SharePoint from Power Apps” aus:

Nach Klick auf Continue erhält der Flow Zugriff auf SharePoint und Outlook ...

... und es jetzt wird das Template des Flows angezeigt:

In diesem Template wird nach dem Speichern des Bildes auch eine E-Mail verschickt. Da wir diese Funktion nicht benötigen, löschen wir die beiden dafür vorgesehenen Schritte:

Anschließend geben wir unseren SharePoint-Link zur SharePoint-Seite, in welcher wir die Document Library "User-Images” erstellten haben, an. Beim zweiten Eingabefeld geben wir Slash “/” und den Namen der verwendeten Document Library an. Die Felder “File Name” und “File Content” wurden in diesem Template schon für uns ausgefüllt:

Das konvertierte Bild wird so mit dem angegebenen Namen in unserer Document Library gespeichert.

Im nächsten Schritt müssen wir den Link zum hochgeladenen Bild wieder zurück an Power Apps geben. Nur so können wir dem User später das Bild als Avatar zuweisen. Dazu klicken wir auf New Step, geben in der Suchzeile “powerapps” ein und wählen “Respond to PowerApp or flow” aus:

Als Output nehmen wir Text und nennen diesen „FileLink“.

Der Value ist etwas komplexer. Wir wählen die Expression „concat“ aus und geben als ersten Parameter den Link zu unserer SharePoint-Seite unter einfachen Hochkommas an. Als zweiten Parameter klicken wir auf „Dynamic content“ und wählen „Path“ aus. Als Ergebnis erhalten wir folgende Funktion (statt den Sternen steht hier natürlich Ihr individueller Pfad):

concat('https://***.sharepoint.com/sites/***',outputs('Create_file')?['body/Path'])

Um den Flow zu speichern, bestätigen wir mit OK. Danach können wir ihn in Power Apps verwenden.

Integration des Flows in Power Apps

Um den Flow zu hinterlegen, klicken wir auf unseren Save to SharePoint Button und wählen das Attribut OnSelect aus. Über den Menüpunkt Action und Power Automate wählen wir den erstellten Flow aus. Anschließend ergänzen wir das OnSelect-Attribut des Buttons wie folgt:

Set(FileLinkFromFlow, UploadaphototoSharePointfromPowerApps.Run(User().FullName & Now() & ".jpg", varTakenPhoto).filelink)

Mit dieser Zeile geben wir an, dass der Link zu unserem Bild in der globalen Variable “FileLinkFromFlow” gespeichert werden soll. Zusätzlich wird der Name des Bildes mit dem Benutzernamen, dem aktuellen Timestamp, sowie der Endung “.jpg” definiert. So wird sichergestellt, dass kein vorhandenes Bild mit gleichem Namen überschrieben werden kann.

Bild einem User zuweisen

Als letzten Schritt müssen wir noch das Objekt Bild_DataCard2 auswählen und im Attribut Update unsere Variable “FileLinkFromFlow” angeben. So setzen wir für den aktuell selektierten Benutzer den Link zum Bild, welcher später in die SharePoint-Liste gespeichert wird:

Falls das neue Bild während der Erstellung der App nicht angezeigt wird, kann es helfen die App zu speichern und neu zu laden.

Mögliche Probleme

Eine Falle, in die man tappen kann, ist, dass SharePoint Bilder aus Power Apps nicht direkt speichern kann. Wie wir beim Erstellen des Flows bereits gesehen haben, müssen wir das Bild erst in den Datentyp Binary konvertieren, um es anschließend in der SharePoint Document Library ablegen zu können.

Des Weiteren kann es beim manuellen Einfügen von URLs in unsere SharePoint-Liste zu Problemen kommen, da Power Apps relative SharePoint-Links nicht darstellen kann. Um den absoluten Link zu erhalten, muss man das Bild in SharePoint öffnen und auf View original klicken. Hier kann der absolute Link entnommen werden, welcher dann auch in Power Apps angezeigt werden kann. Die Menüpunkte „Copy to“ und „Copy link“ funktionieren in der App übrigens nicht, da sie relative Links liefern.

Fazit

In Teil 1 haben wir die Vorarbeit geleistet und einen Speicherort für unsere Daten in SharePoint erstellt. In Teil 2 haben wir unsere App erstellt und ihr Grundgerüst für unsere Zwecke angepasst. Und schließlich haben wir uns in diesem Teil 3 mit Power Automate befasst und damit unsere App fertiggestellt.

Mit wenigen Handgriffen ist es möglich, ein Bild von Power Apps auf SharePoint hochzuladen und einem User zuzuweisen. Bei den ersten Versuchen mit Power Apps und Power Automate gibt es sicherlich kleine Hindernisse, die etwas Zeit kosten. Zum Abschluss sei noch einmal gesagt, dass wir hier nur eine von vielen möglichen Lösungen zu dieser Aufgabenstellung behandelt haben.

Wenn Ihr Fragen oder alternative Lösungen zu dieser Aufgabe habt, freuen wir uns auf euren Kommentar. 😉