Dados organizacionais: Recuperando e-mails e eventos do calendário

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

Neste exercício, você irá:

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

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

Sugestão

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 no Microsoft Entra ID 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>
```
Certifique-se de ter concluído o exercício anterior antes de continuar.
Abra emails.component.html e reserve um momento para examinar 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ê visualizou anteriormente. A única diferença é que o entity-types atributo é definido para message o qual é usado para procurar 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. Neste 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 e-mails é chamada, os resultados são passados dataChange() para ele e uma propriedade nomeada 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, nós mesmos renderizaremos os dados usando a vinculação de dados padrão (o Angular é usado neste caso, mas você pode usar qualquer biblioteca/estrutura que desejar).

Procure abaixo o componente mgt-search-results no emails.component.html para encontrar as ligações de dados usadas para renderizar as mensagens de e-mail. Este exemplo itera data pela propriedade e grava o assunto do e-mail, 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>
}

Visualizando mensagens de e-mail

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 e-mails. A /search/query API que você viu anteriormente certamente poderia ser usada, mas uma opção mais simples é 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 procura 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 de e-mails 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 do 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 você verá mais adiante neste exercício.
Abra calendar-events.component.html e reserve um momento para examinar 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ê olhou 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 forma que os que você visualizou anteriormente. A única diferença é que o entity-types atributo é definido para event o qual é usado para procurar 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. Neste 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. Neste cenário, estamos dizendo ao componente para não renderizar nenhum dado. Em vez disso, nós mesmos renderizaremos os dados 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 do calendário. Este exemplo itera data pela propriedade e grava a data de início, a hora e o assunto do evento. Funções personalizadas incluídas no componente, como dayFromDateTime() e timeRangeFromEvent() são chamadas para formatar 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 search/query Microsoft Graph também fornece uma events API que também pode ser usada para pesquisar eventos de calendário. Localize a searchCalendarEvents() função no 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 fim. Uma solicitação GET é então 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;
}
```
- Aqui está 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. Neste caso, a pesquisa retornará eventos que começam nos próximos 7 dias.
  - O $filter parâmetro query é 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 de 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 e os resultados são retornados url para o chamador.
Como nos componentes anteriores, o componente de eventos de resultados.
```
override async search(query: string) {
    this.data = await this.graphService.searchCalendarEvents(query);
}
```
Observação

Você também pode fazer chamadas do Microsoft Graph a partir 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 a partir de uma Função do Azure.
Agora você viu exemplos de como usar o Microsoft Graph para recuperar arquivos, bate-papos, 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óximo Passo

Parabéns

Feedback

Esta página foi útil?

Last updated on 2025-06-13