Übung – Anzeigen von Benutzerdateien

Abgeschlossen

In dieser Übung werden Sie die App erweitern, um eine Liste von Dateien im Stammverzeichnis des Benutzers in OneDrive for Business anzuzeigen.

Abrufen der Liste der Dateien

Beginnen Sie, indem Sie der Anwendung den Microsoft Graph-Aufruf einfügen.

1. Öffnen Sie in Ihrem Code-Editor die Datei graph.js.

2. Fügen Sie am Ende der Datei eine neue asynchrone Funktion mit Namen getFiles() ein, um die Liste der Dateien abzurufen. Verwenden Sie die ausgewählte Funktion, um die Eigenschaften id, name, folder und package für jede Datei abzurufen.

   // Get files in root of user's OneDrive
   async function getFiles() {
     ensureScope('files.read');
     try {
       const response = await graphClient
           .api('/me/drive/root/children')
           .select('id,name,folder,package')
           .get();
       return response.value;
     } catch (error) {
       console.error(error);
     }
   }
   

Fügen Sie einen HTLM-Platzhalter ein, um die Dateien anzuzeigen.

Fügen Sie als nächstes HTML-Code ein, welcher die Liste der Dateien anzeigen wird.

1. Öffnen Sie in Ihrem Code-Editor die Datei index.html.

2. Erweitern Sie den content-Block mit einer horizontalen Regel, einer Beschriftung und einer ungeordneten Liste, wie im Folgenden gezeigt:

   <div id="content" style="display: none;">
     <h4>Welcome <span id="userName"></span></h4>
     <!-- Add for file download -->
     <hr />
     <label>Files in your OneDrive root folder:</label>
     <ul id="downloadLinks"></ul>
   </div>
   

Anzeigen von Dateien in der App

Der letzte Schritt besteht darin, eine kleine Menge Code hinzuzufügen, um die von Ihnen zuvor hinzugefügte Funktion aufzurufen und die Liste der Dateien anzuzeigen.

1. Öffnen Sie in Ihrem Code-Editor die Datei ui.js.

2. Fügen Sie am Ende der Datei die displayFiles()-Funktion hinzu.

   async function displayFiles() {
     const files = await getFiles();
     const ul = document.getElementById('downloadLinks');
     while (ul.firstChild) {
       ul.removeChild(ul.firstChild);
     }
     for (let file of files) {
       if (!file.folder && !file.package) {
         let a = document.createElement('a');
         a.href = '#';
         a.appendChild(document.createTextNode(file.name));
         let li = document.createElement('li');
         li.appendChild(a);
         ul.appendChild(li);
       }
     }
   }
   

   Beachten Sie, dass die if-Anweisung alle Ordner oder Pakete überspringt, um nur die Dateien anzuzeigen. Derzeit gibt es keine Möglichkeit, diese Elemente in der API zu filtern. Beachten sie ebenfalls, dass die Dateien als Anker-Kategorien (Hyperlinks) gerendert sind. In der nächsten Übung werden Sie ein Feature zum Herunterladen jeder Datei hinzufügen, wenn dieser Link ausgewählt wird.

3. Fügen Sie am Ende derdisplayUI()-Funktion, direkt vor der schließenden Klammer, einen Aufruf an displayFiles() ein.

     // beginning of function omitted for brevity
     content.style = "display: block";
   
     displayFiles();
   }
   

Ausführen Ihrer App

Sie haben jetzt Ihre App erweitert, um einige Dateien des Benutzers mittels Microsoft Graph anzuzeigen. Stellen Sie sicher, dass sich einige Dateien im Stammverzeichnis der OneDrive-Instanz des Benutzers befinden, und führen Sie die App dann lokal aus.

1. Führen Sie eine Vorschau der Web-App aus, indem Sie den folgenden Befehl im Terminal ausführen:

   npm start
   

2. Ihr Browser sollte auf http://localhost:8080 zeigen.

3. Wählen Sie die Schaltfläche Bei Microsoft anmelden aus, um sich mit Ihrem Microsoft 365-Konto anzumelden.

4. Wenn Sie die App zum ersten Mal ausführen, werden Sie aufgefordert, der App Zugriff auf Ihre Dateien zu gewähren. Stimmen Sie der Anforderung zu, um fortzufahren.

   

5. Sie sollten die Liste der Dateien sehen.

   

6. Lassen Sie Ihren Node.js-Server laufen, weil Sie ihn im nächsten Teil der Übung verwenden werden.