Partager via

Données organisationnelles : récupération d’e-mails et d’événements de calendrier

Dans l’exercice précédent, vous avez appris à récupérer des fichiers à partir de OneDrive Entreprise et des conversations de Microsoft Teams à l’aide de Microsoft Graph et du composant mgt-search-results de Microsoft Graph Toolkit. Vous avez également appris à envoyer des messages à des canaux Microsoft Teams. Dans cet exercice, vous allez apprendre à récupérer des messages électroniques et des événements de calendrier à partir de Microsoft Graph et à les intégrer à l’application.

Dans cet exercice, vous allez :

  • Découvrez comment le composant web mgt-search-results dans le Kit de ressources Microsoft Graph peut être utilisé pour rechercher des e-mails et des événements de calendrier.
  • Découvrez comment personnaliser le composant mgt-search-results pour afficher les résultats de recherche d’une manière personnalisée.
  • Découvrez comment appeler Microsoft Graph directement pour récupérer des e-mails et des événements de calendrier.

Exploration du code de recherche de messages électroniques

Conseil / Astuce

Si vous utilisez Visual Studio Code, vous pouvez ouvrir des fichiers directement en sélectionnant :

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

Tapez ensuite le nom du fichier que vous souhaitez ouvrir.

  1. Dans un exercice précédent , vous avez créé une inscription d’application dans Microsoft Entra ID et démarré le serveur d’applications et le serveur d’API. Vous avez également mis à jour les valeurs suivantes dans le .env fichier.

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

    Vérifiez que vous avez terminé l’exercice précédent avant de continuer.

  2. Ouvrez emails.component.html et prenez un moment pour examiner le code. Le chemin complet du fichier est client/src/app/emails/emails.component.html.

  3. Recherchez le composant 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>

    Cet exemple du composant mgt-search-results est configuré de la même façon que celui que vous avez examiné précédemment. La seule différence est que l’attribut entity-types est défini message sur lequel est utilisé pour rechercher des messages électroniques et qu’un modèle vide est fourni.

    • L’attribut class est utilisé pour spécifier que la search-results classe CSS doit être appliquée au composant.
    • L’attribut entity-types est utilisé pour spécifier le type de données à rechercher. Dans ce cas, la valeur est message.
    • L’attribut queryString est utilisé pour spécifier le terme de recherche.
    • L’événement dataChange se déclenche lorsque les résultats de la recherche changent. La fonction du dataChange() composant e-mail est appelée, les résultats sont transmis à celui-ci et une propriété nommée data est mise à jour dans le composant.
    • Un modèle vide est défini pour le composant. Ce type de modèle est normalement utilisé pour définir la façon dont les résultats de la recherche seront rendus. Toutefois, dans ce scénario, nous déconseillons le composant de ne pas afficher de données de message. Au lieu de cela, nous allons afficher les données nous-mêmes à l’aide de la liaison de données standard (Angular est utilisé dans ce cas, mais vous pouvez utiliser n’importe quelle bibliothèque/infrastructure souhaitée).

  4. Regardez sous le composant mgt-search-results dans emails.component.html pour rechercher les liaisons de données utilisées pour afficher les messages électroniques. Cet exemple effectue une itération dans la data propriété et écrit l’objet de l’e-mail, l’aperçu du corps et un lien pour afficher le message électronique complet.

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

    Affichage des messages électroniques

  5. Outre l’utilisation du composant mgt-search-results pour récupérer des messages, Microsoft Graph fournit plusieurs API qui peuvent également être utilisées pour rechercher des e-mails. L’API /search/query que vous avez vue précédemment pourrait certainement être utilisée, mais une option plus simple est l’API messages .

  6. Pour savoir comment appeler cette API, revenez à graph.service.ts et recherchez la searchEmailMessages() fonction. Il crée une URL qui peut être utilisée pour appeler le messages point de terminaison de Microsoft Graph et assigne la query valeur au $search paramètre. Le code effectue ensuite une requête GET et retourne les résultats à l’appelant. L’opérateur $search recherche automatiquement la query valeur dans les champs objet, corps et expéditeur.

    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. Le composant e-mail situé dans emails.component.ts appels searchEmailMessages() et affiche les résultats dans l’interface utilisateur.

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

Exploration du code de recherche d’événements de calendrier

  1. La recherche d’événements de calendrier peut également être effectuée à l’aide du composant mgt-search-results . Il peut gérer le rendu des résultats pour vous, mais vous pouvez également définir votre propre modèle que vous verrez plus loin dans cet exercice.

  2. Ouvrez calendar-events.component.html et prenez un moment pour examiner le code. Le chemin complet du fichier est client/src/app/calendar-events/calendar-events.component.html. Vous verrez qu’il est très similaire aux fichiers et aux composants d’e-mails que vous avez examinés précédemment.

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

    Cet exemple du composant mgt-search-results est configuré de la même façon que ceux que vous avez examinés précédemment. La seule différence est que l’attribut entity-types est défini event sur lequel est utilisé pour rechercher des événements de calendrier et qu’un modèle vide est fourni.

    • L’attribut class est utilisé pour spécifier que la search-results classe CSS doit être appliquée au composant.
    • L’attribut entity-types est utilisé pour spécifier le type de données à rechercher. Dans ce cas, la valeur est event.
    • L’attribut queryString est utilisé pour spécifier le terme de recherche.
    • L’événement dataChange se déclenche lorsque les résultats de la recherche changent. La fonction du composant d’événementdataChange()est appelée, les résultats sont transmis à celui-ci et une propriété nommée data est mise à jour dans le composant.
    • Un modèle vide est défini pour le composant. Dans ce scénario, nous disons au composant de ne pas afficher de données. Au lieu de cela, nous allons afficher les données nous-mêmes à l’aide de la liaison de données standard.

  3. Immédiatement sous le mgt-search-results composant dans calendar-events.component.html vous trouverez les liaisons de données utilisées pour afficher les événements de calendrier. Cet exemple effectue une itération dans la data propriété et écrit la date de début, l’heure et l’objet de l’événement. Les fonctions personnalisées incluses dans le composant, telles que dayFromDateTime() celles-ci, timeRangeFromEvent() sont appelées pour mettre en forme correctement les données. Les liaisons HTML incluent également un lien pour afficher l’événement de calendrier dans Outlook et l’emplacement de l’événement si l’un d’eux est spécifié.

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

    Affichage des événements de calendrier

  4. Outre la recherche d’événements de calendrier à l’aide de l’API search/query , Microsoft Graph fournit également une events API qui peut également être utilisée pour rechercher des événements de calendrier. Recherchez la searchCalendarEvents() fonction dans graph.service.ts.

  5. La searchCalendarEvents() fonction crée des valeurs de date/heure de début et de fin utilisées pour définir la période de recherche. Il crée ensuite une URL qui peut être utilisée pour appeler le events point de terminaison de Microsoft Graph et inclut les query variables de date/heure de début et de fin. Une requête GET est ensuite effectuée et les résultats sont retournés à l’appelant.

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

    • Voici une répartition de l’URL créée :

      • La /me/events partie de l’URL est utilisée pour spécifier que les événements de l’utilisateur connecté doivent être récupérés.
      • Les startdatetime paramètres et enddatetime les paramètres sont utilisés pour définir la période de recherche. Dans ce cas, la recherche retourne les événements qui commencent au cours des 7 prochains jours.
      • Le $filter paramètre de requête est utilisé pour filtrer les résultats par la valeur (le nom de la query société sélectionné à partir du datagrid dans ce cas). La contains() fonction est utilisée pour rechercher la query valeur dans la subject propriété de l’événement de calendrier.
      • L’analyseur $orderby de requête est utilisé pour classer les résultats par la start/dateTime propriété.

    Une fois la url requête GET créée, une requête GET est envoyée à l’API Microsoft Graph à l’aide de la valeur et url les résultats sont retournés à l’appelant.

  6. Comme pour les composants précédents, le composant événements de calendrier (fichier calendar-events.component.ts ) appelle search() et affiche les résultats.

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

    Remarque

    Vous pouvez également effectuer des appels Microsoft Graph à partir d’une API personnalisée ou d’une application côté serveur. Consultez le tutoriel suivant pour voir un exemple d’appel d’une API Microsoft Graph à partir d’une fonction Azure.

  7. Vous avez maintenant vu l’exemple d’utilisation de Microsoft Graph pour récupérer des fichiers, des conversations, des messages électroniques et des événements de calendrier. Les mêmes concepts peuvent également être appliqués à d’autres API Microsoft Graph. Par exemple, vous pouvez utiliser l’API utilisateurs de Microsoft Graph pour rechercher des utilisateurs dans votre organisation. Vous pouvez également utiliser l’API groupes Microsoft Graph pour rechercher des groupes dans votre organisation. Vous pouvez afficher la liste complète des API Microsoft Graph dans la documentation.

Étape suivante

Félicitations

  • Last updated on