Szervezeti adatok: Fájlok és csevegések lekérése, valamint üzenetek küldése a Teamsbe.

A mai digitális környezetben a felhasználók számos szervezeti adattal dolgoznak, beleértve az e-maileket, csevegéseket, fájlokat, naptáreseményeket stb. Ez a környezet gyakori eltolódásához – a tevékenységek vagy alkalmazások közötti váltáshoz – vezethet, ami megzavarhatja a fókuszt, és csökkentheti a termelékenységet. Előfordulhat például, hogy egy projekten dolgozó felhasználónak át kell váltania az aktuális alkalmazásról az Outlookra, hogy megtalálja a fontos részleteket egy e-mailben, vagy váltson OneDrive Vállalati verzió egy kapcsolódó fájl megkereséséhez. Ez a háttérbeli művelet megzavarja a fókuszt, és időt pazarol, amelyet jobban lehetne a feladatra fordítani.

A hatékonyság növelése érdekében a szervezeti adatokat közvetlenül integrálhatja a felhasználók által használt alkalmazásokba. A szervezeti adatok alkalmazásokba való beléptetésével a felhasználók zökkenőmentesebben férhetnek hozzá és kezelhetik az információkat, minimalizálva a környezetváltásokat, és javíthatják a termelékenységet. Emellett ez az integráció értékes megállapításokat és kontextust biztosít, így a felhasználók megalapozott döntéseket hozhatnak, és hatékonyabban dolgozhatnak.

Ebben a gyakorlatban a következőt fogja elvégezni:

• Megtudhatja, hogyan használható az mgt-search-results webes összetevő a Microsoft Graph Toolkitben fájlok keresésére.
• Megtudhatja, hogyan hívhatja meg közvetlenül a Microsoft Graphot, ha fájlokat szeretne lekérni OneDrive Vállalati verzió és csevegőüzeneteket a Microsoft Teamsből.
• Megtudhatja, hogyan küldhet csevegőüzeneteket a Microsoft Teams-csatornákra a Microsoft Graph használatával.

A Szervezeti adatok funkció használata

1. Egy korábbi gyakorlatban létrehozott egy alkalmazásregisztrációt a Microsoft Entra-azonosítóban, és elindította az alkalmazáskiszolgálót és az API-kiszolgálót. A fájlban a következő értékeket is frissítette .env .

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

   A folytatás előtt győződjön meg arról, hogy elvégezte az előző gyakorlatot .

2. Lépjen vissza a böngészőbe (http://localhost:4200). Ha még nem jelentkezett be, válassza a Bejelentkezés lehetőséget a fejlécben, és jelentkezzen be egy felhasználóval a Microsoft 365 Developer-bérlőjéből.

   Megjegyzés:

   A felhasználó hitelesítése mellett az mgt-login webes összetevő egy hozzáférési jogkivonatot is lekér, amelyet a Microsoft Graph a fájlok, csevegések, e-mailek, naptáresemények és egyéb szervezeti adatok eléréséhez használhat. A hozzáférési jogkivonat tartalmazza azokat a hatóköröket (engedélyeket), mint például Chat.ReadWritea , Files.Read.Allés a korábban látottakat:

   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álassza a Kapcsolódó tartalom megtekintése lehetőséget az Adatum Corporation sorhoz a datagridben. Ez a microsoft graph használatával lekérheti a szervezeti adatokat, például fájlokat, csevegéseket, e-maileket és naptáreseményeket. Az adatok betöltése után az adatrögzítés alatt jelenik meg egy többlapos felületen. Fontos megemlíteni, hogy jelenleg nem lát semmilyen adatot, mivel még nem adott hozzá fájlokat, csevegéseket, e-maileket vagy naptáreseményeket a felhasználó számára a Microsoft 365 fejlesztői bérlőjében. Ezt a következő lépésben oldjuk meg.

   

4. Előfordulhat, hogy a Microsoft 365-bérlője jelenleg nem rendelkezik az Adatum Corporationhez kapcsolódó szervezeti adatokkal. Néhány mintaadat hozzáadásához hajtsa végre az alábbi műveletek legalább egyikét:

   • Fájlok hozzáadása a Microsoft 365 Fejlesztői bérlő hitelesítő adatainak megtekintésével https://onedrive.com és bejelentkezésével.

     • Válassza a Saját fájlok lehetőséget a bal oldali navigációs sávon.
     • Válassza az + Új hozzáadása , majd a Mappa feltöltése lehetőséget a menüből.
     • Válassza ki az openai-acs-msgraph/customer documents mappát a klónozott projektből.

     

   • Csevegőüzeneteket és naptáreseményeket adhat hozzá a Microsoft 365 Fejlesztői bérlői hitelesítő adatainak megtekintésével https://teams.microsoft.com és bejelentkezésével.

     • Válassza a Teams lehetőséget a bal oldali navigációs sávon.

     • Válasszon ki egy csapatot és egy csatornát.

     • Válassza a Bejegyzés indítása lehetőséget.

     • Adja meg az Adatum Corporation által a tárgyhoz rendelt új rendelést , valamint az üzenet törzsében hozzáadni kívánt további szöveget. Válassza a Post gombot.

       Nyugodtan hozzáadhat további csevegőüzeneteket, amelyek az alkalmazásban használt más vállalatokat említik, például az Adventure Works Cyclest, a Contoso Pharmaceuticalst és a Tailwind Traderst.

       

     • A bal oldali navigációs sávon válassza a Naptár lehetőséget.

     • Válassza az Új értekezlet lehetőséget.

     • Adja meg a cím és a törzs "Meet with Adatum Corporation about project schedule" (Meet with Adatum Corporation about project schedule) (Meet with Adatum Corporation about project schedule) kifejezést.

     • Válassza az Mentésgombot.

       

   • E-maileket a Microsoft 365 Fejlesztői bérlői hitelesítő adatainak megtekintésével https://outlook.com és bejelentkezésével vehet fel.

     • Válassza az Új e-mail lehetőséget.

     • Írja be a személyes e-mail-címét a Címzett mezőbe.

     • Adja meg az Adatum Corporation számára leadott új rendelést a tárgyhoz és a törzshöz tartozó minden elemet.

     • Válassza a Küldés lehetőséget.

       

5. Térjen vissza az alkalmazáshoz a böngészőben, és frissítse az oldalt. Válassza ismét a Kapcsolódó tartalom megtekintése lehetőséget az Adatum Corporation sorhoz. Mostantól az előző lépésben végrehajtott tevékenységektől függően a lapokon megjelenő adatoknak kell megjelennie.

6. Vizsgáljuk meg azt a kódot, amely lehetővé teszi a szervezeti adatok funkcióját az alkalmazásban. Az adatok lekéréséhez az alkalmazás ügyféloldali része a korábban megtekintett mgt-login összetevő által lekért hozzáférési jogkivonatot használja a Microsoft Graph API-k hívásához.

Fájlok keresési kódjainak felfedezése

Jótanács

Ha Visual Studio Code-ot használ, közvetlenül a következő kiválasztásával nyithatja meg a fájlokat:

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

Ezután írja be a megnyitni kívánt fájl nevét.

1. Először nézzük meg, hogyan kérhetők le a fájladatok a OneDrive Vállalati verzió. Nyissa meg files.component.html , és szánjon egy kis időt a kód megtekintésére. A fájl teljes elérési útja az ügyfél/src/alkalmazás/fájlok/files.component.html.

2. Keresse meg az mgt-search-results összetevőt , és jegyezze fel a következő attribútumokat:

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

   Az mgt-search-results összetevő a Microsoft Graph Toolkit része, és ahogy a neve is mutatja, a Microsoft Graph keresési eredményeinek megjelenítésére szolgál. Az összetevő a következő funkciókat használja ebben a példában:

   • Az class attribútum azt határozza meg, hogy a search-results CSS-osztályt alkalmazni kell az összetevőre.

   • Az entity-types attribútum a keresendő adatok típusának megadására szolgál. Ebben az esetben az érték a driveItem OneDrive Vállalati verzió fájljainak keresésére szolgál.

   • Az queryString attribútum a keresési kifejezés megadására szolgál. Ebben az esetben az érték a searchText fájlösszetevőnek átadott tulajdonsághoz van kötve, amikor a felhasználó a Kapcsolódó tartalom megtekintése lehetőséget választja az adatterület egy sorához. A szögletes zárójelek azt queryString jelzik, hogy a tulajdonság az searchText értékhez van kötve.

   • Az dataChange esemény a keresési eredmények megváltozásakor aktiválódik. Ebben az esetben a fájlösszetevődataChange()egy ügyfélfüggvényt, és az eseményadatokat átadja a függvénynek. A zárójel azt dataChange jelzi, hogy az esemény a dataChange() függvényhez van kötve.

   • Mivel nincs megadva egyéni sablon, a rendszer az alapértelmezett beépített sablont mgt-search-results használja a keresési eredmények megjelenítéséhez.

     

3. Az összetevők, például az mgt-search-results használata alternatíva a Microsoft Graph API-k közvetlen meghívása kód használatával. A működés megtekintéséhez nyissa meg a graph.service.ts fájlt, és keresse meg a függvényt searchFiles() . A fájl teljes elérési útja az ügyfél/src/app/core/graph.service.ts.

   • Megfigyelheti, hogy a függvény egy query paramétert ad át. Ez a keresési kifejezés lesz átadva, mivel a felhasználó a kapcsolódó tartalom megtekintése lehetőséget választja a datagrid egy sorához. Ha nem ad át keresési kifejezést, a függvény üres tömböt ad vissza.

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

   • Ezután létrejön egy szűrő, amely meghatározza a végrehajtandó keresés típusát. Ebben az esetben a kód fájlokat keres a OneDrive Vállalati verzió, így driveItem ugyanúgy használják, mint korábban az mgt-search-results összetevővel. Ez ugyanaz, mint a korábban látott driveItem összetevő átadása entity-types. A query paraméter ezután hozzáadódik a szűrőhöz a queryString következővel ContentType:Documentegyütt: .

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

   • Ezután a függvény használatával hívást kezdeményezünk a /search/query Microsoft Graph API-nak Providers.globalProvider.graph.client.api() . A filter függvény átadja az objektumot annak a post() függvénynek, amely elküldi az adatokat az API-nak.

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

   • A keresési eredmények ezután át lesznek írva a kereséshez hits. Mindegyik hit tartalmaz egy talált dokumentumra vonatkozó információt. A névvel ellátott resource tulajdonság tartalmazza a dokumentum metaadatait, és hozzáadódik a files tömbhöz.

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

   • A files tömb ezután visszakerül a hívóhoz.

     return files;
     

4. Ezt a kódot áttekintve láthatja, hogy a korábban feltárt mgt-search-results webes összetevő sok munkát végez Az Ön számára, és jelentősen csökkenti az írandó kód mennyiségét! Lehetnek azonban olyan esetek, amikor közvetlenül a Microsoft Graphot szeretné meghívni, hogy jobban szabályozhassa az API-nak küldött adatokat, illetve az eredmények feldolgozásának módját.

5. Nyissa meg a files.component.ts fájlt, és keresse meg a függvényt search() . A fájl teljes elérési útja az ügyfél/src/alkalmazás/fájlok/files.component.ts.

   Bár a függvény törzsét az mgt-search-results összetevő miatt fűzi hozzá a rendszer, a függvény a Microsoft Graph hívására is használható, amikor a felhasználó a Kapcsolódó tartalom megtekintése lehetőséget választja az adatterület egy sorához. A search() függvény searchFiles() graph.service.ts, és átadja neki a query paramétert (ebben a példában a vállalat neve). A keresés eredményei ezután hozzá lesznek rendelve az data összetevő tulajdonságához.

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

   A fájlösszetevő ezután a data tulajdonság használatával megjelenítheti a keresési eredményeket. Ezt egyéni HTML-kötésekkel vagy egy másik Microsoft Graph Toolkit vezérlővel mgt-file-listis kezelheti. Íme egy példa arra, hogy a tulajdonságot az data összetevő egyik elnevezett files tulajdonságához köti, és kezeli az eseményt, itemClick miközben a felhasználó egy fájllal kommunikál.

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

6. Az adott forgatókönyvtől függ, hogy a korábban bemutatott mgt-search-results összetevőt használja-e , vagy egyéni kódot ír a Microsoft Graph meghívásához. Ebben a példában az mgt-search-results összetevő leegyszerűsíti a kódot, és csökkenti a szükséges munkát.

A Teams csevegőüzeneteinek keresési kódja

1. Lépjen vissza a graph.service.ts , és keresse meg a függvényt searchChatMessages() . Látni fogja, hogy hasonló a searchFiles() korábban vizsgált függvényhez.

   • Szűrőadatokat jelenít meg a Microsoft Graph API-jában/search/query, és az eredményeket olyan objektumok tömbjeként alakítja át, amelyek a keresési teamIdchannelId kifejezéssel messageIdegyező információkat tartalmaznak.
   • A Teams-csatorna üzeneteinek lekéréséhez a rendszer egy második hívást kezdeményez az /teams/${chat.teamId}/channels/${chat.channelId}/messages/${chat.messageId} API-nak és a teamId, channelIdés messageId a rendszer átadja. Ez visszaadja az üzenet teljes részleteit.
   • A rendszer további szűrési feladatokat hajt végre, és az eredményül kapott üzeneteket a rendszer visszaadja searchChatMessages() a hívónak.

2. Nyissa meg a chats.component.ts fájlt, és keresse meg a függvényt search() . A fájl teljes elérési útja az ügyfél/src/alkalmazás/csevegés/chats.component.ts. A search() függvény meghívja searchChatMessages() graph.service.ts, és átadja neki a query paramétert.

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

   A keresés eredményei az összetevő tulajdonságához data vannak rendelve, az adatkötés pedig az eredménytömbön keresztüli iteráláshoz és az adatok rendereléséhez használható. Ez a példa egy Angular Material kártyaösszetevőt használ a keresési eredmények megjelenítéséhez.

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

   

Üzenet küldése Microsoft Teams-csatornára

1. A Microsoft Teams csevegőüzeneteinek keresése mellett az alkalmazás lehetővé teszi, hogy a felhasználó üzeneteket küldjön egy Microsoft Teams-csatornára. Ez a Microsoft Graph végpontjának meghívásával /teams/${teamId}/channels/${channelId}/messages végezhető el.

   

2. Az alábbi kódban láthatja, hogy létrejön egy URL-cím, amely tartalmazza az értékeket és teamId az channelId értékeket. Ebben a példában környezeti változóértékeket használunk a csapatazonosítóhoz és a csatornaazonosítóhoz, de ezek az értékek dinamikusan lekérhetők a Microsoft Graph használatával is. Az body állandó tartalmazza a küldendő üzenetet. Ezután post kérést küld a rendszer, és az eredményeket visszaadja a hívónak.

   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. Az ilyen típusú funkciók a Microsoft Graphban való használata nagyszerű módot kínál a felhasználói termék-használat javítására azáltal, hogy lehetővé teszi a felhasználók számára, hogy közvetlenül a már használt alkalmazásból kommunikáljanak a Microsoft Teamsszel.

Következő lépés

Szervezeti adatok: E-mailek és naptáresemények lekérése