Organisationsdaten: Abrufen von E-Mails und Kalenderereignissen

2025-06-13

In der vorherigen Übung haben Sie gelernt, wie Sie Dateien aus OneDrive for Business und Chats aus Microsoft Teams mithilfe von Microsoft Graph und der mgt-Search-Results-Komponente aus dem Microsoft Graph-Toolkit abrufen. Außerdem haben Sie erfahren, wie Sie Nachrichten an Microsoft Teams-Kanäle senden. In dieser Übung erfahren Sie, wie Sie E-Mail-Nachrichten und Kalenderereignisse aus Microsoft Graph abrufen und in die Anwendung integrieren.

In dieser Übung führen Sie die folgenden Schritte aus:

Erfahren Sie, wie die mgt-search-results-Webkomponente im Microsoft Graph-Toolkit verwendet werden kann, um nach E-Mails und Kalenderereignissen zu suchen.
Erfahren Sie, wie Sie die mgt-search-results-Komponente so anpassen, dass Suchergebnisse auf benutzerdefinierte Weise gerendert werden.
Erfahren Sie, wie Sie Microsoft Graph direkt aufrufen, um E-Mails und Kalenderereignisse abzurufen.

Untersuchen des Suchcodes für E-Mail-Nachrichten

Tipp

Wenn Sie Visual Studio Code verwenden, können Sie Dateien direkt öffnen, indem Sie Folgendes auswählen:

Windows/Linux: STRG+P
Mac: Cmd + P

Geben Sie dann den Namen der Datei ein, die Sie öffnen möchten.

In einer vorherigen Übung haben Sie eine App-Registrierung in Microsoft Entra ID erstellt und den Anwendungsserver und den API-Server gestartet. Außerdem haben Sie die folgenden Werte in der .env Datei aktualisiert.
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Stellen Sie sicher, dass Sie die vorherige Übung abgeschlossen haben, bevor Sie fortfahren.
Öffnen Sie emails.component.html , und nehmen Sie sich einen Moment Zeit, um den Code zu durchsuchen. Der vollständige Pfad zur Datei ist client/src/app/emails/emails.component.html.
Suchen Sie die mgt-search-results-Komponente :
```
<mgt-search-results 
  class="search-results" 
  entity-types="message" 
  [queryString]="searchText"
  (dataChange)="dataChange($any($event))">
  <template data-type="result-message"></template>
</mgt-search-results>
```
Dieses Beispiel der mgt-search-results-Komponente ist auf die gleiche Weise konfiguriert wie die zuvor betrachtete Komponente. Der einzige Unterschied besteht darin, dass das entity-types Attribut festgelegt ist, auf message das zum Suchen nach E-Mail-Nachrichten und einer leeren Vorlage verwendet wird.
- Das class Attribut wird verwendet, um anzugeben, dass die search-results CSS-Klasse auf die Komponente angewendet werden soll.
- Das entity-types Attribut wird verwendet, um den Datentyp anzugeben, nach dem gesucht werden soll. In diesem Fall handelt es sich um den Wert message.
- Das queryString Attribut wird verwendet, um den Suchbegriff anzugeben.
- Das dataChange Ereignis wird ausgelöst, wenn sich die Suchergebnisse ändern. Die Funktion der dataChange() E-Mail-Komponente wird aufgerufen, die Ergebnisse werden an sie übergeben, und eine benannte Eigenschaft data wird in der Komponente aktualisiert.
- Für die Komponente wird eine leere Vorlage definiert. Diese Art von Vorlage wird normalerweise verwendet, um zu definieren, wie die Suchergebnisse gerendert werden. In diesem Szenario wird der Komponente jedoch mitgeteilt, dass keine Nachrichtendaten gerendert werden. Stattdessen rendern wir die Daten selbst mithilfe von Standarddatenbindung (Angular wird in diesem Fall verwendet, aber Sie können jedes gewünschte Bibliotheks-/Framework verwenden).

Sehen Sie sich die mgt-search-results-Komponente in emails.component.html an, um die Datenbindungen zu finden, die zum Rendern der E-Mail-Nachrichten verwendet werden. In diesem Beispiel werden die data Eigenschaft durchlaufen und der E-Mail-Betreff, der Textkörpervorschau und ein Link zum Anzeigen der vollständigen E-Mail-Nachricht ausgegeben.

@if (this.data.length) {
    <div>
        @for (email of this.data;track $index) {
            <mat-card>
                <mat-card-header>
                <mat-card-title>{{email.resource.subject}}</mat-card-title>
                <mat-card-subtitle [innerHTML]="email.resource.bodyPreview"></mat-card-subtitle>
                </mat-card-header>
                <mat-card-actions>
                <a mat-stroked-button color="basic" [href]="email.resource.webLink" target="_blank">View Email Message</a>
                </mat-card-actions>
            </mat-card>
        }
    </div>
}

Anzeigen von E-Mail-Nachrichten

Zusätzlich zur Verwendung der mgt-search-results-Komponente zum Abrufen von Nachrichten stellt Microsoft Graph mehrere APIs bereit, die auch zum Durchsuchen von E-Mails verwendet werden können. Die /search/query API, die Sie zuvor gesehen haben, könnte sicherlich verwendet werden, aber eine einfachere Option ist die messages API.
Um zu erfahren, wie Sie diese API aufrufen, wechseln Sie zurück zu graph.service.ts , und suchen Sie die searchEmailMessages() Funktion. Sie erstellt eine URL, die zum Aufrufen des messages Endpunkts von Microsoft Graph verwendet werden kann, und weist dem Parameter den query$search Wert zu. Der Code sendet dann eine GET-Anforderung und gibt die Ergebnisse an den Aufrufer zurück. Der $search Operator sucht automatisch nach dem query Wert im Betreff-, Text- und Absenderfeld.
```
async searchEmailMessages(query:string) {
    if (!query) return [];
    // The $search operator will search the subject, body, and sender fields automatically
    const url = `https://graph.microsoft.com/v1.0/me/messages?$search="${query}"&$select=subject,bodyPreview,from,toRecipients,receivedDateTime,webLink`;
    const response = await Providers.globalProvider.graph.client.api(url).get();
    return response.value;
}
```
Die E-Mail-Komponente , die sich in emails.component.ts Aufrufen searchEmailMessages() befindet, und zeigt die Ergebnisse in der Benutzeroberfläche an.
```
override async search(query: string) {
    this.data = await this.graphService.searchEmailMessages(query);
}
```

Durchsuchen des Suchcodes für Kalenderereignisse

Die Suche nach Kalenderereignissen kann auch mithilfe der mgt-search-results-Komponente durchgeführt werden. Es kann das Rendern der Ergebnisse für Sie behandeln, Aber Sie können auch Ihre eigene Vorlage definieren, die Sie später in dieser Übung sehen werden.
Öffnen Sie calendar-events.component.html , und nehmen Sie sich einen Moment Zeit, um den Code zu durchsuchen. Der vollständige Pfad zur Datei ist client/src/app/calendar-events/calendar-events.component.html. Sie werden sehen, dass die Dateien und E-Mail-Komponenten, die Sie zuvor angesehen haben, sehr ähnlich sind.
```
<mgt-search-results 
    class="search-results" 
    entity-types="event" 
    [queryString]="searchText"
    (dataChange)="dataChange($any($event))">
    <template data-type="result-event"></template>
</mgt-search-results>
```
Dieses Beispiel der mgt-search-results-Komponente ist auf die gleiche Weise konfiguriert wie die, die Sie zuvor angesehen haben. Der einzige Unterschied besteht darin, dass das entity-types Attribut festgelegt ist, auf event das zum Suchen nach Kalenderereignissen und einer leeren Vorlage verwendet wird.
- Das class Attribut wird verwendet, um anzugeben, dass die search-results CSS-Klasse auf die Komponente angewendet werden soll.
- Das entity-types Attribut wird verwendet, um den Datentyp anzugeben, nach dem gesucht werden soll. In diesem Fall handelt es sich um den Wert event.
- Das queryString Attribut wird verwendet, um den Suchbegriff anzugeben.
- Das dataChange Ereignis wird ausgelöst, wenn sich die Suchergebnisse ändern. Die Funktion der Kalenderereigniskomponente dataChange() wird aufgerufen, die Ergebnisse werden an sie übergeben, und eine benannte data Eigenschaft wird in der Komponente aktualisiert.
- Für die Komponente wird eine leere Vorlage definiert. In diesem Szenario wird der Komponente mitgeteilt, dass keine Daten gerendert werden. Stattdessen rendern wir die Daten selbst mithilfe einer Standarddatenbindung.

Unmittelbar unterhalb der mgt-search-results Komponente in calendar-events.component.html finden Sie die Datenbindungen, die zum Rendern der Kalenderereignisse verwendet werden. In diesem Beispiel werden die data Eigenschaft durchlaufen und das Startdatum, die Uhrzeit und der Betreff des Ereignisses herausgeschrieben. Benutzerdefinierte Funktionen, die in der Komponente enthalten sind, z dayFromDateTime() . B. und timeRangeFromEvent() werden aufgerufen, um Daten ordnungsgemäß zu formatieren. Die HTML-Bindungen enthalten auch einen Link zum Anzeigen des Kalenderereignisses in Outlook und den Ort des Ereignisses, wenn eine angegeben ist.

@if (this.data.length) {
    <div>
        @for (event of this.data;track $index) {
            <div class="root">
                <div class="time-container">
                    <div class="date">{{ dayFromDateTime(event.resource.start.dateTime)}}</div>
                    <div class="time">{{ timeRangeFromEvent(event.resource) }}</div>
                </div>

                <div class="separator">
                    <div class="vertical-line top"></div>
                    <div class="circle">
                        @if (!this.event.resource.bodyPreview?.includes('Join Microsoft Teams Meeting')) {
                            <div class="inner-circle"></div>
                        }
                    </div>
                    <div class="vertical-line bottom"></div>
                </div>

                <div class="details">
                    <div class="subject">{{ event.resource.subject }}</div>
                    @if (this.event.resource.location?.displayName) {
                        <div class="location">
                            at
                            <a href="https://bing.com/maps/default.aspx?where1={{event.resource.location.displayName}}"
                                target="_blank" rel="noopener"><b>{{ event.resource.location.displayName }}</b></a>
                        </div>
                    }
                    @if (this.event.resource.attendees?.length) {
                        <div class="attendees">
                            @for (attendee of this.event.resource.attendees;track attendee.emailAddress.name) {
                                <span class="attendee">
                                    <mgt-person person-query="{{attendee.emailAddress.name}}"></mgt-person>
                                </span>
                            }
                        </div>
                    }
                    @if (this.event.resource.bodyPreview?.includes('Join Microsoft Teams Meeting')) {
                        <div class="online-meeting">
                            <img class="online-meeting-icon"
                                src="https://img.icons8.com/color/48/000000/microsoft-teams.png" title="Online Meeting" />
                            <a class="online-meeting-link" href="{{ event.resource.onlineMeetingUrl }}">
                                Join Teams Meeting
                            </a>
                        </div>
                    }
                </div>
            </div>
        }
    </div>
}

Zusätzlich zur Suche nach Kalenderereignissen mithilfe der search/query API stellt Microsoft Graph auch eine events API bereit, die auch zum Durchsuchen von Kalenderereignissen verwendet werden kann. Suchen Sie die searchCalendarEvents() Funktion in graph.service.ts.
Die searchCalendarEvents() Funktion erstellt Start- und Enddatums-/Uhrzeitwerte, die zum Definieren des zu durchsuchenden Zeitraums verwendet werden. Anschließend wird eine URL erstellt, die zum Aufrufen des events Endpunkts von Microsoft Graph verwendet werden kann und die query Parameter sowie Start- und Enddatums-/Enddatumsvariablen enthält. Anschließend erfolgt eine GET-Anforderung, und die Ergebnisse werden an den Aufrufer zurückgegeben.
```
async searchCalendarEvents(query:string) {
    if (!query) return [];
    const startDateTime = new Date();
    const endDateTime = new Date(startDateTime.getTime() + (7 * 24 * 60 * 60 * 1000));
    const url = `/me/events?startdatetime=${startDateTime.toISOString()}&enddatetime=${endDateTime.toISOString()}&$filter=contains(subject,'${query}')&orderby=start/dateTime`;

    const response = await Providers.globalProvider.graph.client.api(url).get();
    return response.value;
}
```
- Hier ist eine Aufschlüsselung der URL, die erstellt wird:
  - Der /me/events Teil der URL wird verwendet, um anzugeben, dass die Ereignisse des angemeldeten Benutzers abgerufen werden sollen.
  - Die startdatetime Parameter werden enddatetime verwendet, um den zu durchsuchenden Zeitraum zu definieren. In diesem Fall gibt die Suche Ereignisse zurück, die innerhalb der nächsten 7 Tage beginnen.
  - Der $filter Abfrageparameter wird verwendet, um die Ergebnisse nach dem query Wert zu filtern (der im Datagrid in diesem Fall ausgewählte Firmenname). Die contains() Funktion wird verwendet, um nach dem query Wert in der subject Eigenschaft des Kalenderereignisses zu suchen.
  - Der $orderby Abfrageparameter wird verwendet, um die Ergebnisse nach der start/dateTime Eigenschaft zu sortieren.
Nachdem die url Anforderung erstellt wurde, wird eine GET-Anforderung an die Microsoft Graph-API mit dem Wert url gesendet, und die Ergebnisse werden an den Aufrufer zurückgegeben.
Wie bei den vorherigen Komponenten ruft die Kalenderereignissekomponente (search() Datei) die Ergebnisse auf und zeigt sie an.
```
override async search(query: string) {
    this.data = await this.graphService.searchCalendarEvents(query);
}
```
Hinweis

Sie können Auch Microsoft Graph-Aufrufe aus einer benutzerdefinierten API oder serverseitigen Anwendung ausführen. Sehen Sie sich das folgende Lernprogramm an, um ein Beispiel für den Aufruf einer Microsoft Graph-API aus einer Azure-Funktion anzuzeigen.
Sie haben nun ein Beispiel für die Verwendung von Microsoft Graph zum Abrufen von Dateien, Chats, E-Mail-Nachrichten und Kalenderereignissen gesehen. Dieselben Konzepte können auch auf andere Microsoft Graph-APIs angewendet werden. Sie können beispielsweise die Microsoft Graph-Benutzer-API verwenden, um nach Benutzern in Ihrer Organisation zu suchen. Sie können auch die Microsoft Graph-Gruppen-API verwenden, um nach Gruppen in Ihrer Organisation zu suchen. Sie können die vollständige Liste der Microsoft Graph-APIs in der Dokumentation anzeigen.

Nächster Schritt

Glückwunsch

Freigeben über

Organisationsdaten: Abrufen von E-Mails und Kalenderereignissen

Untersuchen des Suchcodes für E-Mail-Nachrichten

Durchsuchen des Suchcodes für Kalenderereignisse

Nächster Schritt

Feedback

Zusätzliche Ressourcen