Поделиться через

Организационные данные: получение сообщений электронной почты и событий календаря

В предыдущем упражнении вы узнали, как получить файлы из OneDrive для бизнеса и чатов из Microsoft Teams с помощью Microsoft Graph и компонента mgt-search-results из Microsoft Graph Toolkit. Вы также узнали, как отправлять сообщения в каналы Microsoft Teams. В этом упражнении вы узнаете, как получить сообщения электронной почты и события календаря из Microsoft Graph и интегрировать их в приложение.

В этом упражнении вы выполните следующие действия.

  • Узнайте, как веб-компонент mgt-search-results в Microsoft Graph Toolkit можно использовать для поиска сообщений электронной почты и событий календаря.
  • Узнайте, как настроить компонент mgt-search-results для отображения результатов поиска в пользовательском режиме.
  • Узнайте, как вызывать Microsoft Graph напрямую для получения сообщений электронной почты и событий календаря.

Изучение кода поиска сообщений электронной почты

Подсказка

Если вы используете Visual Studio Code, вы можете открывать файлы напрямую, выбрав:

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

Затем введите имя файла, который нужно открыть.

  1. В предыдущем упражнении вы создали регистрацию приложения в идентификаторе Microsoft Entra и запустили сервер приложений и сервер API. Вы также обновили следующие значения в .env файле.

    ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>

    Прежде чем продолжить, убедитесь, что вы выполнили предыдущее упражнение .

  2. Откройте emails.component.html и просмотрите код. Полный путь к файлу — client/src/app/emails/emails.component.html.

  3. Найдите компонент 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>

    Этот пример компонента mgt-search-results настраивается так же, как и тот, который вы посмотрели ранее. Единственное различие заключается в том, что entity-types атрибут задан message для поиска сообщений электронной почты и предоставляется пустой шаблон.

    • Атрибут class используется для указания того, что search-results класс CSS должен применяться к компоненту.
    • Атрибут entity-types используется для указания типа данных для поиска. В этом случае используется значение message.
    • Атрибут queryString используется для указания термина поиска.
    • Событие dataChange запускается при изменении результатов поиска. Функция компонента dataChange() электронной почты вызывается, результаты передаются в него, а свойство с именем data обновляется в компоненте.
    • Для компонента определен пустой шаблон. Этот тип шаблона обычно используется для определения способа отрисовки результатов поиска. Однако в этом сценарии мы говорим компоненту не отображать данные сообщения. Вместо этого мы отрисуем данные самостоятельно с помощью стандартной привязки данных (Angular используется в этом случае, но вы можете использовать любую библиотеку или платформу, которую вы хотите).

  4. Ознакомьтесь с компонентом mgt-search-results в emails.component.html , чтобы найти привязки данных, используемые для отрисовки сообщений электронной почты. В этом примере выполняется итерацию по data свойству и записывается тема электронной почты, предварительный просмотр текста и ссылка для просмотра полного сообщения электронной почты.

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

    Просмотр сообщений электронной почты

  5. Помимо использования компонента mgt-search-results для получения сообщений, Microsoft Graph предоставляет несколько API, которые также можно использовать для поиска по электронной почте. /search/query API, который вы видели ранее, может быть использован, но более простой messages вариант — ЭТО API.

  6. Чтобы узнать, как вызвать этот API, вернитесь к graph.service.ts и найдите функцию searchEmailMessages() . Он создает URL-адрес, который можно использовать для вызова messages конечной точки Microsoft Graph и присваивает query значение параметру $search . Затем код выполняет запрос GET и возвращает результаты вызывающей объекту. Оператор $search автоматически ищет query значение в полях темы, текста и отправителя.

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

  7. Компонент , отображает результаты в пользовательском интерфейсе.

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

Изучение кода поиска событий календаря

  1. Поиск событий календаря также можно выполнить с помощью компонента mgt-search-results . Он может обрабатывать отрисовку результатов для вас, но вы также можете определить собственный шаблон, который вы увидите далее в этом упражнении.

  2. Откройте calendar-events.component.html и просмотрите код. Полный путь к файлу client/src/app/calendar-events/calendar-events.component.html. Вы увидите, что это очень похоже на файлы и компоненты электронной почты, которые вы рассмотрели ранее.

    <mgt-search-results 
    class="search-results" 
    entity-types="event" 
    [queryString]="searchText"
    (dataChange)="dataChange($any($event))">
    <template data-type="result-event"></template>
</mgt-search-results>

    Этот пример компонента mgt-search-results настроен так же, как и те, которые вы рассмотрели ранее. Единственное различие заключается в том, что entity-types атрибут задан event для поиска событий календаря и предоставляется пустой шаблон.

    • Атрибут class используется для указания того, что search-results класс CSS должен применяться к компоненту.
    • Атрибут entity-types используется для указания типа данных для поиска. В этом случае используется значение event.
    • Атрибут queryString используется для указания термина поиска.
    • Событие dataChange запускается при изменении результатов поиска. Функция компонента событияdataChange()вызывается, результаты передаются в него, а свойство с именем data обновляется в компоненте.
    • Для компонента определен пустой шаблон. В этом сценарии мы сообщаем компоненту не отображать данные. Вместо этого мы отрисуем данные самостоятельно с помощью стандартной привязки данных.

  3. Непосредственно под компонентом mgt-search-results в calendar-events.component.html вы найдете привязки данных, используемые для отображения событий календаря. В этом примере выполняется итерацию по data свойству и записывается дата начала, время и тема события. Пользовательские функции, включенные в компонент, например dayFromDateTime() и timeRangeFromEvent() вызываются для правильного форматирования данных. Привязки HTML также включают ссылку для просмотра события календаря в Outlook и расположения события, если он указан.

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

    Просмотр событий календаря

  4. Помимо поиска событий календаря с помощью search/query API, Microsoft Graph также предоставляет events API, который также можно использовать для поиска событий календаря. Найдите функцию searchCalendarEvents() в graph.service.ts.

  5. Функция searchCalendarEvents() создает значения даты и окончания, используемые для определения периода времени для поиска. Затем он создает URL-адрес, который можно использовать для вызова events конечной точки Microsoft Graph и включает query параметр и переменные даты и окончания. Затем выполняется запрос GET, и результаты возвращаются вызывающей объекту.

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

    • Ниже приведена разбивка созданного URL-адреса:

      • Часть /me/events URL-адреса используется для указания того, что события вошедшего пользователя должны быть извлечены.
      • startdatetime Параметры enddatetime используются для определения периода времени для поиска. В этом случае поиск вернет события, начинающиеся в течение следующих 7 дней.
      • Параметр $filter запроса используется для фильтрации результатов по query значению (имя компании, выбранное из datagrid в этом случае). Функция contains() используется для поиска query значения в subject свойстве события календаря.
      • Параметр $orderby запроса используется для упорядочивания результатов свойством start/dateTime .

    url После создания запрос GET выполняется в API Microsoft Graph, используя значениеurl, и результаты возвращаются вызывающей программе.

  6. Как и в предыдущих компонентах, вызовы компонента событий календаря (search() файла) и отображение результатов.

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

    Замечание

    Вы также можете выполнять вызовы Microsoft Graph из пользовательского API или серверного приложения. Просмотрите следующее руководство , чтобы просмотреть пример вызова API Microsoft Graph из функции Azure.

  7. Теперь вы видели пример использования Microsoft Graph для получения файлов, чатов, сообщений электронной почты и событий календаря. Те же понятия можно применять к другим API Microsoft Graph, а также. Например, можно использовать API пользователей Microsoft Graph для поиска пользователей в организации. Вы также можете использовать API групп Microsoft Graph для поиска групп в организации. Полный список API Microsoft Graph можно просмотреть в документации.

Следующий шаг

Поздравляю