Übung – Datei in die SharePoint-Dokumentenbibliothek hochladen

  • 15 Minuten

Sie können eine Datei in einer SharePoint-Dokumentbibliothek speichern, indem Sie Power Apps und einen einfachen Power Automate-Flow verwenden. In dieser Lerneinheit erfahren wir in einer praktischen Übung, wie das funktioniert. Bei dieser Technik werden ein Anhangssteuerelement (aus einem Formularsteuerelement) und ein Power Automate-Flow verwendet, um eine Datei in eine SharePoint-Dokumentbibliothek hochzuladen.

Einführung

Was wir tun werden, ist, das Anlagen-Steuerelement zu verwenden, um unsere Datei in Power Apps zu laden. Dann verwenden wir einen einfachen Power Automate-Flow, um den Namen und den Dateiinhalt zu extrahieren und in SharePoint zu schreiben. Abschließend übergeben wir einen Link zur Datei an Power Apps, damit wir die gespeicherte Datei in unserem Browser öffnen können.

Legen Sie zunächst eine SharePoint-Dokumentbibliothek fest, in der die Datei gespeichert wird, um mit dieser Technik zu beginnen. Sie benötigen zudem eine SharePoint-Liste, die wir vorübergehend an unsere App anbinden können, damit wir der App ein Bearbeitungsformular hinzufügen können. Wir müssen eine Liste verwenden, denn nur so können wir auf ein Anlagensteuerelement zugreifen. Eine Dokumentbibliothek kann keine Anhänge hinzufügen.

Führen wir diese Schritte gemeinsam durch.

Übung

  1. Wechseln Sie zum Power Apps Maker Portal, und erstellen Sie eine neue App Blank Canvas.

  2. Fügen Sie SharePoint als Datenquelle hinzu. Wählen Sie auf dem Bildschirm „Neue leere Canvas“ die Option Mit Daten verbinden aus, oder wählen Sie die Schaltfläche Daten hinzufügen aus.

  3. Suchen Sie im Popup-Fenster Datenquelle auswählen nach SharePoint, und wählen Sie es aus.

    Hinweis

    Wenn Sie nicht mit SharePoint vertraut sind, lesen Sie bitte dieses Modul zum Erstellen und Verwenden Ihrer SharePoint-Website mit Power Apps. Erste Schritte mit Power Apps und SharePoint.

  4. Wählen Sie im Bereich Mit einer SharePoint-Website verbinden auf der rechten Seite des Bildschirms Ihre SharePoint-Website aus, oder geben Sie die Website-URL (für die SharePoint-Homepage) in das URL-Eingabefeld ein.

  5. Wählen Sie im Bereich Liste auswählensowohl eine Liste als auch eine Dokumentbibliothek aus, die für die App verwendet werden soll, und klicken Sie dann auf die Option Verbinden. Denken Sie daran, dass wir die Liste nur verwenden, damit wir das Formularsteuerelement verwenden können, das Anhänge umfasst. Wählen Sie daher eine kleine Liste mit begrenzten Spalten, um die besten Ergebnisse zu erzielen. Bevor wir fortfahren, sollte Ihre App nun zwei Elemente auf der Registerkarte Data anzeigen, eine SharePoint-Dokumentbibliothek und eine SharePoint-Liste.

Die benötigten Steuerelemente hinzufügen

  1. Fügen Sie der App ein Bearbeitungsformular hinzu, indem Sie Einfügen>Bearbeitungsformular auswählen.

  2. Um das Formular mit Ihrer SharePoint-Liste zu verbinden, sehen Sie im Eigenschaftenbereich auf der rechten Seite des Bildschirms nach und wählen Sie Ihre SharePoint-Liste aus der Dropdownliste Datenquelle aus.

  3. Suchen Sie in Ihrem Steuerelement Bearbeitungsformular nach dem Steuerelement Anhänge, und wählen Sie es aus. Sie benötigen nicht die gesamte Datenkarte, sondern nur das Steuerelement Anhänge selbst. In der Strukturansicht weist das Steuerelement „Anhänge“ links neben dem Namen, der mit DataCardValue beginnt, ein kleines Büroklammersymbol auf. Kopieren Sie das Steuerelement „Anlagen“.

  4. Fügen Sie nun Ihr Anhänge-Steuerelement außerhalb des Formularsteuerelements auf Ihrem Canvas-Bildschirm ein. Beachten Sie, dass Ihre App Fehler anzeigt. Der Grund dafür ist, dass Sie eine Kopie dieses Steuerelements außerhalb des Formulars eingefügt haben, in das es integriert wurde. Wir beheben das gleich.

  5. Wählen Sie das Steuerelement Edit form aus, und löschen Sie es aus Ihrer App, nicht jedoch das Anlagen-Steuerelement, das Sie gerade eingefügt haben. Wir haben das Steuerelement „Bearbeitungsformular“ nur hinzugefügt, um das Steuerelement „Anhang“ kopieren zu können, sodass wir es nicht mehr brauchen. Hier können Sie auch die SharePoint-Liste aus Ihren Datenquellen entfernen. Sie benötigen es nicht mehr.

  6. Beheben wir nun die Fehler in unserem Anlagen-Steuerelement. Passen Sie zunächst die Größe an, und platzieren Sie es rechts oben auf Ihrem Bildschirm. Wir müssen einige Fehler in den Steuerelementeigenschaften berichtigen, da es sich immer noch so verhält, als wäre es Teil eines Formularsteuerelements. Sobald Sie die folgenden Eigenschaftsänderungen vorgenommen haben, weist Ihr Steuerelement keine Fehler auf:

    Items – Parent.Default löschen und leer lassen

    BorderColor – Löschen Sie den Eintrag, und setzen Sie ihn auf Color.Black (oder auf eine geeignete Farbe)

    Tooltip – Löschen Sie Parent.Default, und lassen Sie es leer

    DisplayMode – Löschen Sie Parent.Default, und ändern Sie es in DisplayMode.Edit.

  7. Ändern Sie den Namen Ihres Anhang-Steuerelements in einen aussagekräftigen Namen wie AttachmentControl. (In unseren folgenden Formeln verwenden wir den Namen AttachmentControl.)

  8. Hier können Sie eine Vorschau der Funktionen des Steuerelements für Anhänge anzeigen. Versetzen Sie Ihre App in den Vorschaumodus, und wählen Sie im Anlagen-Steuerelement die Option Datei anhängen aus. Sie können von Ihrem Computer eine Datei oder ein Bild auswählen und als Anhang hinzufügen. Beenden Sie den Vorschaumodus Ihrer App.

Flow erstellen

  1. Nun verfügen wir über die benötigten Steuerelemente und erstellen einen Power Automate-Flow. Dies können Sie in Power Apps tun, indem Sie die Schaltfläche Power Automate auf der linken Navigationsleiste auswählen, um den Bereich Power Automate anzuzeigen.

  2. Wählen Sie aus dem Power Automate-Bereich die Option Neuen Flow erstellen aus.

  3. Wählen Sie im Popup-Fenster Flow erstellen die Option + Flow erstellen aus.

  4. Ihr Canvas Erstellen Sie Ihren Flow wird angezeigt und zeigt einen unbenannten Flow mit Power Apps als Trigger. Wählen Sie die Aktion PowerApps (V2) aus, und klicken Sie dann auf + Eingabe hinzufügen.

    Screenshot von „Erstellen Ihres Flows“ mit Suchergebnissen für „Einen Vorgang auswählen“ für die Aktion „Datei erstellen“ in SharePoint

  5. Wählen Sie Datei als Eingabetyp aus. Das ist alles, was Sie für den Trigger brauchen.

  6. Wählen Sie das Symbol + Neuer Schritt aus, um einen weiteren Schritt hinzuzufügen.

  7. Suchen Sie im Dialogfeld Einen Vorgang auswählen nach dem Vorgang Datei erstellen von SharePoint, und wählen Sie ihn aus.

    Screenshot von PowerApps(V2) mit Suchergebnissen für „Vorgang auswählen“ für die SharePoint-Aktion „Datei erstellen“.

  8. Sobald Sie die Aktion Datei erstellen einfügen, müssen Sie vier Pflichtfelder ausfüllen. Wählen Sie für die Site-Adresse die Site-Adresse aus der Dropdownliste aus. Es sollte dieselbe SharePoint-Seite sein, von der aus Sie die Dokumentbibliothek an die App angehängt haben.

  9. Beachten Sie für Ordnerpfad, dass der Hinweis Sie darüber informiert, dass Sie mit einer vorhandenen Bibliothek beginnen müssen. Auf der rechten Seite des Feldes wird ein Ordnersymbol angezeigt. Sie können auf dieses Symbol klicken und dann den Ordner suchen und auswählen, in dem Sie die Datei speichern möchten.

  10. Zuerst fügen wir den File Content ein, da der Power Apps-Trigger dies als dynamischen Inhalt bereitstellt. Platzieren Sie Ihren Cursor im Eingabefeld Dateiinhalt. Wählen Sie dann über den dynamischen Inhalt Dateiinhalt aus. Wenn Sie nach dem Einfügen in den File Content die Maus über den File Content bewegen, wird die folgende Formel angezeigt:

    triggerBody()['file']['contentBytes']

  11. Als Nächstes erstellen wir den Dateinamen. Dieser Vorgang erfolgt durch das Einfügen einer Expression. Setzen Sie den Cursor in das Feld Dateiname, und wählen Sie im Popup-Fenster Dynamischer Inhalt die Registerkarte Ausdruck aus. Geben Sie im Feld für die Eingabe der Ausdrucksformel nun folgende Formel ein:

    triggerBody()['file']['name']

  12. Wählen Sie OK aus. In Ihrem Schritt Datei erstellen sollten Sie jetzt Werte für alle vier Eingaben haben, wobei Ihre Eingabe Dateiname eine fx-Eingabe mit der Formel für den Dateinamen anzeigt.

    Screenshot der Aktion „Datei erstellen“ mit der Formel für den Dateinamen

  13. An diesem Punkt übernimmt unser Flow den Dateiinhalt von Power Apps (einschließlich des Dateinamens) und erstellt eine Datei in unserer angegebenen SharePoint-Dokumentenbibliothek. Im letzten Teil dieses Flows geben wir den Link zu unserer neu erstellten Datei an Power Apps zurück. Wählen Sie + Neuer Schritt aus, um eine weitere Aktion hinzuzufügen.

  14. Geben Sie in das Eingabefeld Vorgang auswählenpowerapps ein. Klicken Sie dann auf die Option Auf eine PowerApp oder einen Flow antworten.

  15. Wählen Sie in der Aktion Auf eine PowerApp oder einen Flow reagieren die Option + Ausgabe hinzufügen aus.

  16. Wählen Sie Text aus.

  17. Geben Sie unter Einen Titel eingeben Folgendes ein: FileLink

  18. Wo Einen Wert für eine Antwort eingeben steht, wählen Sie dann einen kombinierten Text und dynamischen Inhalt aus. Geben Sie zunächst die Homepage-Adresse Ihrer SharePoint-Website ein. Sie sollte mit der Adresse für Ihren Schritt „Datei erstellen“ im Flow übereinstimmen (sie beginnt mit https und endet mit dem Namen Ihrer SharePoint-Website). Wählen Sie anschließend aus dem dynamischen Inhalt Ihres Schritts zur Dateierstellung die Option Path aus.

    Screenshot des dynamischen Inhalts „Auf einen Power Apps oder Flow antworten“ mit dem Pfad

  19. Ändern Sie den Namen Ihres Flows in etwas wie SaveFileToSharePoint.

  20. Speichern Sie Ihren Flow, und schließen Sie das Power Automate-Editorfenster. Power Apps speichert den Flow und listet ihn auf der Registerkarte Power Automate auf, damit wir ihn in unserer App nutzen können.

App vervollständigen

  1. Wählen Sie auf Ihrem App-Bildschirm Ihr Anlagen-Steuerelement aus.

  2. Wechseln Sie zur Eigenschaft OnAddFile.

  3. Beginnen Sie, den Namen Ihres Flows in die Formel „OnAddFile“ einzugeben. Fügen Sie dann einen Punkt und dann Run hinzu, sodass Ihre Formel etwa so aussieht: SaveFileToSharePoint.Run, aber beachten Sie, dass wir der Formel noch mehr hinzufügen müssen, wenn Sie eine öffnende Klammer hinzufügen. Beachten Sie, dass unsere Flow eine Eingabe benötigt wie: {file:Record}.

  4. Fügen Sie Ihrer Formel „{file:“ und dann eine weitere geschweifte Klammer hinzu, und geben Sie Ihre Formel entsprechend diesem Muster ein. Wir definieren die Elemente des Datensatzes als contentBytes und Name, die unser Flow in Form eines vollständigen Datensatzes an unseren Power Automate-Flow weiterleitet.

    SaveFileToSharePoint.Run({file:{contentBytes: Last(Self.Attachments).Value, name: Last(Self.Attachments).Name}})

    Es ist wichtig, die Groß-/Kleinschreibung dieser Elemente von OnAddFile zu beachten. Power Apps schlägt automatisch die richtigen Optionen vor. Der Grund, warum wir die Funktion „Last“ verwenden müssen, ist, dass Self.Attachments eine Tabelle ist und unser Flow nur einen einzelnen Datensatz benötigt. Wir haben auch „Self“ verwendet, das auf das Steuerelement selbst verweist, sodass der Name des Steuerelements nicht eingegeben werden muss.

  5. Passen wir die Formel so an, dass der „FileLink“, der von unserem Flow zurückgegeben wird, eingeschlossen wird. Zu diesem Zweck legen wir vor dem Ausführen unseres Flows eine Variable fest und verwenden dann die Ausgabe „filelink“ als Daten der Variable. Nehmen Sie an Ihrer Formel folgende Anpassungen vor:

    Set(varFileLink, SaveFileToSharePoint.Run({file:{contentBytes: Last(Self.Attachments).Value, name: Last(Self.Attachments).Name}}).filelink);

    Dadurch wird der Wert von varFileLink als Eigenschaft „filelink“ festgelegt, die unser Flow an Power Apps zurückgibt.

  6. Fügen Sie der App ein Schaltflächen-Steuerelement hinzu, und geben Sie den Text „Datei anzeigen“ ein.

  7. Legen Sie die Eigenschaft OnSelect der neuen Schaltfläche fest: Launch(varFileLink). Die neue Schaltfläche führt uns zu jener Datei, so können wir sie in unserem Browser anzeigen.

Testen Sie Ihre App

  1. Versetzen Sie Ihre App in den Vorschaumodus, und hängen Sie an Ihr Anlagen-Steuerelement eine Datei an. Sie können entweder eine Datei auf Ihrem Computer auswählen oder eine Datei per Drag & Drop in das Steuerelement Anhang ziehen. Sie sollten sofort sehen, wie der Vorgang beginnt.

  2. Wählen Sie die Schaltfläche Datei anzeigen aus. Eines von drei Dingen wird passieren. Wenn Sie ein Bild hochgeladen haben, wird die Bilddatei in einer separaten Browser-Registerkarte geöffnet. Wenn Sie ein Dokument oder eine Tabelle übermittelt haben, wird die Datei in einer Desktop- oder Browser-App geöffnet. Andere Dateitypen werden möglicherweise in Ihrem Browser heruntergeladen und Ihnen die Option geben, sie zu öffnen.

Nächste Schritte (optional)

Herzlichen Glückwunsch! Sie haben eine App erstellt, mit der sie eine Datei über Power Apps in eine SharePoint-Dokumentenbibliothek hochladen können. Sie müssen nichts weiter tun, aber Sie können diese Funktionen mit den folgenden Schritten auf die nächste Stufe bringen:

  1. Da die Daten aus dem Flow zurückkommen, können Sie den Link an einer anderen Position in Ihrer App verwenden.

  2. Sie können mit der Eigenschaft Items eine Galerie in Ihre App einfügen, die auf Ihre SharePoint-Dokumentenbibliothek zeigt. Dann können Sie die Miniaturansicht des Elements mit dem Steuerelement Bild in der Galerie verwenden, mit einer Formel für die Eigenschaft Image wie z. B.: ThisItem.Thumbnail.Small. Der Thumbnail-Datensatz ist leistungsstark und in verschiedenen Größen verfügbar: Groß, Mittel und Klein. Dies stellt einen sichtbaren Teil nahezu jeder Datei dar.

  3. Sie können die Elementeigenschaft LinkToItem verwenden, um zu einem ausgewählten Element zu gelangen, ähnlich unserer Schaltfläche „Datei anzeigen“. Wählen Sie das Katalog-Steuerelement aus, und wechseln Sie zur Eigenschaft OnSelect. Geben Sie Launch(ThisItem.'Link to item') ein.

  4. Versetzen Sie Ihre App in den Vorschaumodus, und wählen Sie ein Element aus Ihrer Galerie aus, um diese Funktion zu testen.

Zusammenfassung

Die Verwendung des Steuerelements Anhang mit einem einfachen Flow ist eine leistungsstarke Möglichkeit, eine Datei in einer SharePoint-Dokumentbibliothek von Power Apps zu speichern. Sie können diese Funktion jedem Teil Ihrer App hinzufügen, in dem Sie eine Datei speichern möchten. Der Power Automate-Schritt, der die contentBytes der Datei und den Namen weitergibt, ist alles, was Power Apps benötigt, um Ihre Datei in einer SharePoint-Dokumentbibliothek abzulegen.