Organisationsdata: Hämta filer, chattar och skicka meddelanden till Teams

I dagens digitala miljö arbetar användarna med en mängd olika organisationsdata, inklusive e-postmeddelanden, chattar, filer, kalenderhändelser med mera. Detta kan leda till frekventa kontextväxlingar – växling mellan uppgifter eller program – som kan störa fokus och minska produktiviteten. En användare som arbetar med ett projekt kan till exempel behöva växla från sitt aktuella program till Outlook för att hitta viktig information i ett e-postmeddelande eller växla till OneDrive för företag för att hitta en relaterad fil. Den här åtgärden fram och tillbaka stör fokus och slösar bort tid som skulle kunna spenderas bättre på den aktuella uppgiften.

För att förbättra effektiviteten kan du integrera organisationsdata direkt i de program som användarna använder varje dag. Genom att ta in organisationsdata i dina program kan användarna komma åt och hantera information mer sömlöst, minimera kontextskiftningar och förbättra produktiviteten. Dessutom ger den här integreringen värdefulla insikter och sammanhang som gör det möjligt för användare att fatta välgrundade beslut och arbeta mer effektivt.

I den här övningen ska du:

• Lär dig hur webbkomponenten mgt-search-results i Microsoft Graph Toolkit kan användas för att söka efter filer.
• Lär dig hur du anropar Microsoft Graph direkt för att hämta filer från OneDrive för företag och chattmeddelanden från Microsoft Teams.
• Förstå hur du skickar chattmeddelanden till Microsoft Teams-kanaler med hjälp av Microsoft Graph.

Använda funktionen Organisationsdata

1. I en tidigare övning skapade du en appregistrering i Microsoft Entra-ID och startade programservern och API-servern. Du har också uppdaterat följande värden i .env filen.

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

   Kontrollera att du har slutfört föregående övning innan du fortsätter.

2. Gå tillbaka till webbläsaren (http://localhost:4200). Om du inte redan har loggat in väljer du Logga in i rubriken och loggar in med en användare från din Microsoft 365 Developer-klientorganisation.

   Anmärkning

   Förutom att autentisera användaren hämtar webbkomponenten mgt-login även en åtkomsttoken som kan användas av Microsoft Graph för att komma åt filer, chattar, e-postmeddelanden, kalenderhändelser och andra organisationsdata. Åtkomsttoken innehåller de omfång (behörigheter) som Chat.ReadWrite, Files.Read.Alloch andra som du såg tidigare:

   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. Välj Visa relaterat innehåll för raden Adatum Corporation i datagrid. Detta gör att organisationsdata som filer, chattar, e-postmeddelanden och kalenderhändelser hämtas med hjälp av Microsoft Graph. När data har lästs in visas de under datagrid i ett gränssnitt med flikar. Det är viktigt att nämna att du kanske inte ser några data just nu eftersom du inte har lagt till några filer, chattar, e-postmeddelanden eller kalenderhändelser för användaren i microsoft 365-utvecklarklientorganisationen ännu. Nu ska vi åtgärda det i nästa steg.

   

4. Din Microsoft 365-klientorganisation kanske inte har några relaterade organisationsdata för Adatum Corporation i det här skedet. Om du vill lägga till exempeldata utför du minst en av följande åtgärder:

   • Lägg till filer genom att besöka https://onedrive.com och logga in med dina autentiseringsuppgifter för Microsoft 365 Developer-klientorganisationen.

     • Välj Mina filer i det vänstra navigeringsfältet.
     • Välj + Lägg till ny och sedan Mappuppladdning från menyn.
     • Välj mappen openai-acs-msgraph/customer documents från projektet som du klonade.

     

   • Lägg till chattmeddelanden och kalenderhändelser genom att besöka https://teams.microsoft.com och logga in med dina autentiseringsuppgifter för Microsoft 365 Developer-klientorganisationen.

     • Välj Teams i det vänstra navigeringsfältet.

     • Välj ett team och en kanal.

     • Välj Starta ett inlägg.

     • Ange Ny order för Adatum Corporation för ämnet och eventuell ytterligare text som du vill lägga till i meddelandetexten. Välj knappen Publicera .

       Lägg gärna till ytterligare chattmeddelanden som nämner andra företag som används i programmet, till exempel Adventure Works Cycles, Contoso Pharmaceuticals och Tailwind Traders.

       

     • Välj Kalender i det vänstra navigeringsfältet.

     • Välj Nytt möte.

     • Ange "Meet with Adatum Corporation about project schedule" (Möte med Adatum Corporation om projektschema) för rubriken och brödtexten.

     • Välj Spara.

       

   • Lägg till e-postmeddelanden genom att besöka https://outlook.com och logga in med dina autentiseringsuppgifter för Microsoft 365 Developer-klientorganisationen.

     • Välj Ny e-post.

     • Ange din personliga e-postadress i fältet Till .

     • Ange Ny beställning för Adatum Corporation för ämnet och allt du vill ha för brödtexten.

     • Välj Skicka.

       

5. Gå tillbaka till programmet i webbläsaren och uppdatera sidan. Välj Visa relaterat innehåll igen för raden Adatum Corporation . Du bör nu se data som visas på flikarna beroende på vilka uppgifter du utförde i föregående steg.

6. Nu ska vi utforska koden som möjliggör funktionen för organisationsdata i programmet. För att hämta data använder klientdelen av programmet den åtkomsttoken som hämtades av komponenten mgt-login som du tittade på tidigare för att göra anrop till Microsoft Graph-API:er.

Utforska sökkod för filer

Tips/Råd

Om du använder Visual Studio Code kan du öppna filer direkt genom att välja:

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

Skriv sedan namnet på den fil som du vill öppna.

1. Vi börjar med att titta på hur fildata hämtas från OneDrive för företag. Öppna files.component.html och ta en stund att titta igenom koden. Den fullständiga sökvägen till filen är client/src/app/files/files.component.html.

2. Leta upp komponenten mgt-search-results och notera följande attribut:

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

   Komponenten mgt-search-results är en del av Microsoft Graph Toolkit och som namnet antyder används den för att visa sökresultat från Microsoft Graph. Komponenten använder följande funktioner i det här exemplet:

   • Attributet class används för att ange att search-results CSS-klassen ska tillämpas på komponenten.

   • Attributet entity-types används för att ange vilken typ av data som ska sökas efter. I det här fallet används driveItem värdet för att söka efter filer i OneDrive för företag.

   • Attributet queryString används för att ange söktermen. I det här fallet är värdet bundet till egenskapen searchText som skickas till filkomponenten när användaren väljer Visa relaterat innehåll för en rad i datagrid. Hakparenteserna runt queryString anger att egenskapen är bunden till searchText värdet.

   • Händelsen dataChange utlöses när sökresultatet ändras. I det här fallet anropas en kundfunktion med namnet dataChange() i filkomponenten och händelsedata skickas till funktionen. Parentesen runt dataChange anger att händelsen är bunden till dataChange() funktionen.

   • Eftersom ingen anpassad mall har angetts används den inbyggda mgt-search-results standardmallen för att visa sökresultaten.

     

3. Ett alternativ till att använda komponenter som mgt-search-results är att anropa Microsoft Graph-API:er direkt med hjälp av kod. Om du vill se hur det fungerar öppnar du filen graph.service.ts och letar upp searchFiles() funktionen. Den fullständiga sökvägen till filen är client/src/app/core/graph.service.ts.

   • Du kommer att märka att en query parameter skickas till funktionen. Det här är söktermen som skickas när användaren väljer Visa relaterat innehåll för en rad i datagrid. Om ingen söktermer skickas returneras en tom matris.

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

   • Ett filter skapas sedan som definierar vilken typ av sökning som ska utföras. I det här fallet söker koden efter filer i OneDrive för företag så driveItem används precis som du såg tidigare med komponentenmgt-search-results. Det här är samma sak som att skicka driveItem till entity-types komponenten mgt-search-results som du såg tidigare. Parametern query läggs sedan till i queryString filtret tillsammans med ContentType:Document.

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

   • Ett anrop görs sedan till /search/query Microsoft Graph API med hjälp av Providers.globalProvider.graph.client.api() funktionen . Objektet filter skickas till funktionen post() som skickar data till API:et.

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

   • Sökresultaten itereras sedan genom för att hitta hits. Var och hit en innehåller information om ett dokument som hittades. En egenskap med namnet resource innehåller dokumentmetadata och läggs till i matrisen files .

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

   • Matrisen files returneras sedan till anroparen.

     return files;
     

4. När du tittar igenom den här koden kan du se att webbkomponenten mgt-search-results som du utforskade tidigare gör mycket arbete åt dig och avsevärt minskar mängden kod du måste skriva! Det kan dock finnas scenarier där du vill anropa Microsoft Graph direkt för att få mer kontroll över de data som skickas till API:et eller hur resultatet bearbetas.

5. Öppna filen files.component.ts och leta upp search() funktionen. Den fullständiga sökvägen till filen är client/src/app/files/files.component.ts.

   Även om brödtexten i den här funktionen kommenteras ut på grund av att komponenten mgt-search-results används, kan funktionen användas för att göra anropet till Microsoft Graph när användaren väljer Visa relaterat innehåll för en rad i datagrid. Funktionen search() anropar searchFiles()i graph.service.ts och skickar parametern query till den (namnet på företaget i det här exemplet). Resultatet av sökningen tilldelas sedan till komponentens data egenskap.

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

   Filkomponenten kan sedan använda data egenskapen för att visa sökresultaten. Du kan hantera detta med hjälp av anpassade HTML-bindningar eller med hjälp av en annan Microsoft Graph Toolkit-kontroll med namnet mgt-file-list. Här är ett exempel på hur du binder data egenskapen till en av komponentens egenskaper med namnet files och hanterar itemClick händelsen när användaren interagerar med en fil.

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

6. Om du väljer att använda komponenten mgt-search-results som visades tidigare eller skriva anpassad kod för att anropa Microsoft Graph beror på ditt specifika scenario. I det här exemplet används komponenten mgt-search-results för att förenkla koden och minska mängden arbete som du måste utföra.

Utforska Teams sökkod för chattmeddelanden

1. Gå tillbaka till graph.service.ts och leta upp searchChatMessages() funktionen. Du ser att den liknar den searchFiles() funktion som du tittade på tidigare.

   • Den publicerar filterdata till Microsoft Graphs /search/query API och konverterar resultatet till en matris med objekt som har information om teamId, channelIdoch messageId som matchar söktermen.
   • För att hämta Teams-kanalmeddelandena görs ett andra anrop till API:et /teams/${chat.teamId}/channels/${chat.channelId}/messages/${chat.messageId}teamIdoch , channelIdoch messageId skickas. Detta returnerar den fullständiga meddelandeinformationen.
   • Ytterligare filtreringsuppgifter utförs och de resulterande meddelandena returneras från searchChatMessages() till anroparen.

2. Öppna filen chats.component.ts och leta upp search() funktionen. Den fullständiga sökvägen till filen är client/src/app/chats/chats.component.ts. Funktionen search() anropar searchChatMessages()i graph.service.ts och skickar parametern till den query .

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

   Resultatet av sökningen tilldelas egenskapen för data komponenten och databindningen används för att iterera genom resultatmatrisen och återge data. I det här exemplet används en Angular Material-kortkomponent för att visa sökresultaten.

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

   

Skicka ett meddelande till en Microsoft Teams-kanal

1. Förutom att söka efter Microsoft Teams chattmeddelanden tillåter programmet även en användare att skicka meddelanden till en Microsoft Teams-kanal. Detta kan göras genom att anropa slutpunkten för /teams/${teamId}/channels/${channelId}/messages Microsoft Graph.

   

2. I följande kod ser du att en URL skapas som innehåller teamId värdena och channelId . Miljövariabelvärden används för team-ID och kanal-ID i det här exemplet, men dessa värden kan hämtas dynamiskt och med hjälp av Microsoft Graph. Konstanten body innehåller meddelandet som ska skickas. En POST-begäran görs sedan och resultatet returneras till anroparen.

   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. Genom att utnyttja den här typen av funktioner i Microsoft Graph kan du förbättra användarproduktiviteten genom att tillåta användare att interagera med Microsoft Teams direkt från det program som de redan använder.

Nästa steg

Organisationsdata: Hämta e-postmeddelanden och kalenderhändelser