Übung – Optimieren von Microsoft Graph-Abfragen mit der Komponente „mgt-get“

8 Minuten

In dieser Übung erfahren Sie, wie Sie die Get-Komponente des Microsoft Graph-Toolkits verwenden. Dadurch können Sie Notizbücher aus OneNote für den angemeldeten Benutzer anzeigen.

Vorbereitende Schritte

Voraussetzung für diese Übung ist die Durchführung der vorherigen Übung in diesem Modul „Einheit 3: Übung: Von Komponenten geladene Cachedaten“.

Verwenden der Get-Komponente

Führen Sie diese Schritte aus, um die Get-Komponente zum Anzeigen von Benutzernotizbüchern in Ihrer App zu verwenden.

Öffnen Sie die Datei index.html. Fügen Sie die Get-Komponente innerhalb des <body>-Tags direkt hinter der Login-Komponente <mgt-login></mgt-login> ein.

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
</head>
<body>
  <mgt-msal2-provider client-id="YOUR-CLIENT-ID-HERE"></mgt-msal2-provider>
  <mgt-login></mgt-login>
  <mgt-get></mgt-get>
</body>
</html>

Fügen Sie die Attribute resource und scopes wie folgt zur Get-Komponente hinzu:

<mgt-get resource="me/onenote/notebooks" scopes="Notes.Read, Notes.Read.All">
</mgt-get>

Führen Sie die folgenden Tasks aus, um eine Liste von OneNote-Notizbüchern abzurufen und diese in der App anzuzeigen:
- Fügen Sie <template></template> zwischen den <mgt-get></mgt-get>-Tags hinzu.
- Fügen Sie <div></div> zwischen den <template></template>-Tags hinzu.
- Fügen Sie das data-for-Attribut bei <div> ein, um die einzelnen Notizbücher in der Liste der Notizbücher durchzulaufen. Legen Sie das data-for -Attribut auf fest note in value.
```
<mgt-get resource="me/onenote/notebooks" scopes="Notes.Read, Notes.Read.All">
  <template>
    <div class="note" data-for="note in value">
    </div>
  </template>
</mgt-get>
```
Sie haben nun eine Liste mit Notizbuchdaten in Ihrer App. Fügen Sie die folgende Zeile innerhalb der <div></div>-Tags hinzu, damit die Liste der Notizbuchnamen mit den zugehörigen URLs angezeigt wird:
```
<a href="{{ note.links.oneNoteWebUrl.href}}"> {{ note.displayName }} </a>
```
Um das Profil der Person anzuzeigen, die das Notizbuch zuletzt geändert hat, sowie das Datum und die Uhrzeit der letzten Änderung des Notizbuchs, fügen Sie den folgenden Codeausschnitt innerhalb der <div></div>-Tags hinzu. Fügen Sie ihn nach dem <a></a>-Tag hinzu.
```
<h4> Last modified by:
   <mgt-person person-query="{{note.lastModifiedBy.user.displayName}}" view="oneline" person-card="hover"></mgt-person>
</h4>
<h5>Last modified date: {{note.lastModifiedDateTime}}</h5>
```
Damit Ihre Get-Komponente professioneller wirkt, erstellen Sie im Ordner „performance-mgt“ eine index.css-Datei.

Fügen Sie den folgenden CSS-Codeausschnitt in index.css ein:

.note {
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  padding: 10px;
  margin: 8px 4px;
  font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
}

.note a {
  font-size: 14px;
  margin-top: 8px;
}

.note h4 {
  font-size: 9px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: gray;
  margin-top: 4px;
  margin-bottom: 0px;
}
.note h5 {
  font-size: 7px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: royalblue;
  margin-top: 4px;
  margin-bottom: 0px;
}

.note mgt-person {
  --person-line1-font-size: 10px;
  --avatar-size-s: 12px;
  display: inline-block;
  vertical-align: middle;
}

Fügen Sie in Ihrer index.html-Datei die folgende Zeile zwischen den <head></head>-Tags hinzu:
```
<link rel='stylesheet' href='index.css'>
```

Die index.html-Datei sollte am Ende wie folgt aussehen:

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
  <link rel='stylesheet' href='index.css'>
</head>

<body>
  <mgt-msal2-provider client-id="YOUR-CLIENT-ID-HERE"></mgt-msal2-provider>
  <mgt-login></mgt-login>
  <mgt-get resource="/me/onenote/notebooks" scopes="Notes.Read, Notes.Read.All">
    <template>
      <div class="note" data-for="note in value">
        <a href="{{note.links.oneNoteWebUrl.href}}">{{ note.displayName }} </a>
        <h4> Last modified by:
          <mgt-person person-query="{{note.lastModifiedBy.user.displayName}}" view="oneline" person-card="hover">
          </mgt-person>
        </h4>
        <h5>Last modified date: {{note.lastModifiedDateTime}}</h5>
      </div>
    </template>
  </mgt-get>
</body>
</html>

Testen der App im Browser

Wenn Sie Ihren Microsoft 365-Entwicklermandanten zum ersten Mal verwendet haben, sind im OneNote Ihres Microsoft 365-Entwicklermandantenkontos möglicherweise noch keine Notizbücher gespeichert. Besuchen Sie https://www.office.com/launch/onenote, und melden Sie sich mit dem Konto Ihres Microsoft 365-Entwicklermandaten an, bevor Sie mit dem Testen Ihrer App beginnen. Erstellen sie neue Notizbücher in OneNote.
Drücken Sie die folgende Tastenkombination in Visual Studio Code, und suchen Sie nach Live Server:
- Windows: STRG+UMSCHALTTASTE+P
- macOS: BEFEHL+UMSCHALTTASTE+P
Führen Sie Live Server aus, um Ihre App zu testen.
Öffnen Sie Ihren Browser, und navigieren Sie zu http://localhost:3000.
Melden Sie sich mit Ihrem Microsoft 365-Entwicklerkonto an. Stimmen Sie den erforderlichen Berechtigungen zu, und klicken Sie auf Annehmen.
In Ihrer App wird nun eine Liste mit Informationen zu der Person, die die Datei für Sie freigegeben hat, sowie der Zeitpunkt der letzten Änderung angezeigt.

Screenshot der Komponente „Personen“ des Microsoft Graph-Toolkit.

Weiter

Übung – Optimieren von Microsoft Graph-Abfragen mit der Komponente „mgt-get“

Vorbereitende Schritte

Verwenden der Get-Komponente

Testen der App im Browser

Feedback