Organisatiegegevens: Bestanden, chats ophalen en berichten verzenden naar Teams

In de digitale omgeving van vandaag werken gebruikers met een breed scala aan organisatiegegevens, waaronder e-mailberichten, chats, bestanden, agendagebeurtenissen en meer. Dit kan leiden tot frequente contextverschuivingen ( schakelen tussen taken of toepassingen) die de focus kunnen verstoren en de productiviteit kunnen verminderen. Een gebruiker die aan een project werkt, moet bijvoorbeeld overschakelen van de huidige toepassing naar Outlook om belangrijke details in een e-mailbericht te vinden of over te schakelen naar OneDrive voor Bedrijven om een gerelateerd bestand te vinden. Deze back-and-forth-actie verstoort de focus en verspilt tijd die beter aan de taak kan worden besteed.

Om de efficiëntie te verbeteren, kunt u organisatiegegevens rechtstreeks integreren in de toepassingen die gebruikers dagelijks gebruiken. Door organisatorische gegevens naar uw toepassingen te brengen, kunnen gebruikers naadloos informatie openen en beheren, waardoor contextverschuivingen worden geminimaliseerd en de productiviteit wordt verbeterd. Daarnaast biedt deze integratie waardevolle inzichten en context, waardoor gebruikers weloverwogen beslissingen kunnen nemen en effectiever kunnen werken.

In deze oefening gaat u het volgende doen:

• Meer informatie over hoe het webonderdeel mgt-search-results in de Microsoft Graph Toolkit kan worden gebruikt om te zoeken naar bestanden.
• Leer hoe u Microsoft Graph rechtstreeks aanroept om bestanden op te halen uit OneDrive voor Bedrijven en chatberichten van Microsoft Teams.
• Meer informatie over het verzenden van chatberichten naar Microsoft Teams-kanalen met behulp van Microsoft Graph.

De functie Organisatiegegevens gebruiken

1. In een vorige oefening hebt u een app-registratie gemaakt in Microsoft Entra ID en de toepassingsserver en API-server gestart. U hebt ook de volgende waarden in het .env bestand bijgewerkt.

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

   Zorg ervoor dat u de vorige oefening hebt voltooid voordat u doorgaat.

2. Ga terug naar de browser (http://localhost:4200). Als u zich nog niet hebt aangemeld, selecteert u Aanmelden in de koptekst en meldt u zich aan met een gebruiker in uw Microsoft 365 Developer-tenant.

   Opmerking

   Naast verificatie van de gebruiker, haalt het webonderdeel mgt-login ook een toegangstoken op dat door Microsoft Graph kan worden gebruikt voor toegang tot bestanden, chats, e-mailberichten, agenda-items en andere organisatiegegevens. Het toegangstoken bevat de bereiken (machtigingen) zoals Chat.ReadWrite, Files.Read.Allen andere bereiken die u eerder hebt gezien:

   Providers.globalProvider = new Msal2Provider({
       clientId: ENTRAID_CLIENT_ID, // retrieved from .env file
       scopes: ['User.Read', 'Presence.Read', 'Chat.ReadWrite', 'Calendars.Read', 
                'ChannelMessage.Read.All', 'ChannelMessage.Send', 'Files.Read.All', 'Mail.Read']
   });
   

3. Selecteer Gerelateerde inhoud weergeven voor de rij Adatum Corporation in de datagrid. Hierdoor worden organisatiegegevens, zoals bestanden, chats, e-mailberichten en agendagebeurtenissen, opgehaald met Behulp van Microsoft Graph. Zodra de gegevens zijn geladen, worden deze weergegeven onder het datagrid in een interface met tabbladen. Het is belangrijk te vermelden dat u op dit moment mogelijk geen gegevens ziet, omdat u nog geen bestanden, chats, e-mailberichten of agendagebeurtenissen voor de gebruiker hebt toegevoegd in uw Microsoft 365-ontwikkelaarstenant. Laten we dat in de volgende stap oplossen.

   

4. Uw Microsoft 365-tenant heeft in deze fase mogelijk geen gerelateerde organisatiegegevens voor Adatum Corporation . Voer ten minste een van de volgende acties uit om enkele voorbeeldgegevens toe te voegen:

   • Voeg bestanden toe door naar uw Microsoft 365 Developer-tenantreferenties te https://onedrive.com gaan en u aan te melden.

     • Selecteer Mijn bestanden in het linkernavigatievenster.
     • Selecteer + Nieuwe toevoegen en vervolgens Map uploaden vanuit het menu.
     • Selecteer de map documenten van openai-acs-msgraph/customer in het project dat u hebt gekloond.

     

   • Voeg chatberichten en agendagebeurtenissen toe door naar uw Microsoft 365 Developer-tenantreferenties te https://teams.microsoft.com gaan en u aan te melden.

     • Selecteer Teams in het linkernavigatievenster.

     • Selecteer een team en kanaal.

     • Selecteer Een bericht starten.

     • Voer nieuwe bestelling in voor Adatum Corporation voor het onderwerp en eventuele extra tekst die u wilt toevoegen in de berichttekst. Selecteer de knop Posten .

       U kunt gerust extra chatberichten toevoegen waarin andere bedrijven worden vermeld die in de toepassing worden gebruikt, zoals Adventure Works Cycles, Contoso Pharmaceuticals en Tailwind Traders.

       

     • Selecteer Agenda in het linkernavigatievenster.

     • Selecteer Nieuwe vergadering.

     • Voer 'Vergaderen met Adatum Corporation over projectplanning' in als titel en hoofdtekst.

     • Selecteer Opslaan.

       

   • Voeg e-mailberichten toe door naar uw Microsoft 365 Developer-tenantreferenties te https://outlook.com gaan en u aan te melden.

     • Selecteer Nieuwe e-mail.

     • Voer uw persoonlijke e-mailadres in het veld Aan in.

     • Voer nieuwe bestelling in voor Adatum Corporation voor het onderwerp en alles wat u wilt voor het lichaam.

     • Klik op Verzenden.

       

5. Ga terug naar de toepassing in de browser en vernieuw de pagina. Selecteer Gerelateerde inhoud opnieuw weergeven voor de rij Adatum Corporation . U ziet nu gegevens die worden weergegeven op de tabbladen, afhankelijk van de taken die u in de vorige stap hebt uitgevoerd.

6. Laten we de code verkennen waarmee de functie voor organisatiegegevens in de toepassing wordt ingeschakeld. Om de gegevens op te halen, gebruikt het gedeelte aan de clientzijde van de toepassing het toegangstoken dat is opgehaald door het mgt-login-onderdeel dat u eerder hebt bekeken om aanroepen te doen naar Microsoft Graph-API's.

Bestanden zoeken-code verkennen

Aanbeveling

Als u Visual Studio Code gebruikt, kunt u bestanden rechtstreeks openen door het volgende te selecteren:

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

Typ vervolgens de naam van het bestand dat u wilt openen.

1. Laten we beginnen met het bekijken van hoe bestandsgegevens worden opgehaald uit OneDrive voor Bedrijven. Open files.component.html en neem even de tijd om de code te bekijken. Het volledige pad naar het bestand is client/src/app/files/files.component.html.

2. Zoek het onderdeel mgt-search-results en noteer de volgende kenmerken:

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

   Het onderdeel mgt-search-results maakt deel uit van de Microsoft Graph Toolkit en zoals de naam al aangeeft, wordt het gebruikt om zoekresultaten van Microsoft Graph weer te geven. Het onderdeel maakt gebruik van de volgende functies in dit voorbeeld:

   • Het class kenmerk wordt gebruikt om op te geven dat de search-results CSS-klasse moet worden toegepast op het onderdeel.

   • Het entity-types kenmerk wordt gebruikt om het type gegevens op te geven dat moet worden gezocht. In dit geval wordt driveItem de waarde gebruikt om te zoeken naar bestanden in OneDrive voor Bedrijven.

   • Het queryString kenmerk wordt gebruikt om de zoekterm op te geven. In dit geval is de waarde gebonden aan de searchText eigenschap die wordt doorgegeven aan het bestandsonderdeel wanneer de gebruiker Gerelateerde inhoud voor een rij in de datagrid selecteert. De vierkante haken queryString rond geven aan dat de eigenschap is gebonden aan de searchText waarde.

   • De dataChange gebeurtenis wordt geactiveerd wanneer de zoekresultaten worden gewijzigd. In dit geval wordt een klantfunctie met de naam dataChange() aangeroepen in het bestandsonderdeel en worden de gebeurtenisgegevens doorgegeven aan de functie. Het haakje rond dataChange geeft aan dat de gebeurtenis is gebonden aan de dataChange() functie.

   • Omdat er geen aangepaste sjabloon wordt opgegeven, wordt de standaardsjabloon mgt-search-results gebruikt om de zoekresultaten weer te geven.

     

3. Een alternatief voor het gebruik van onderdelen, zoals mgt-search-results, is het rechtstreeks aanroepen van Microsoft Graph-API's met behulp van code. Als u wilt zien hoe dat werkt, opent u het graph.service.ts-bestand en zoekt u de searchFiles() functie. Het volledige pad naar het bestand is client/src/app/core/graph.service.ts.

   • U ziet dat een query parameter wordt doorgegeven aan de functie. Dit is de zoekterm die wordt doorgegeven als de gebruiker Gerelateerde inhoud weergeven selecteert voor een rij in de datagrid. Als er geen zoekterm wordt doorgegeven, wordt een lege matrix geretourneerd.

     async searchFiles(query: string) {
         const files: DriveItem[] = [];
         if (!query) return files;
     
         ...
     }
     

   • Er wordt vervolgens een filter gemaakt waarmee het type zoekopdracht wordt gedefinieerd dat moet worden uitgevoerd. In dit geval wordt de code gezocht naar bestanden in OneDrive voor Bedrijven dus driveItem net zoals u eerder hebt gezien met het mgt-search-results onderdeel. Dit is hetzelfde als het doorgeven driveItem aan entity-types het onderdeel mgt-search-results dat u eerder hebt gezien. De query parameter wordt vervolgens toegevoegd aan het queryString filter, samen met ContentType:Document.

     const filter = {
         "requests": [
             {
                 "entityTypes": [
                     "driveItem"
                 ],
                 "query": {
                     "queryString": `${query} AND ContentType:Document`
                 }
             }
         ]
     };
     

   • Er wordt vervolgens een aanroep uitgevoerd naar de /search/query Microsoft Graph API met behulp van de Providers.globalProvider.graph.client.api() functie. Het filter object wordt doorgegeven aan de post() functie die de gegevens naar de API verzendt.

     const searchResults = await Providers.globalProvider.graph.client.api('/search/query').post(filter);
     

   • De zoekresultaten worden vervolgens doorlopen om te zoeken hits. Elk hit document bevat informatie over een gevonden document. Een eigenschap met de naam resource bevat de documentmetagegevens en wordt toegevoegd aan de files matrix.

     if (searchResults.value.length !== 0) {
         for (const hitContainer of searchResults.value[0].hitsContainers) {
             if (hitContainer.hits) {
                 for (const hit of hitContainer.hits) {
                     files.push(hit.resource);
                 }
             }
         }
     }
     

   • De files matrix wordt vervolgens geretourneerd naar de aanroeper.

     return files;
     

4. Als u deze code bekijkt, kunt u zien dat het webonderdeel mgt-search-results dat u eerder hebt verkend, veel werk voor u doet en de hoeveelheid code die u moet schrijven aanzienlijk vermindert. Er kunnen echter scenario's zijn waarin u Microsoft Graph rechtstreeks wilt aanroepen om meer controle te hebben over de gegevens die naar de API worden verzonden of hoe de resultaten worden verwerkt.

5. Open het files.component.ts-bestand en zoek de search() functie. Het volledige pad naar het bestand is client/src/app/files/files.component.ts.

   Hoewel de hoofdtekst van deze functie als commentaar wordt gegeven vanwege het onderdeel mgt-search-results dat wordt gebruikt, kan de functie worden gebruikt om de aanroep naar Microsoft Graph te maken wanneer de gebruiker Gerelateerde inhoud voor een rij in de datagrid selecteert. De search() functie roept searchFiles()in graph.service.ts aan en geeft de query parameter hieraan door (de naam van het bedrijf in dit voorbeeld). De resultaten van de zoekopdracht worden vervolgens toegewezen aan de data eigenschap van het onderdeel.

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

   Het bestandsonderdeel kan vervolgens de data eigenschap gebruiken om de zoekresultaten weer te geven. U kunt dit doen met behulp van aangepaste HTML-bindingen of met behulp van een ander Microsoft Graph Toolkit-besturingselement met de naam mgt-file-list. Hier volgt een voorbeeld van het binden van de data eigenschap aan een van de eigenschappen van het onderdeel met de naam files en het verwerken van de itemClick gebeurtenis wanneer de gebruiker interactie heeft met een bestand.

   <mgt-file-list (itemClick)="itemClick($any($event))" [files]="data"></mgt-file-list>
   

6. Of u ervoor kiest om het eerder weergegeven onderdeel mgt-search-results te gebruiken of aangepaste code te schrijven om Microsoft Graph aan te roepen, is afhankelijk van uw specifieke scenario. In dit voorbeeld wordt het onderdeel mgt-search-results gebruikt om de code te vereenvoudigen en de hoeveelheid werk te verminderen die u moet doen.

Zoekcode voor Chatberichten in Teams verkennen

1. Ga terug naar graph.service.ts en zoek de searchChatMessages() functie. U ziet dat deze vergelijkbaar is met de searchFiles() functie die u eerder hebt bekeken.

   • Hiermee worden gegevens gefilterd op de API van /search/query Microsoft Graph en worden de resultaten geconverteerd naar een matrix met objecten met informatie over de teamId, channelIden messageId die overeenkomen met de zoekterm.
   • Als u de Teams-kanaalberichten wilt ophalen, wordt er een tweede aanroep naar de /teams/${chat.teamId}/channels/${chat.channelId}/messages/${chat.messageId} API en de teamId, channelIden messageId doorgegeven. Hiermee worden de volledige berichtdetails geretourneerd.
   • Aanvullende filtertaken worden uitgevoerd en de resulterende berichten worden geretourneerd naar searchChatMessages() de beller.

2. Open het bestand chats.component.ts en zoek de search() functie. Het volledige pad naar het bestand is client/src/app/chats/chats.component.ts. De search() functie roept searchChatMessages() in graph.service.ts aan en geeft de query parameter eraan door.

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

   De resultaten van de zoekopdracht worden toegewezen aan de data eigenschap van het onderdeel en de gegevensbinding worden gebruikt om de resultatenmatrix te doorlopen en de gegevens weer te geven. In dit voorbeeld wordt een kaartonderdeel Angular Material gebruikt om de zoekresultaten weer te geven.

   @if (this.data.length) {
       <div>
           @for (chatMessage of this.data;track chatMessage.id) {
               <mat-card>
                   <mat-card-header>
                       <mat-card-title [innerHTML]="chatMessage.summary"></mat-card-title>
                       <!-- <mat-card-subtitle [innerHTML]="chatMessage.body"></mat-card-subtitle> -->
                   </mat-card-header>
                   <mat-card-actions>
                       <a mat-stroked-button color="basic" [href]="chatMessage.webUrl" target="_blank">View Message</a>
                   </mat-card-actions>
               </mat-card>
           }
       </div>
   }
   

   

Een bericht verzenden naar een Microsoft Teams-kanaal

1. Naast het zoeken naar chatberichten van Microsoft Teams, kan een gebruiker ook berichten verzenden naar een Microsoft Teams-kanaal. U kunt dit doen door het /teams/${teamId}/channels/${channelId}/messages eindpunt van Microsoft Graph aan te roepen.

   

2. In de volgende code ziet u dat er een URL wordt gemaakt die de teamId en channelId waarden bevat. Waarden voor omgevingsvariabelen worden in dit voorbeeld gebruikt voor de team-id en kanaal-id, maar deze waarden kunnen ook dynamisch worden opgehaald met Behulp van Microsoft Graph. De body constante bevat het bericht dat moet worden verzonden. Vervolgens wordt een POST-aanvraag ingediend en worden de resultaten geretourneerd naar de beller.

   async sendTeamsChat(message: string): Promise<TeamsDialogData> {
       if (!message) new Error('No message to send.');
       if (!TEAM_ID || !CHANNEL_ID) new Error('Team ID or Channel ID not set in environment variables. Please set TEAM_ID and CHANNEL_ID in the .env file.');
   
       const url = `https://graph.microsoft.com/v1.0/teams/${TEAM_ID}/channels/${CHANNEL_ID}/messages`;
       const body = {
           "body": {
               "contentType": "html",
               "content": message
           }
       };
       const response = await Providers.globalProvider.graph.client.api(url).post(body);
       return {
           id: response.id,
           teamId: response.channelIdentity.teamId,
           channelId: response.channelIdentity.channelId,
           message: response.body.content,
           webUrl: response.webUrl,
           title: 'Send Teams Chat'
       };
   }
   

3. Het gebruik van dit type functionaliteit in Microsoft Graph biedt een uitstekende manier om de productivbiteit van gebruikers te verbeteren doordat gebruikers rechtstreeks vanuit de toepassing die ze al gebruiken, met Microsoft Teams kunnen communiceren.

Volgende stap

Organisatiegegevens: e-mailberichten en agendagebeurtenissen ophalen