Datos de la organización: recuperación de correos electrónicos y eventos de calendario

En el ejercicio anterior ha aprendido a recuperar archivos de OneDrive para la Empresa y chats de Microsoft Teams mediante Microsoft Graph y el componente mgt-search-results del Kit de herramientas de Microsoft Graph. También ha aprendido a enviar mensajes a los canales de Microsoft Teams. En este ejercicio, aprenderá a recuperar mensajes de correo electrónico y eventos de calendario de Microsoft Graph e integrarlos en la aplicación.

En este ejercicio, aprenderá a:

Obtenga información sobre cómo se puede usar el componente web mgt-search-results del kit de herramientas de Microsoft Graph para buscar correos electrónicos y eventos de calendario.
Obtenga información sobre cómo personalizar el componente mgt-search-results para representar los resultados de búsqueda de forma personalizada.
Obtenga información sobre cómo llamar directamente a Microsoft Graph para recuperar correos electrónicos y eventos de calendario.

Exploración del código de búsqueda de mensajes de correo electrónico

Sugerencia

Si usa Visual Studio Code, puede abrir archivos directamente seleccionando:

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

A continuación, escriba el nombre del archivo que desea abrir.

En un ejercicio anterior , creó un registro de aplicación en el identificador de Microsoft Entra e inició el servidor de aplicaciones y el servidor de API. También ha actualizado los siguientes valores en el .env archivo.
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Asegúrese de que ha completado el ejercicio anterior antes de continuar.
Abra emails.component.html y dedique un momento a examinar el código. La ruta de acceso completa al archivo es client/src/app/emails/emails.component.html.
Busque el 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>
```
Este ejemplo del componente mgt-search-results se configura de la misma manera que la que miró anteriormente. La única diferencia es que el atributo se establece entity-types en el message que se usa para buscar mensajes de correo electrónico y se proporciona una plantilla vacía.
- El class atributo se usa para especificar que la search-results clase CSS se debe aplicar al componente.
- El entity-types atributo se usa para especificar el tipo de datos que se va a buscar. En este caso, el valor es message.
- El queryString atributo se usa para especificar el término de búsqueda.
- El dataChange evento se desencadena cuando cambian los resultados de la búsqueda. Se llama a la función del dataChange() componente de correos electrónicos, los resultados se le pasan y se actualiza una propiedad denominada data en el componente.
- Se define una plantilla vacía para el componente. Este tipo de plantilla se usa normalmente para definir cómo se representarán los resultados de la búsqueda. Sin embargo, en este escenario se indica al componente que no represente ningún dato de mensaje. En su lugar, se representarán los datos mediante el enlace de datos estándar (Angular se usa en este caso, pero puede usar cualquier biblioteca o marco que desee).

Busque debajo del componente mgt-search-results en emails.component.html para buscar los enlaces de datos usados para representar los mensajes de correo electrónico. En este ejemplo se recorre en iteración la data propiedad y se escribe el asunto del correo electrónico, la vista previa del cuerpo y un vínculo para ver el mensaje de correo electrónico 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>
}

Visualización de mensajes de correo electrónico

Además de usar el componente mgt-search-results para recuperar mensajes, Microsoft Graph proporciona varias API que también se pueden usar para buscar correos electrónicos. La /search/query API que vio anteriormente podría usarse, pero una opción más sencilla es la messages API.
Para ver cómo llamar a esta API, vuelva a graph.service.ts y busque la searchEmailMessages() función. Crea una dirección URL que se puede usar para llamar al messages punto de conexión de Microsoft Graph y asigna el query valor al $search parámetro . A continuación, el código realiza una solicitud GET y devuelve los resultados al autor de la llamada. El $search operador busca automáticamente el query valor en los campos asunto, cuerpo y remitente.
```
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;
}
```
El componente de correos electrónicos ubicado en emails.component.ts llama searchEmailMessages() a y muestra los resultados en la interfaz de usuario.
```
override async search(query: string) {
    this.data = await this.graphService.searchEmailMessages(query);
}
```

Exploración del código de búsqueda de eventos de calendario

La búsqueda de eventos de calendario también se puede realizar mediante el componente mgt-search-results . Puede controlar la representación de los resultados, pero también puede definir su propia plantilla que verá más adelante en este ejercicio.
Abra calendar-events.component.html y dedique un momento a examinar el código. La ruta de acceso completa al archivo es client/src/app/calendar-events/calendar-events.component.html. Verá que es muy similar a los archivos y los componentes de correos electrónicos que miró anteriormente.
```
<mgt-search-results 
    class="search-results" 
    entity-types="event" 
    [queryString]="searchText"
    (dataChange)="dataChange($any($event))">
    <template data-type="result-event"></template>
</mgt-search-results>
```
Este ejemplo del componente mgt-search-results se configura de la misma manera que los que miró anteriormente. La única diferencia es que el atributo se establece entity-types en el event que se usa para buscar eventos de calendario y se proporciona una plantilla vacía.
- El class atributo se usa para especificar que la search-results clase CSS se debe aplicar al componente.
- El entity-types atributo se usa para especificar el tipo de datos que se va a buscar. En este caso, el valor es event.
- El queryString atributo se usa para especificar el término de búsqueda.
- El dataChange evento se desencadena cuando cambian los resultados de la búsqueda. Se llama a la función del componente de evento, los resultados se le pasan y se actualiza una propiedad denominada dataChange() en el componente.
- Se define una plantilla vacía para el componente. En este escenario se indica al componente que no represente ningún dato. En su lugar, se representarán los datos mediante el enlace de datos estándar.

Inmediatamente debajo del mgt-search-results componente de calendar-events.component.html encontrará los enlaces de datos usados para representar los eventos del calendario. En este ejemplo se recorre en iteración la data propiedad y se escribe la fecha de inicio, la hora y el asunto del evento. Las funciones personalizadas incluidas en el componente como dayFromDateTime() y timeRangeFromEvent() se llaman para dar formato a los datos correctamente. Los enlaces HTML también incluyen un vínculo para ver el evento de calendario en Outlook y la ubicación del evento si se especifica uno.

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

Además de buscar eventos de calendario mediante la search/query API, Microsoft Graph también proporciona una events API que también se puede usar para buscar eventos de calendario. Busque la searchCalendarEvents() función en graph.service.ts.
La searchCalendarEvents() función crea valores de fecha y hora de inicio y finalización que se usan para definir el período de tiempo que se va a buscar. A continuación, crea una dirección URL que se puede usar para llamar al events punto de conexión de Microsoft Graph e incluye el parámetro y las query variables de fecha y hora de inicio y finalización. A continuación, se realiza una solicitud GET y los resultados se devuelven al autor de la llamada.
```
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;
}
```
- Este es un desglose de la dirección URL que se crea:
  - La /me/events parte de la dirección URL se usa para especificar que se deben recuperar los eventos del usuario que ha iniciado sesión.
  - Los startdatetime parámetros y enddatetime se usan para definir el período de tiempo que se va a buscar. En este caso, la búsqueda devolverá eventos que se inician en los próximos 7 días.
  - El $filter parámetro de consulta se usa para filtrar los resultados por el query valor (el nombre de la compañía seleccionado en el datagrid en este caso). La contains() función se usa para buscar el query valor en la subject propiedad del evento de calendario.
  - El $orderby parámetro de consulta se usa para ordenar los resultados por la start/dateTime propiedad .
url Una vez creado, se realiza una solicitud GET a Microsoft Graph API mediante el valor de url y los resultados se devuelven al autor de la llamada.
Al igual que con los componentes anteriores, el componente calendar-events (calendar-events.component.ts archivo) llama search() a y muestra los resultados.
```
override async search(query: string) {
    this.data = await this.graphService.searchCalendarEvents(query);
}
```
Nota:

También puede realizar llamadas de Microsoft Graph desde una API personalizada o una aplicación del lado servidor. Consulte el siguiente tutorial para ver un ejemplo de llamada a Microsoft Graph API desde una función de Azure.
Ahora ha visto un ejemplo de uso de Microsoft Graph para recuperar archivos, chats, mensajes de correo electrónico y eventos de calendario. También se pueden aplicar los mismos conceptos a otras API de Microsoft Graph. Por ejemplo, podría usar la API de usuarios de Microsoft Graph para buscar usuarios de su organización. También puede usar la API de grupos de Microsoft Graph para buscar grupos en su organización. Puede ver la lista completa de las API de Microsoft Graph en la documentación.

Paso siguiente

Felicidades

Comentarios

¿Le ha resultado útil esta página?

Last updated on 2025-06-13