Dati dell'organizzazione: recupero di messaggi di posta elettronica ed eventi del calendario

2025-06-13

Nell'esercizio precedente si è appreso come recuperare i file da OneDrive for Business e le chat da Microsoft Teams usando Microsoft Graph e il componente mgt-search-results di Microsoft Graph Toolkit. Si è anche appreso come inviare messaggi ai canali di Microsoft Teams. In questo esercizio si apprenderà come recuperare i messaggi di posta elettronica e gli eventi del calendario da Microsoft Graph e integrarli nell'applicazione.

In questo esercizio si eseguiranno le seguenti operazioni:

Informazioni su come usare il componente Web mgt-search-results in Microsoft Graph Toolkit per cercare messaggi di posta elettronica ed eventi del calendario.
Informazioni su come personalizzare il componente mgt-search-results per eseguire il rendering dei risultati della ricerca in modo personalizzato.
Informazioni su come chiamare Direttamente Microsoft Graph per recuperare messaggi di posta elettronica ed eventi del calendario.

Esplorazione del codice di ricerca dei messaggi di posta elettronica

Suggerimento

Se si usa Visual Studio Code, è possibile aprire direttamente i file selezionando:

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

Digitare quindi il nome del file che si desidera aprire.

In un esercizio precedente è stata creata una registrazione dell'app in Microsoft Entra ID e sono stati avviati il server applicazioni e il server API. Nel file sono stati aggiornati anche i valori .env seguenti.
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Assicurarsi di aver completato l'esercizio precedente prima di continuare.
Aprire emails.component.html e esaminare il codice. Il percorso completo del file è client/src/app/emails/emails.component.html.
Individuare il componente 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>
```
Questo esempio del componente mgt-search-results è configurato allo stesso modo di quello esaminato in precedenza. L'unica differenza è che l'attributo entity-types è impostato su message cui viene usato per cercare messaggi di posta elettronica e viene fornito un modello vuoto.
- L'attributo class viene usato per specificare che la search-results classe CSS deve essere applicata al componente.
- L'attributo entity-types viene usato per specificare il tipo di dati da cercare. In questo caso il valore è message.
- L'attributo queryString viene usato per specificare il termine di ricerca.
- L'evento dataChange viene generato quando i risultati della ricerca cambiano. Viene chiamata la funzione del dataChange() componente di posta elettronica, i risultati vengono passati e una proprietà denominata data viene aggiornata nel componente.
- Per il componente viene definito un modello vuoto. Questo tipo di modello viene in genere usato per definire come verrà eseguito il rendering dei risultati della ricerca. In questo scenario, tuttavia, viene indicato al componente di non eseguire il rendering dei dati dei messaggi. Si eseguirà invece il rendering dei dati usando il data binding standard (Angular viene usato in questo caso, ma è possibile usare qualsiasi libreria/framework desiderato).

Esaminare sotto il componente mgt-search-results in emails.component.html per trovare i data binding usati per il rendering dei messaggi di posta elettronica. Questo esempio scorre la data proprietà e scrive l'oggetto del messaggio di posta elettronica, l'anteprima del corpo e un collegamento per visualizzare il messaggio di posta elettronica completo.

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

Visualizzazione dei messaggi di posta elettronica

Oltre a usare il componente mgt-search-results per recuperare i messaggi, Microsoft Graph offre diverse API che possono essere usate anche per cercare i messaggi di posta elettronica. L'API /search/query illustrata in precedenza potrebbe certamente essere usata, ma un'opzione più semplice è l'API messages .

Per informazioni su come chiamare questa API, tornare a graph.service.ts e individuare la searchEmailMessages() funzione. Crea un URL che può essere usato per chiamare l'endpoint messages di Microsoft Graph e assegna il query valore al $search parametro . Il codice effettua quindi una richiesta GET e restituisce i risultati al chiamante. L'operatore $search cerca automaticamente il query valore nei campi oggetto, corpo e mittente.

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

Il componente di posta elettronica che si trova in emails.component.ts chiama searchEmailMessages() e visualizza i risultati nell'interfaccia utente.
```
override async search(query: string) {
    this.data = await this.graphService.searchEmailMessages(query);
}
```

Esplorazione del codice di ricerca degli eventi del calendario

La ricerca di eventi del calendario può essere eseguita anche usando il componente mgt-search-results . Può gestire il rendering dei risultati, ma è anche possibile definire un modello personalizzato che verrà visualizzato più avanti in questo esercizio.
Aprire calendar-events.component.html e esaminare il codice. Il percorso completo del file è client/src/app/calendar-events/calendar-events.component.html. Si noterà che è molto simile ai file e ai componenti di posta elettronica esaminati in precedenza.
```
<mgt-search-results 
    class="search-results" 
    entity-types="event" 
    [queryString]="searchText"
    (dataChange)="dataChange($any($event))">
    <template data-type="result-event"></template>
</mgt-search-results>
```
Questo esempio del componente mgt-search-results è configurato allo stesso modo di quelli esaminati in precedenza. L'unica differenza è che l'attributo entity-types è impostato su event cui viene usato per cercare gli eventi del calendario e viene fornito un modello vuoto.
- L'attributo class viene usato per specificare che la search-results classe CSS deve essere applicata al componente.
- L'attributo entity-types viene usato per specificare il tipo di dati da cercare. In questo caso il valore è event.
- L'attributo queryString viene usato per specificare il termine di ricerca.
- L'evento dataChange viene generato quando i risultati della ricerca cambiano. Viene chiamata la funzione del componente dell'evento del calendario
- Per il componente viene definito un modello vuoto. In questo scenario viene indicato al componente di non eseguire il rendering di dati. Si eseguirà invece il rendering dei dati usando il data binding standard.

Immediatamente sotto il mgt-search-results componente in calendar-events.component.html troverai i data binding usati per eseguire il rendering degli eventi del calendario. Questo esempio scorre la data proprietà e scrive la data, l'ora e l'oggetto dell'evento. Le funzioni personalizzate incluse nel componente, dayFromDateTime() ad esempio e timeRangeFromEvent() , vengono chiamate per formattare correttamente i dati. Le associazioni HTML includono anche un collegamento per visualizzare l'evento del calendario in Outlook e il percorso dell'evento, se specificato.

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

Oltre a cercare eventi di calendario usando l'API search/query , Microsoft Graph fornisce anche un'API events che può essere usata anche per cercare eventi del calendario. Individuare la searchCalendarEvents() funzione in graph.service.ts.
La searchCalendarEvents() funzione crea valori di data/ora di inizio e di fine usati per definire il periodo di tempo in cui eseguire la ricerca. Viene quindi creato un URL che può essere usato per chiamare l'endpoint events di Microsoft Graph e include il parametro e le query variabili di data/ora di inizio e fine. Viene quindi effettuata una richiesta GET e i risultati vengono restituiti al chiamante.
```
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;
}
```
- Ecco una suddivisione dell'URL creato:
  - La /me/events parte dell'URL viene usata per specificare che gli eventi dell'utente connesso devono essere recuperati.
  - I startdatetime parametri e enddatetime vengono usati per definire il periodo di tempo in cui eseguire la ricerca. In questo caso, la ricerca restituirà eventi che iniziano entro i 7 giorni successivi.
  - Il $filter parametro di query viene usato per filtrare i risultati in base al query valore , ovvero il nome della società selezionato dal datagrid in questo caso. La contains() funzione viene utilizzata per cercare il query valore nella subject proprietà dell'evento del calendario.
  - Il $orderby parametro della query viene usato per ordinare i risultati in base alla start/dateTime proprietà .
url Dopo la creazione di , viene effettuata una richiesta GET all'API Microsoft Graph usando il valore e url i risultati vengono restituiti al chiamante.
Come per i componenti precedenti, il componente calendar-events (calendar-events.component.ts file) chiama search() e visualizza i risultati.
```
override async search(query: string) {
    this.data = await this.graphService.searchCalendarEvents(query);
}
```
Annotazioni

È possibile effettuare chiamate a Microsoft Graph anche da un'API personalizzata o da un'applicazione lato server. Visualizzare l'esercitazione seguente per visualizzare un esempio di chiamata di un'API Microsoft Graph da una funzione di Azure.
È stato ora illustrato l'uso di Microsoft Graph per recuperare file, chat, messaggi di posta elettronica ed eventi del calendario. Gli stessi concetti possono essere applicati anche ad altre API Microsoft Graph. Ad esempio, è possibile usare l'API utenti di Microsoft Graph per cercare gli utenti dell'organizzazione. È anche possibile usare l'API gruppi di Microsoft Graph per cercare i gruppi nell'organizzazione. È possibile visualizzare l'elenco completo delle API Microsoft Graph nella documentazione.

Passaggio successivo

Felicitazioni

Condividi tramite

Dati dell'organizzazione: recupero di messaggi di posta elettronica ed eventi del calendario

Esplorazione del codice di ricerca dei messaggi di posta elettronica

Esplorazione del codice di ricerca degli eventi del calendario

Passaggio successivo

Commenti e suggerimenti

Risorse aggiuntive