Dane organizacyjne: pobieranie wiadomości e-mail i zdarzeń kalendarza

W poprzednim ćwiczeniu przedstawiono sposób pobierania plików z usługi OneDrive dla Firm i czatów z usługi Microsoft Teams przy użyciu programu Microsoft Graph oraz składnika mgt-search-results z zestawu narzędzi Microsoft Graph Toolkit. Przedstawiono również sposób wysyłania komunikatów do kanałów usługi Microsoft Teams. W tym ćwiczeniu dowiesz się, jak pobierać wiadomości e-mail i zdarzenia kalendarza z programu Microsoft Graph i integrować je z aplikacją.

W tym ćwiczeniu wykonasz następujące czynności:

Dowiedz się, jak składnik internetowy mgt-search-results w zestawie narzędzi Microsoft Graph Toolkit może służyć do wyszukiwania wiadomości e-mail i zdarzeń kalendarza.
Dowiedz się, jak dostosować składnik mgt-search-results w celu renderowania wyników wyszukiwania w niestandardowy sposób.
Dowiedz się, jak wywołać program Microsoft Graph bezpośrednio w celu pobrania wiadomości e-mail i zdarzeń kalendarza.

Eksplorowanie kodu wyszukiwania wiadomości e-mail

Wskazówka

Jeśli używasz programu Visual Studio Code, możesz otwierać pliki bezpośrednio, wybierając pozycję:

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

Następnie wpisz nazwę pliku, który chcesz otworzyć.

W poprzednim ćwiczeniu utworzono rejestrację aplikacji w usłudze Microsoft Entra ID i uruchomiono serwer aplikacji i serwer interfejsu API. Zaktualizowano również następujące wartości w .env pliku.
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Przed kontynuowaniem upewnij się, że wykonano poprzednie ćwiczenie .
Otwórz emails.component.html i pośmiń chwilę na przejrzenie kodu. Pełna ścieżka do pliku to client/src/app/email/emails.component.html.
Znajdź składnik mgt-search-results :
```
<mgt-search-results 
  class="search-results" 
  entity-types="message" 
  [queryString]="searchText"
  (dataChange)="dataChange($any($event))">
  <template data-type="result-message"></template>
</mgt-search-results>
```
W tym przykładzie składnika mgt-search-results skonfigurowano taki sam sposób, jak poprzednio. Jedyną różnicą jest to, że entity-types atrybut jest ustawiony, do message którego służy wyszukiwanie wiadomości e-mail, a pusty szablon jest dostarczany.
- Atrybut służy do określania class , że search-results klasa CSS powinna być stosowana do składnika.
- Atrybut entity-types służy do określania typu danych do wyszukania. W tym przypadku wartość to message.
- Atrybut queryString służy do określania terminu wyszukiwania.
- Zdarzenie dataChange jest uruchamiane po zmianie wyników wyszukiwania. Funkcja składnika dataChange() wiadomości e-mail jest wywoływana, wyniki są do niego przekazywane, a właściwość o nazwie data jest aktualizowana w składniku.
- Pusty szablon jest zdefiniowany dla składnika. Ten typ szablonu jest zwykle używany do definiowania sposobu renderowania wyników wyszukiwania. Jednak w tym scenariuszu mówimy składnikowi, aby nie renderować żadnych danych komunikatów. Zamiast tego dane będą renderowane przy użyciu standardowego powiązania danych (w tym przypadku usługa Angular jest używana, ale możesz użyć dowolnej biblioteki/platformy).

Spójrz poniżej składnika mgt-search-results w emails.component.html , aby znaleźć powiązania danych używane do renderowania wiadomości e-mail. W tym przykładzie data wykonuje iterację po właściwości i zapisuje temat wiadomości e-mail, podgląd treści i link, aby wyświetlić pełną wiadomość e-mail.

@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>
}

Wyświetlanie wiadomości e-mail

Oprócz używania składnika mgt-search-results do pobierania komunikatów program Microsoft Graph udostępnia kilka interfejsów API, których można również używać do wyszukiwania wiadomości e-mail. Interfejs /search/query API, który został wyświetlony wcześniej, z pewnością może być używany, ale bardziej prostą opcją messages jest interfejs API.
Aby zobaczyć, jak wywołać ten interfejs API, wróć do graph.service.ts i znajdź searchEmailMessages() funkcję. Tworzy adres URL, który może służyć do wywoływania messages punktu końcowego programu Microsoft Graph i przypisuje query wartość do parametru $search . Następnie kod wysyła żądanie GET i zwraca wyniki do elementu wywołującego. Operator $search automatycznie wyszukuje query wartość w polach tematu, treści i nadawcy.
```
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;
}
```
Składnik wiadomości e-mail znajdujący się w emails.component.ts wywołaniach searchEmailMessages() i wyświetla wyniki w interfejsie użytkownika.
```
override async search(query: string) {
    this.data = await this.graphService.searchEmailMessages(query);
}
```

Eksplorowanie kodu wyszukiwania zdarzeń kalendarza

Wyszukiwanie zdarzeń kalendarza można również wykonać przy użyciu składnika mgt-search-results . Może on obsługiwać renderowanie wyników, ale możesz również zdefiniować własny szablon, który będzie widoczny w dalszej części tego ćwiczenia.
Otwórz calendar-events.component.html i pośmiń chwilę na przejrzenie kodu. Pełna ścieżka do pliku to client/src/app/calendar-events/calendar-events.component.html. Zobaczysz, że jest ona bardzo podobna do składników plików i wiadomości e-mail, które zostały wcześniej wyświetlone.
```
<mgt-search-results 
    class="search-results" 
    entity-types="event" 
    [queryString]="searchText"
    (dataChange)="dataChange($any($event))">
    <template data-type="result-event"></template>
</mgt-search-results>
```
W tym przykładzie składnika mgt-search-results skonfigurowano taki sam sposób, jak te, które były wcześniej analizowane. Jedyną różnicą jest to, że entity-types atrybut jest ustawiony do event wyszukiwania zdarzeń kalendarza i jest dostarczany pusty szablon.
- Atrybut służy do określania class , że search-results klasa CSS powinna być stosowana do składnika.
- Atrybut entity-types służy do określania typu danych do wyszukania. W tym przypadku wartość to event.
- Atrybut queryString służy do określania terminu wyszukiwania.
- Zdarzenie dataChange jest uruchamiane po zmianie wyników wyszukiwania. Funkcja składnika zdarzeniadataChange()jest wywoływana, wyniki są do niego przekazywane, a właściwość o nazwie data jest aktualizowana w składniku.
- Pusty szablon jest zdefiniowany dla składnika. W tym scenariuszu mówimy składnikowi, aby nie renderować żadnych danych. Zamiast tego renderujemy dane przy użyciu standardowego powiązania danych.

Bezpośrednio poniżej mgt-search-results składnika w calendar-events.component.html znajdziesz powiązania danych używane do renderowania zdarzeń kalendarza. W tym przykładzie data iteruje za pośrednictwem właściwości i zapisuje datę rozpoczęcia, godzinę i temat zdarzenia. Funkcje niestandardowe zawarte w składniku, takie jak dayFromDateTime() i timeRangeFromEvent() , są wywoływane w celu poprawnego formatowania danych. Powiązania HTML zawierają również link umożliwiający wyświetlenie zdarzenia kalendarza w programie Outlook oraz lokalizację zdarzenia, jeśli zostanie określone.

@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>
}

Oprócz wyszukiwania zdarzeń kalendarza przy użyciu interfejsu search/query API program Microsoft Graph udostępnia events również interfejs API, który może służyć do wyszukiwania zdarzeń kalendarza. searchCalendarEvents() Znajdź funkcję w graph.service.ts.
Funkcja searchCalendarEvents() tworzy wartości daty/godziny rozpoczęcia i zakończenia, które są używane do definiowania okresu do wyszukiwania. Następnie tworzy adres URL, który może służyć do wywoływania events punktu końcowego programu Microsoft Graph i zawiera query parametr oraz zmienne daty/godziny rozpoczęcia i zakończenia. Następnie zostanie wykonane żądanie GET, a wyniki zostaną zwrócone do wywołującego.
```
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;
}
```
- Oto podział utworzonego adresu URL:
  - Część /me/events adresu URL służy do określania, że należy pobrać zdarzenia zalogowanego użytkownika.
  - Parametry startdatetime i enddatetime służą do definiowania okresu do wyszukiwania. W takim przypadku wyszukiwanie zwróci zdarzenia rozpoczynające się w ciągu najbliższych 7 dni.
  - Parametr $filter zapytania służy do filtrowania wyników według query wartości (nazwa firmy wybrana z usługi datagrid w tym przypadku). Funkcja contains() służy do wyszukiwania query wartości we subject właściwości zdarzenia kalendarza.
  - $orderby Parametr zapytania służy do zamawiania wyników przez start/dateTime właściwość .
Po utworzeniu url obiektu żądanie GET jest wykonywane do interfejsu API programu Microsoft Graph przy użyciu wartości url , a wyniki są zwracane do obiektu wywołującego.
Podobnie jak w przypadku poprzednich składników, składnik calendar-events (plik calendar-events.component.ts ) wywołuje search() i wyświetla wyniki.
```
override async search(query: string) {
    this.data = await this.graphService.searchCalendarEvents(query);
}
```
Uwaga / Notatka

Możesz również wykonywać wywołania programu Microsoft Graph z niestandardowego interfejsu API lub aplikacji po stronie serwera. Zapoznaj się z poniższym samouczkiem , aby zobaczyć przykład wywoływania interfejsu API programu Microsoft Graph z funkcji platformy Azure.
Znasz już przykład użycia programu Microsoft Graph do pobierania plików, czatów, wiadomości e-mail i wydarzeń kalendarza. Te same pojęcia można również zastosować do innych interfejsów API programu Microsoft Graph. Na przykład możesz użyć interfejsu API użytkowników programu Microsoft Graph do wyszukiwania użytkowników w organizacji. Możesz również użyć interfejsu API grup programu Microsoft Graph do wyszukiwania grup w organizacji. Pełną listę interfejsów API programu Microsoft Graph można wyświetlić w dokumentacji.

Następny krok

Gratulacje

Sprzężenie zwrotne

Czy ta strona była pomocna?

Last updated on 2025-06-13