Data organizace: Načítání e-mailů a kalendářových událostí

2025-06-13

V předchozím cvičení jste se dozvěděli, jak načíst soubory z OneDrive for Business a chaty z Microsoft Teams pomocí Microsoft Graph a komponenty mgt-search-results z Microsoft Graph Toolkit. Dozvěděli jste se také, jak odesílat zprávy do kanálů Microsoft Teams. V tomto cvičení se dozvíte, jak načíst e-mailové zprávy a události kalendáře z Microsoft Graphu a integrovat je do aplikace.

V tomto cvičení budete:

Zjistěte, jak lze webovou komponentu mgt-search-results v sadě Microsoft Graph Toolkit použít k vyhledávání e-mailů a událostí kalendáře.
Přečtěte si, jak přizpůsobit komponentu mgt-search-results pro vykreslení výsledků hledání vlastním způsobem.
Zjistěte, jak volat Microsoft Graph přímo za účelem načtení e-mailů a událostí kalendáře.

Zkoumání kódu hledání e-mailových zpráv

Návod

Pokud používáte Visual Studio Code, můžete soubory otevřít přímo tak, že vyberete:

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

Potom zadejte název souboru, který chcete otevřít.

V předchozím cvičení jste vytvořili registraci aplikace v Microsoft Entra ID a spustili aplikační server a server rozhraní API. Aktualizovali jste také následující hodnoty v .env souboru.
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Než budete pokračovat, ujistěte se, že jste dokončili předchozí cvičení .
Otevřete emails.component.html a chvíli se podívejte na kód. Úplná cesta k souboru je klient/src/app/email/emails.component.html.
Vyhledejte komponentu 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>
```
Tento příklad komponenty mgt-search-results je nakonfigurovaný stejným způsobem jako v předchozím příkladu. Jediným rozdílem je, že entity-types atribut je nastavený na to, který message slouží k hledání e-mailových zpráv a je zadána prázdná šablona.
- Atribut class se používá k určení, že search-results třída CSS by měla být použita pro komponentu.
- Atribut entity-types se používá k určení typu dat, která se mají vyhledat. V tomto případě je messagehodnota .
- Atribut queryString se používá k určení hledaného termínu.
- Událost dataChange se aktivuje, když se změní výsledky hledání. Volá se dataChange() funkce komponenty e-mailů, výsledky se jí předají a v komponentě se aktualizuje vlastnost s názvem data .
- Pro komponentu je definována prázdná šablona. Tento typ šablony se obvykle používá k definování způsobu vykreslení výsledků hledání. V tomto scénáři ale říkáme komponentě, aby nevykreslila žádná data zpráv. Místo toho vykreslíme data sami pomocí standardní datové vazby (v tomto případě se používá Angular, ale můžete použít libovolnou knihovnu nebo architekturu, kterou chcete).

V emails.component.html vyhledejte datové vazby používané k vykreslení e-mailových zpráv pod komponentou mgt-search-results. Tento příklad iteruje data vlastnost a zapíše předmět e-mailu, náhled textu a odkaz pro zobrazení celé e-mailové zprávy.

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

Zobrazení e-mailových zpráv

Kromě použití komponenty mgt-search-results k načtení zpráv poskytuje Microsoft Graph několik rozhraní API, která lze použít také k vyhledávání e-mailů. Rozhraní /search/query API, které jste viděli dříve, by se určitě dalo použít, ale jednodušší možností je messages rozhraní API.

Pokud chcete zjistit, jak toto rozhraní API volat, vraťte se do graph.service.ts a vyhledejte searchEmailMessages() funkci. Vytvoří adresu URL, která se dá použít k volání messages koncového bodu Microsoft Graphu a přiřadí query hodnotu parametru $search . Kód pak vytvoří požadavek GET a vrátí výsledky volajícímu. Operátor $search vyhledá query hodnotu v polích předmětu, textu a odesílatele automaticky.

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

Komponenta e-mailů umístěná v emails.component.ts volání searchEmailMessages() a zobrazí výsledky v uživatelském rozhraní.
```
override async search(query: string) {
    this.data = await this.graphService.searchEmailMessages(query);
}
```

Prozkoumání kódu vyhledávání událostí kalendáře

Hledání událostí kalendáře lze provést také pomocí komponenty mgt-search-results . Dokáže zpracovat vykreslování výsledků za vás, ale můžete také definovat vlastní šablonu, kterou uvidíte později v tomto cvičení.
Otevřete calendar-events.component.html a chvíli se podívejte na kód. Úplná cesta k souboru je client/src/app/calendar-events/calendar-events.component.html. Uvidíte, že je velmi podobné komponentám souborů a e-mailů, na které jste se podívali dříve.
```
<mgt-search-results 
    class="search-results" 
    entity-types="event" 
    [queryString]="searchText"
    (dataChange)="dataChange($any($event))">
    <template data-type="result-event"></template>
</mgt-search-results>
```
Tento příklad komponenty mgt-search-results je nakonfigurovaný stejným způsobem jako ty, na které jste se podívali dříve. Jediným rozdílem je, že entity-types atribut je nastavený na event to, který slouží k vyhledávání událostí kalendáře a je zadána prázdná šablona.
- Atribut class se používá k určení, že search-results třída CSS by měla být použita pro komponentu.
- Atribut entity-types se používá k určení typu dat, která se mají vyhledat. V tomto případě je eventhodnota .
- Atribut queryString se používá k určení hledaného termínu.
- Událost dataChange se aktivuje, když se změní výsledky hledání. Volá se funkce komponenty událostidataChange(), výsledky se jí předají a v této komponentě se aktualizuje vlastnost s názvemdata.
- Pro komponentu je definována prázdná šablona. V tomto scénáři říkáme komponentě, aby nevykreslila žádná data. Místo toho vykreslíme data sami pomocí standardní datové vazby.

Přímo pod komponentou mgt-search-results v calendar-events.component.html najdete datové vazby použité k vykreslení událostí kalendáře. Tento příklad iteruje vlastnost data a zapíše počáteční datum, čas a předmět události. Vlastní funkce zahrnuté v komponentě, například dayFromDateTime() a timeRangeFromEvent() jsou volána pro správné formátování dat. Vazby HTML obsahují také odkaz pro zobrazení události kalendáře v Outlooku a umístění události, pokud je zadána.

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

Kromě hledání událostí kalendáře pomocí search/query rozhraní API poskytuje events Microsoft Graph také rozhraní API, které lze použít také k vyhledávání událostí kalendáře. searchCalendarEvents() Vyhledejte funkci v graph.service.ts.
Funkce searchCalendarEvents() vytvoří hodnoty počátečního a koncového data a času, které slouží k definování časového období, které se má prohledávat. Pak vytvoří adresu URL, která se dá použít k volání events koncového bodu Microsoft Graphu query a obsahuje parametr a počáteční a koncové proměnné data a času. Pak se provede požadavek GET a výsledky se vrátí volajícímu.
```
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;
}
```
- Tady je rozpis vytvořené adresy URL:
  - Část /me/events adresy URL slouží k určení, že se mají načíst události přihlášeného uživatele.
  - startdatetime Parametry enddatetime se používají k definování časového období pro vyhledávání. V takovém případě hledání vrátí události, které se spustí během následujících 7 dnů.
  - Parametr $filter dotazu slouží k filtrování výsledků podle query hodnoty (název společnosti vybraný z datagridu v tomto případě). Funkce contains() slouží k vyhledání query hodnoty ve subject vlastnosti události kalendáře.
  - Parametr $orderby dotazu slouží k seřazení výsledků vlastností start/dateTime .
url Po vytvoření se do rozhraní Microsoft Graph API vytvoří požadavek GET s použitím hodnoty url a výsledky se vrátí volajícímu.
Stejně jako u předchozích komponent volá komponenta událostí kalendáře (search() soubor) a zobrazuje výsledky.
```
override async search(query: string) {
    this.data = await this.graphService.searchCalendarEvents(query);
}
```
Poznámka:

Volání Microsoft Graphu můžete provádět také z vlastní aplikace api nebo serverové aplikace. Podívejte se na následující kurz a podívejte se na příklad volání rozhraní Microsoft Graph API z funkce Azure Functions.
Teď jste viděli příklad použití Microsoft Graphu k načtení souborů, chatů, e-mailových zpráv a událostí kalendáře. Stejné koncepty je možné použít i u jiných rozhraní Microsoft Graph API. K vyhledávání uživatelů ve vaší organizaci můžete například použít rozhraní API pro uživatele Microsoft Graphu. K hledání skupin ve vaší organizaci můžete použít také rozhraní API pro skupiny Microsoft Graphu. Úplný seznam rozhraní Microsoft Graph API můžete zobrazit v dokumentaci.

Další krok

Blahopřejeme

Sdílet prostřednictvím

Data organizace: Načítání e-mailů a kalendářových událostí

Zkoumání kódu hledání e-mailových zpráv

Prozkoumání kódu vyhledávání událostí kalendáře

Další krok

Váš názor

Další materiály