Dados organizacionais: recuperando emails e eventos de calendário

No exercício anterior, você aprendeu a recuperar arquivos do OneDrive for Business e chats do Microsoft Teams usando o Microsoft Graph e o componente mgt-search-results do Microsoft Graph Toolkit. Você também aprendeu a enviar mensagens para canais do Microsoft Teams. Neste exercício, você aprenderá a recuperar mensagens de email e eventos de calendário do Microsoft Graph e integrá-los ao aplicativo.

Neste exercício, você vai:

Saiba como o componente Web mgt-search-results no Kit de Ferramentas do Microsoft Graph pode ser usado para pesquisar emails e eventos de calendário.
Saiba como personalizar o componente mgt-search-results para renderizar os resultados da pesquisa de forma personalizada.
Saiba como chamar o Microsoft Graph diretamente para recuperar emails e eventos de calendário.

Explorando o código de pesquisa de mensagens de e-mail

Dica

Se você estiver usando o Visual Studio Code, poderá abrir arquivos diretamente selecionando:

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

Em seguida, digite o nome do arquivo que deseja abrir.

Em um exercício anterior , você criou um registro de aplicativo na ID do Microsoft Entra e iniciou o servidor de aplicativos e o servidor de API. Você também atualizou os seguintes valores no .env arquivo.
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Verifique se você concluiu o exercício anterior antes de continuar.
Abra emails.component.html e reserve um momento para analisar o código. O caminho completo para o arquivo é client/src/app/emails/emails.component.html.
Localize o 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 exemplo do componente mgt-search-results é configurado da mesma maneira que o que você analisou anteriormente. A única diferença é que o entity-types atributo é definido para message ser usado para pesquisar mensagens de e-mail e um modelo vazio é fornecido.
- O class atributo é usado para especificar que a search-results classe CSS deve ser aplicada ao componente.
- O entity-types atributo é usado para especificar o tipo de dados a serem pesquisados. Nesse caso, o valor é message.
- O queryString atributo é usado para especificar o termo de pesquisa.
- O dataChange evento é acionado quando os resultados da pesquisa são alterados. A função do componente emails é chamada, os resultados são passados dataChange() para ele e uma propriedade chamada data é atualizada no componente.
- Um modelo vazio é definido para o componente. Esse tipo de modelo é normalmente usado para definir como os resultados da pesquisa serão renderizados. No entanto, neste cenário, estamos dizendo ao componente para não renderizar nenhum dado de mensagem. Em vez disso, renderizaremos os dados usando a vinculação de dados padrão (Angular é usado neste caso, mas você pode usar qualquer biblioteca/estrutura que desejar).

Veja abaixo o componente mgt-search-results em emails.component.html para localizar as associações de dados usadas para renderizar as mensagens de email. Este exemplo itera por meio da propriedade e grava o assunto do data email, a visualização do corpo e um link para exibir a mensagem de email completa.

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

Exibindo mensagens de email

Além de usar o componente mgt-search-results para recuperar mensagens, o Microsoft Graph fornece várias APIs que também podem ser usadas para pesquisar emails. A /search/query API que você viu anteriormente certamente poderia ser usada, mas uma opção mais direta é a messages API.

Para ver como chamar essa API, volte para graph.service.ts e localize a searchEmailMessages() função. Ele cria uma URL que pode ser usada para chamar o messages ponto de extremidade do Microsoft Graph e atribui o query valor ao $search parâmetro. Em seguida, o código faz uma solicitação GET e retorna os resultados para o chamador. O $search operador pesquisa o query valor nos campos assunto, corpo e remetente automaticamente.

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

O componente emails localizado em emails.component.ts chamadas searchEmailMessages() e exibe os resultados na interface do usuário.
```
override async search(query: string) {
    this.data = await this.graphService.searchEmailMessages(query);
}
```

Explorando o código de pesquisa de eventos do calendário

A pesquisa de eventos de calendário também pode ser realizada usando o componente mgt-search-results . Ele pode lidar com a renderização dos resultados para você, mas você também pode definir seu próprio modelo, que verá mais adiante neste exercício.
Abra calendar-events.component.html e reserve um momento para analisar o código. O caminho completo para o arquivo é client/src/app/calendar-events/calendar-events.component.html. Você verá que é muito semelhante aos componentes de arquivos e e-mails que você examinou 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 exemplo do componente mgt-search-results é configurado da mesma maneira que os que você examinou anteriormente. A única diferença é que o entity-types atributo é definido para event que é usado para pesquisar eventos de calendário e um modelo vazio é fornecido.
- O class atributo é usado para especificar que a search-results classe CSS deve ser aplicada ao componente.
- O entity-types atributo é usado para especificar o tipo de dados a serem pesquisados. Nesse caso, o valor é event.
- O queryString atributo é usado para especificar o termo de pesquisa.
- O dataChange evento é acionado quando os resultados da pesquisa são alterados. A função do componente de evento de calendário
- Um modelo vazio é definido para o componente. Nesse cenário, estamos dizendo ao componente para não renderizar nenhum dado. Em vez disso, renderizaremos os dados por conta própria usando a vinculação de dados padrão.

Imediatamente abaixo do mgt-search-results componente em calendar-events.component.html você encontrará as associações de dados usadas para renderizar os eventos de calendário. Este exemplo itera pela data propriedade e grava a data de início, a hora e o assunto do evento. As funções personalizadas incluídas no componente, como dayFromDateTime() e timeRangeFromEvent() são chamadas para formatar os dados corretamente. As associações HTML também incluem um link para exibir o evento de calendário no Outlook e o local do evento, se especificado.

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

Além de pesquisar eventos de calendário usando a API, o Microsoft Graph também fornece uma search/query API que também pode ser usada para pesquisar eventos de events calendário. Localize a searchCalendarEvents() função em graph.service.ts.
A searchCalendarEvents() função cria valores de data/hora de início e término que são usados para definir o período de tempo a ser pesquisado. Em seguida, ele cria uma URL que pode ser usada para chamar o events ponto de extremidade do Microsoft Graph e inclui o parâmetro e as query variáveis de data/hora de início e término. Uma solicitação GET é feita e os resultados são retornados ao chamador.
```
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;
}
```
- Veja um detalhamento do URL criado:
  - A /me/events parte da URL é usada para especificar que os eventos do usuário conectado devem ser recuperados.
  - Os startdatetime parâmetros e enddatetime são usados para definir o período de tempo para pesquisar. Nesse caso, a pesquisa retornará eventos que começam nos próximos 7 dias.
  - O $filter parâmetro de consulta é usado para filtrar os resultados pelo query valor (o nome da empresa selecionado na grade de dados neste caso). A contains() função é usada para procurar o query valor na subject propriedade do evento do calendário.
  - O $orderby parâmetro de consulta é usado para ordenar os resultados pela start/dateTime propriedade.
Depois que o url é criado, uma solicitação GET é feita para a API do Microsoft Graph usando o valor de url e os resultados são retornados ao chamador.
Assim como acontece com os componentes anteriores, o componente calendário-eventos (calendar-events.component.ts arquivo) chama search() e exibe os resultados.
```
override async search(query: string) {
    this.data = await this.graphService.searchCalendarEvents(query);
}
```
Observação

Você também pode fazer chamadas do Microsoft Graph de uma API personalizada ou de um aplicativo do lado do servidor. Veja o tutorial a seguir para ver um exemplo de como chamar uma API do Microsoft Graph de uma função do Azure.
Agora você viu um exemplo de como usar o Microsoft Graph para recuperar arquivos, chats, mensagens de email e eventos de calendário. Os mesmos conceitos também podem ser aplicados a outras APIs do Microsoft Graph. Por exemplo, você pode usar a API de usuários do Microsoft Graph para pesquisar usuários em sua organização. Você também pode usar a API de grupos do Microsoft Graph para pesquisar grupos em sua organização. Você pode exibir a lista completa de APIs do Microsoft Graph na documentação.

Próxima Etapa

Parabéns

Comentários

Esta página foi útil?

Last updated on 2025-06-17