Szervezeti adatok: E-mailek és naptáresemények lekérése

Az előző gyakorlatban megtanulta, hogyan kérhet le fájlokat a OneDrive Vállalati verzióból, és hogyan cseveghet a Microsoft Teamsből a Microsoft Graph és a Microsoft Graph Toolkit mgt-search-results összetevőjének használatával. Azt is megtanulta, hogyan küldhet üzeneteket a Microsoft Teams csatornáinak. Ebben a gyakorlatban megtanulhatja, hogyan szerezheti be az e-maileket és a naptáreseményeket a Microsoft Graphból, és hogyan integrálhatja őket az alkalmazásba.

Ebben a gyakorlatban a következőt fogja elvégezni:

Megtudhatja, hogyan használható a Microsoft Graph Toolkit mgt-search-results webes összetevője e-mailek és naptáresemények keresésére.
Megtudhatja, hogyan szabhatja testre az mgt-search-results összetevőt a keresési eredmények egyéni megjelenítéséhez.
Megtudhatja, hogyan hívhatja meg közvetlenül a Microsoft Graphot e-mailek és naptáresemények lekéréséhez.

Az e-mail-üzenetek keresési kódját vizsgálva

Jótanács

Ha Visual Studio Code-ot használ, közvetlenül a következő kiválasztásával nyithatja meg a fájlokat:

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

Ezután írja be a megnyitni kívánt fájl nevét.

Egy korábbi gyakorlatban létrehozott egy alkalmazásregisztrációt a Microsoft Entra-azonosítóban, és elindította az alkalmazáskiszolgálót és az API-kiszolgálót. A fájlban a következő értékeket is frissítette .env .
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
A folytatás előtt győződjön meg arról, hogy elvégezte az előző gyakorlatot .
Nyissa meg emails.component.html , és szánjon egy kis időt a kód megtekintésére. A fájl teljes elérési útja az ügyfél/src/alkalmazás/e-mail/emails.component.html.
Keresse meg az mgt-search-results összetevőt :
```
<mgt-search-results 
  class="search-results" 
  entity-types="message" 
  [queryString]="searchText"
  (dataChange)="dataChange($any($event))">
  <template data-type="result-message"></template>
</mgt-search-results>
```
Az mgt-search-results összetevőnek ez a példája ugyanúgy van konfigurálva, mint a korábban megtekintett összetevő. Az egyetlen különbség az, hogy az entity-types attribútum be van állítva message , amely az e-mailek keresésére szolgál, és egy üres sablont ad meg.
- Az class attribútum azt határozza meg, hogy a search-results CSS-osztályt alkalmazni kell az összetevőre.
- Az entity-types attribútum a keresendő adatok típusának megadására szolgál. Ebben az esetben az érték .message
- Az queryString attribútum a keresési kifejezés megadására szolgál.
- Az dataChange esemény a keresési eredmények megváltozásakor aktiválódik. A rendszer meghívja az e-mail-összetevő függvényét dataChange() , az eredményeket átadja neki, és egy névvel ellátott data tulajdonság frissül az összetevőben.
- Az összetevőhöz üres sablon van definiálva. Ez a sablontípus általában a keresési eredmények megjelenítésének meghatározására szolgál. Ebben a forgatókönyvben azonban arra utasítjuk az összetevőt, hogy ne jelenítsen meg üzenetadatokat. Ehelyett mi magunk rendereljük az adatokat standard adatkötéssel (ebben az esetben az Angulart használjuk, de bármilyen kódtárat/keretrendszert használhat).

Az mgt-search-results összetevő alatt keresse meg az e-mailek megjelenítéséhez használt adatkötéseket a emails.component.html . Ez a példa végigvezeti a data tulajdonságon, és kiírja az e-mail tárgyát, a törzs előnézetét és egy hivatkozást a teljes e-mail megtekintéséhez.

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

E-mailek megtekintése

AMellett, hogy az mgt-search-results összetevőt használja az üzenetek lekéréséhez, a Microsoft Graph számos API-t biztosít, amelyek az e-mailek keresésére is használhatók. A /search/query korábban látott API-t minden bizonnyal használhatja, de egyszerűbb megoldás az messages API.
Ha meg szeretné tudni, hogyan hívhatja meg ezt az API-t, lépjen vissza a graph.service.ts , és keresse meg a függvényt searchEmailMessages() . Létrehoz egy URL-címet, amellyel meghívható a messages Microsoft Graph végpontja, és hozzárendeli az query értéket a $search paraméterhez. A kód ezután get kérést küld, és visszaadja az eredményeket a hívónak. Az $search operátor automatikusan megkeresi az értéket a query tárgy, a törzs és a feladó mezőkben.
```
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;
}
```

A megjeleníti az eredményeket a felhasználói felületen.

override async search(query: string) {
    this.data = await this.graphService.searchEmailMessages(query);
}

Naptáresemények keresési kódjának felfedezése

A naptáresemények keresése az mgt-search-results összetevővel is elvégezhető. Képes kezelni az eredmények megjelenítését, de saját sablont is megadhat, amelyet a gyakorlat későbbi részében fog látni.
Nyissa meg calendar-events.component.html , és szánjon egy kis időt a kód megtekintésére. A fájl teljes elérési útja az ügyfél/src/app/calendar-events/calendar-events.component.html. Látni fogja, hogy ez nagyon hasonlít a korábban megvizsgált fájlokhoz és e-mail-összetevőkhöz.
```
<mgt-search-results 
    class="search-results" 
    entity-types="event" 
    [queryString]="searchText"
    (dataChange)="dataChange($any($event))">
    <template data-type="result-event"></template>
</mgt-search-results>
```
Az mgt-search-results összetevőnek ez a példája ugyanúgy van konfigurálva, mint a korábban vizsgáltak. Az egyetlen különbség az, hogy az entity-types attribútum a event naptáresemények keresésére szolgál, és egy üres sablont ad meg.
- Az class attribútum azt határozza meg, hogy a search-results CSS-osztályt alkalmazni kell az összetevőre.
- Az entity-types attribútum a keresendő adatok típusának megadására szolgál. Ebben az esetben az érték .event
- Az queryString attribútum a keresési kifejezés megadására szolgál.
- Az dataChange esemény a keresési eredmények megváltozásakor aktiválódik. A rendszer meghívja a naptáresemény-összetevő függvényétdataChange(), az eredményeket átadja neki, és egy névvel ellátott data tulajdonság frissül az összetevőben.
- Az összetevőhöz üres sablon van definiálva. Ebben a forgatókönyvben arra utasítjuk az összetevőt, hogy ne jelenítsen meg adatokat. Ehelyett mi magunk rendereljük az adatokat standard adatkötéssel.

Közvetlenül a mgt-search-resultscalendar-events.component.html összetevő alatt megtalálja a naptáresemények megjelenítéséhez használt adatkötéseket. Ez a példa végigvezeti a data tulajdonságon, és kiírja az esemény kezdő dátumát, időpontját és tárgyát. Az összetevőben található egyéni függvények, például dayFromDateTime()timeRangeFromEvent() az adatok megfelelő formázására vannak meghívva. A HTML-kötések egy hivatkozást is tartalmaznak a naptáresemény Outlookban való megtekintéséhez, illetve az esemény helyének megtekintéséhez, ha van megadva.

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

AMellett, hogy naptáreseményeket keres az API használatával, a search/query Microsoft Graph egy events olyan API-t is biztosít, amely a naptáresemények keresésére is használható. Keresse meg a függvényt a searchCalendarEvents()graph.service.ts.
A searchCalendarEvents() függvény kezdő és záró dátum/idő értékeket hoz létre, amelyek a keresés időtartamának meghatározására szolgálnak. Ezután létrehoz egy URL-címet, amely a Microsoft Graph végpontjának meghívására events használható, és tartalmazza a paramétert, valamint a query kezdési és befejezési dátum/idő változókat. Ezután a rendszer get kérést küld, és az eredményeket visszaadja a hívónak.
```
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;
}
```
- Íme a létrehozott URL-cím lebontása:
  - Az /me/events URL-cím azon része, amely meghatározza, hogy a bejelentkezett felhasználó eseményeit le kell kérni.
  - startdatetime A enddatetime rendszer a keresési időtartam meghatározásához használja a paramétereket. Ebben az esetben a keresés a következő 7 napon belül kezdődő eseményeket adja vissza.
  - A $filter lekérdezési paraméter az eredmények érték szerinti query szűrésére szolgál (ebben az esetben a datagridből kiválasztott cégnév). A contains() függvény a naptáresemény tulajdonságában lévő query érték keresésére subject szolgál.
  - A $orderby lekérdezési paraméterrel a tulajdonság rendezheti az start/dateTime eredményeket.
url A létrehozás után get kérést küld a Microsoft Graph API-nak az érték alapjánurl, és az eredmények vissza lesznek adva a hívónak.
Az előző összetevőkhöz hasonlóan a naptáresemény-összetevő (calendar-events.component.ts fájl) meghívja search() és megjeleníti az eredményeket.
```
override async search(query: string) {
    this.data = await this.graphService.searchCalendarEvents(query);
}
```
Megjegyzés:

Microsoft Graph-hívásokat egyéni API-ból vagy kiszolgálóoldali alkalmazásból is kezdeményezhet. Tekintse meg az alábbi oktatóanyagot , amely egy Microsoft Graph API Azure-függvényből való meghívására mutat be példát.
Most már láthatott példát arra, hogyan használhatja a Microsoft Graphot fájlok, csevegések, e-mailek és naptáresemények lekérésére. Ugyanezek a fogalmak alkalmazhatók más Microsoft Graph API-kra is. Használhatja például a Microsoft Graph felhasználói API-t a szervezet felhasználóinak keresésére. A Microsoft Graph groups API-val is kereshet csoportokat a szervezetében. A Microsoft Graph API-k teljes listáját a dokumentációban tekintheti meg.

Következő lépés

Gratulálok

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2025-06-13