Übung – Laden der E-Mails eines Benutzers in Batches

• 5 Minuten

In dieser Übung erweitern Sie die App, damit Sie die E-Mails eines Benutzers in Batches von 10 Elementen laden können.

Laden von E-Mails in Batches von 10 E-Mails pro Seite

Beginnen Sie, indem Sie die getEmails()-Funktion aktualisieren, um E-Mails in Batches von 10 E-Mails pro Seite zu laden. Wenn der nächste Satz zu ladender E-Mails definiert wurde, wird er als Argument der Funktion übergeben.

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

2. Aktualisieren Sie die Signatur der getEmails()-Funktion, um ein einzelnes nextLink-Argument zu akzeptieren:

   async function getEmails(nextLink) {
     // ...
   }
   

3. Wenn das nextLink-Element festgelegt wurde, sollte die Funktion es an das SDK übergeben, um die Daten abzurufen. Wenn nextLink nicht festgelegt wurde, sollte die Funktion den anfänglichen Satz von Daten laden. Aktualisieren Sie die getEmails()-Funktion, indem Sie die return-Anweisung durch die folgende if-Anweisung ersetzen:

   if (nextLink) {
     return await graphClient
       .api(nextLink)
       .get();
   }
   else {
     return await graphClient
       .api('/me/messages')
       .select('subject,receivedDateTime')
       .orderby('receivedDateTime desc')
       .top(10)
       .get();
   }
   

   Die aktualisierte getEmails()-Funktion sollte wie folgt aussehen:

   async function getEmails(nextLink) {
     ensureScope('mail.read');
   
     if (nextLink) {
       return await graphClient
         .api(nextLink)
         .get();
     }
     else {
       return await graphClient
         .api('/me/messages')
         .select('subject,receivedDateTime')
         .orderby('receivedDateTime desc')
         .top(10)
         .get();
     }
   }
   

Erweitern Sie die Vorlage, um Benutzern zu erlauben, weiter E-Mails zu laden

Sie haben die getEmails()-Funktion erweitert, um weitere E-Mails zu laden. Der nächste Schritt besteht darin, eine Schaltfläche anzuzeigen, mit der Benutzer ggf. weitere E-Mails laden können.

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

2. Suchen Sie die Zeile "<ul id="emails"></ul>", und fügen Sie unmittelbar danach den folgenden Code hinzu, um eine Schaltfläche hinzuzufügen, über die Benutzer weitere E-Mails laden können.

   <div id="loadMoreContainer" style="display: none;">
     <button onclick="displayEmail();">Load more</button>
   </div>
   

Weitere E-Mails laden

Nachdem die App so aktualisiert wurde, dass Benutzer weitere E-Mails laden können, ist der letzte Schritt das Hinzufügen einer Funktion zur Verarbeitung des Ladens weiterer E-Mails.

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

2. Definieren Sie vor der displayEmail()-Funktion eine neue Variable namens "nextLink", ohne ihr einen Wert zuzuweisen:

   var nextLink;
   

3. Aktualisieren Sie in der displayEmail()-Funktion den Aufruf, damit die getEmails()-Funktion nextLink enthält.

   var emails = await getEmails(nextLink);
   

4. Nach dem Abrufen der Daten wird anschließend der Wert der Eigenschaft @odata.nextLink abgerufen. Ist diese Option festgelegt, weist sie Benutzer darauf hin, dass weitere Daten angezeigt werden können. Fügen Sie den folgenden Code unmittelbar nach der if-Anweisung in der displayEmail()-Funktion hinzu:

   nextLink = emails['@odata.nextLink'];
   

5. Scrollen Sie am Ende der Funktion displayEmail(), nachdem die abgerufenen E-Mails angezeigt werden, an das Ende der Seite, damit der Benutzer die abgerufenen E-Mails sofort sehen kann.

   window.scrollTo({ top: emailsUl.scrollHeight, behavior: 'smooth' });
   

6. Überprüfen Sie abschließend, ob nextLink zurückgegeben wurde, und wenn ja, zeigen Sie die Schaltfläche an, um weitere E-Mails zu laden.

   Fügen Sie am Ende der displayEmail()-Funktion den folgenden Code hinzu:

   if (nextLink) {
     document.getElementById('loadMoreContainer').style = 'display: block';
   }
   

7. Die vollständige displayEmail()-Funktion sollte wie folgt aussehen:

   var nextLink;
   async function displayEmail() {
     var emails = await getEmails(nextLink);
     if (!emails || emails.value.length < 1) {
       return;
     }
     nextLink = emails['@odata.nextLink'];
   
     document.getElementById('displayEmail').style = 'display: none';
   
     var emailsUl = document.getElementById('emails');
     emails.value.forEach(email => {
       var emailLi = document.createElement('li');
       emailLi.innerText = `${email.subject} (${new Date(email.receivedDateTime).toLocaleString()})`;
       emailsUl.appendChild(emailLi);
     });
     window.scrollTo({ top: emailsUl.scrollHeight, behavior: 'smooth' });
   
     if (nextLink) {
       document.getElementById('loadMoreContainer').style = 'display: block';
     }
   }
   

Ausführen Ihrer App

Sie haben Ihre App erweitert, um die E-Mails eines Benutzers mithilfe von Microsoft Graph in Batches von 10 Elementen anzuzeigen und ihnen das Laden weiterer E-Mails zu ermöglichen. Lassen Sie uns die App lokal ausführen.

1. Zeigen Sie eine Vorschau der Web-App an, 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. Nachdem Sie sich mit Ihrem Konto angemeldet haben, wählen Sie die Schaltfläche E-Mail anzeigen aus.

5. Sie sollten eine Liste der letzten 10 E-Mails des Benutzers in der App angezeigt sehen.

6. Wenn sich mehr als 10 E-Mails in Ihrem Postfach befinden, wird eine Schaltfläche angezeigt, über die Sie die nächsten 10 Nachrichten laden können.

7. Beenden Sie den Server "Node.js", indem Sie im Terminalfenster STRG+C auswählen.