Organisationsdaten: Abrufen von Dateien, Chats und Senden von Nachrichten an Teams

In der heutigen digitalen Umgebung arbeiten Benutzer mit einer vielzahl von Organisationsdaten, einschließlich E-Mails, Chats, Dateien, Kalenderereignissen und mehr. Dies kann zu häufigen Kontextverschiebungen führen , die zwischen Aufgaben oder Anwendungen wechseln, wodurch der Fokus unterbrochen und die Produktivität reduziert werden kann. Beispielsweise muss ein Benutzer, der an einem Projekt arbeitet, von seiner aktuellen Anwendung zu Outlook wechseln, um wichtige Details in einer E-Mail zu finden oder zu OneDrive for Business zu wechseln, um eine verwandte Datei zu finden. Diese Back-and-Forth-Aktion stört den Fokus und verschwendet Zeit, die besser für die Aufgabe aufgewendet werden könnte.

Um die Effizienz zu steigern, können Sie Organisationsdaten direkt in die Anwendungen integrieren, die benutzer täglich verwenden. Durch die Bereitstellung von Organisationsdaten in Ihre Anwendungen können Benutzer nahtloser auf Informationen zugreifen und diese verwalten, wodurch Kontextverschiebungen minimiert und die Produktivität verbessert werden. Darüber hinaus bietet diese Integration wertvolle Einblicke und Kontext, sodass Benutzer fundierte Entscheidungen treffen und effektiver arbeiten können.

In dieser Übung führen Sie die folgenden Schritte aus:

Erfahren Sie, wie die mgt-search-results-Webkomponente im Microsoft Graph-Toolkit verwendet werden kann, um nach Dateien zu suchen.
Erfahren Sie, wie Sie Microsoft Graph direkt aufrufen, um Dateien aus OneDrive for Business und Chatnachrichten aus Microsoft Teams abzurufen.
Verstehen, wie Chatnachrichten mithilfe von Microsoft Graph an Microsoft Teams-Kanäle gesendet werden.

Verwenden des Features "Organisationsdaten"

In einer vorherigen Übung haben Sie eine App-Registrierung in Microsoft Entra ID erstellt und den Anwendungsserver und den API-Server gestartet. Außerdem haben Sie die folgenden Werte in der .env Datei aktualisiert.
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Stellen Sie sicher, dass Sie die vorherige Übung abgeschlossen haben, bevor Sie fortfahren.
Wechseln Sie zurück zum Browser (http://localhost:4200). Wenn Sie noch nicht angemeldet sind, wählen Sie " Anmelden" in der Kopfzeile aus, und melden Sie sich mit einem Benutzer aus Ihrem Microsoft 365-Entwicklermandanten an.
Hinweis

Zusätzlich zur Authentifizierung des Benutzers ruft die mgt-login-Webkomponente auch ein Zugriffstoken ab, das von Microsoft Graph für den Zugriff auf Dateien, Chats, E-Mails, Kalenderereignisse und andere Organisationsdaten verwendet werden kann. Das Zugriffstoken enthält die Bereiche (Berechtigungen) wie Chat.ReadWrite, Files.Read.Allund andere, die Sie zuvor gesehen haben:
```
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']
});
```
Wählen Sie " Verwandte Inhalte anzeigen " für die Zeile "Adatum Corporation " im Datagrid aus. Dies führt dazu, dass Organisationsdaten wie Dateien, Chats, E-Mails und Kalenderereignisse mithilfe von Microsoft Graph abgerufen werden. Sobald die Daten geladen wurden, wird sie unterhalb des Datengrids in einer Benutzeroberfläche mit Registerkarten angezeigt. Es ist wichtig zu erwähnen, dass an diesem Punkt möglicherweise keine Daten angezeigt werden, da Sie noch keine Dateien, Chats, E-Mails oder Kalenderereignisse für den Benutzer in Ihrem Microsoft 365-Entwicklermandanten hinzugefügt haben. Lassen Sie uns dies im nächsten Schritt beheben.
Ihr Microsoft 365-Mandant hat möglicherweise zu diesem Zeitpunkt keine zugehörigen Organisationsdaten für die Adatum Corporation . Führen Sie zum Hinzufügen einiger Beispieldaten mindestens eine der folgenden Aktionen aus:
- Fügen Sie Dateien hinzu, indem Sie Ihre Microsoft 365 Developer-Mandantenanmeldeinformationen besuchen https://onedrive.com und sich anmelden.
  - Wählen Sie "Meine Dateien" im linken Navigationsbereich aus.
  - Wählen Sie +Neu hinzufügen und dann ordnerupload aus dem Menü aus.
  - Wählen Sie den Ordner "openai-acs-msgraph/customer documents " aus dem Projekt aus, das Sie geklont haben.
- Fügen Sie Chatnachrichten und Kalenderereignisse hinzu, indem Sie Ihre Microsoft 365 Developer-Mandantenanmeldeinformationen besuchen https://teams.microsoft.com und sich anmelden.
  - Wählen Sie Teams in der linken Navigationsleiste aus.
  - Wählen Sie ein Team und einen Kanal aus.
  - Wählen Sie "Beitrag starten" aus.
  - Geben Sie neue Bestellung für die Adatum Corporation für den Betreff und alle zusätzlichen Texte ein, die Sie im Nachrichtentext hinzufügen möchten. Wählen Sie die Schaltfläche " Posten " aus.
    
    Sie können zusätzliche Chatnachrichten hinzufügen, die andere in der Anwendung verwendete Unternehmen erwähnen, z. B. Adventure Works Cycles, Contoso Pharmaceuticals und Tailwind Traders.
  - Wählen Sie im linken Navigationsbereich "Kalender" aus.
  - Wählen Sie "Neue Besprechung" aus.
  - Geben Sie "Meet with Adatum Corporation about project schedule" für den Titel und den Textkörper ein.
  - Wählen Sie Speichern aus.
- Fügen Sie E-Mails hinzu, indem Sie ihre Microsoft 365 Developer-Mandantenanmeldeinformationen besuchen https://outlook.com und sich anmelden.
  - Wählen Sie "Neue E-Mail" aus.
  - Geben Sie Ihre persönliche E-Mail-Adresse in das Feld "An " ein.
  - Geben Sie neue Bestellung für die Adatum Corporation für den Betreff und alles ein, was Sie für den Textkörper wünschen.
  - Wählen Sie "Senden" aus.
Wechseln Sie zurück zur Anwendung im Browser, und aktualisieren Sie die Seite. Wählen Sie " Verwandte Inhalte erneut anzeigen" für die Zeile "Adatum Corporation " aus. Nun sollten daten angezeigt werden, die auf den Registerkarten angezeigt werden, je nachdem, welche Aufgaben Sie im vorherigen Schritt ausgeführt haben.
Sehen wir uns den Code an, der das Feature für Organisationsdaten in der Anwendung ermöglicht. Um die Daten abzurufen, verwendet der clientseitige Teil der Anwendung das Zugriffstoken, das von der mgt-Login-Komponente abgerufen wurde, die Sie zuvor angesehen haben, um Aufrufe an Microsoft Graph-APIs auszuführen.

Durchsuchen des Dateisuchcodes

Tipp

Wenn Sie Visual Studio Code verwenden, können Sie Dateien direkt öffnen, indem Sie Folgendes auswählen:

Windows/Linux: STRG+P
Mac: Cmd + P

Geben Sie dann den Namen der Datei ein, die Sie öffnen möchten.

Sehen wir uns zunächst an, wie Dateidaten aus OneDrive for Business abgerufen werden. Öffnen Sie files.component.html , und nehmen Sie sich einen Moment Zeit, um den Code zu durchsuchen. Der vollständige Pfad zur Datei ist client/src/app/files/files.component.html.
Suchen Sie die mgt-search-results-Komponente , und notieren Sie sich die folgenden Attribute:
```
<mgt-search-results 
    class="search-results" 
    entity-types="driveItem" 
    [queryString]="searchText"
    (dataChange)="dataChange($any($event))" 
/>
```
Die Mgt-Search-Results-Komponente ist Teil des Microsoft Graph-Toolkits, und wie der Name schon sagt, wird sie verwendet, um Suchergebnisse aus Microsoft Graph anzuzeigen. Die Komponente verwendet die folgenden Features in diesem Beispiel:
- Das class Attribut wird verwendet, um anzugeben, dass die search-results CSS-Klasse auf die Komponente angewendet werden soll.
- Das entity-types Attribut wird verwendet, um den Datentyp anzugeben, nach dem gesucht werden soll. In diesem Fall wird driveItem der Wert verwendet, um nach Dateien in OneDrive for Business zu suchen.
- Das queryString Attribut wird verwendet, um den Suchbegriff anzugeben. In diesem Fall ist der Wert an die searchText Eigenschaft gebunden, die an die Dateikomponente übergeben wird, wenn der Benutzer " Verwandte Inhalte anzeigen" für eine Zeile im Datagrid auswählt. Die eckigen Klammern queryString geben an, dass die Eigenschaft an den searchText Wert gebunden ist.
- Das dataChange Ereignis wird ausgelöst, wenn sich die Suchergebnisse ändern. In diesem Fall wird eine benannte dataChange() Kundenfunktion in der Dateikomponente aufgerufen, und die Ereignisdaten werden an die Funktion übergeben. Die Klammer dataChange zeigt an, dass das Ereignis an die dataChange() Funktion gebunden ist.
- Da keine benutzerdefinierte Vorlage bereitgestellt wird, wird die integrierte mgt-search-results Standardvorlage verwendet, um die Suchergebnisse anzuzeigen.
Eine Alternative zur Verwendung von Komponenten wie mgt-search-results besteht darin, Microsoft Graph-APIs direkt mithilfe von Code aufzurufen. Um zu sehen, wie das funktioniert, öffnen Sie die graph.service.ts Datei, und suchen Sie die searchFiles() Funktion. Der vollständige Pfad zur Datei ist client/src/app/core/graph.service.ts.
- Sie werden feststellen, dass ein query Parameter an die Funktion übergeben wird. Dies ist der Suchbegriff, der übergeben wird, wenn der Benutzer " Verwandte Inhalte anzeigen " für eine Zeile im Datagrid auswählt. Wenn kein Suchbegriff übergeben wird, wird ein leeres Array zurückgegeben.
```
async searchFiles(query: string) {
    const files: DriveItem[] = [];
    if (!query) return files;

    ...
}
```
- Anschließend wird ein Filter erstellt, der den auszuführenden Suchtyp definiert. In diesem Fall sucht der Code nach Dateien in OneDrive for Business, sodass driveItem er genauso verwendet wird wie zuvor mit der mgt-search-results Komponente. Dies ist identisch mit der Übergabe driveItem an entity-types die mgt-search-results-Komponente , die Sie zuvor gesehen haben. Der query Parameter wird dann zusammen mit queryStringdem ContentType:Document Filter hinzugefügt.
```
const filter = {
    "requests": [
        {
            "entityTypes": [
                "driveItem"
            ],
            "query": {
                "queryString": `${query} AND ContentType:Document`
            }
        }
    ]
};
```
- Anschließend wird mithilfe der Funktion ein Aufruf an die /search/queryProviders.globalProvider.graph.client.api() Microsoft Graph-API ausgeführt. Das filter Objekt wird an die post() Funktion übergeben, die die Daten an die API sendet.
```
const searchResults = await Providers.globalProvider.graph.client.api('/search/query').post(filter);
```
- Die Suchergebnisse werden dann durchlaufen, um sie zu suchen hits. Jede hit enthält Informationen zu einem Dokument, das gefunden wurde. Eine benannte resource Eigenschaft enthält die Dokumentmetadaten und wird dem files Array hinzugefügt.
```
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);
            }
        }
    }
}
```
- Das files Array wird dann an den Aufrufer zurückgegeben.
```
return files;
```
Wenn Sie diesen Code durchsehen, können Sie sehen, dass die zuvor untersuchte mgt-search-results-Webkomponente viel Arbeit für Sie erledigt und die Menge an Code, den Sie schreiben müssen, erheblich reduziert! Es kann jedoch Szenarien geben, in denen Sie Microsoft Graph direkt aufrufen möchten, um mehr Kontrolle über die Daten zu haben, die an die API gesendet werden oder wie die Ergebnisse verarbeitet werden.
Öffnen Sie die files.component.ts Datei, und suchen Sie die search() Funktion. Der vollständige Pfad zur Datei ist client/src/app/files/files.component.ts.

Obwohl der Textkörper dieser Funktion aufgrund der verwendeten mgt-search-results-Komponente auskommentiert wird, kann die Funktion verwendet werden, um den Aufruf von Microsoft Graph auszuführen, wenn der Benutzer "Verwandte Inhalte anzeigen" für eine Zeile im Datagrid auswählt. Die search() Funktion ruft searchFiles() in graph.service.ts auf und übergibt den query Parameter an ihn (den Namen des Unternehmens in diesem Beispiel). Die Ergebnisse der Suche werden dann der data Eigenschaft der Komponente zugewiesen.
```
override async search(query: string) {
    this.data = await this.graphService.searchFiles(query);
}
```
Die Dateikomponente kann dann die data Eigenschaft verwenden, um die Suchergebnisse anzuzeigen. Sie können dies mit benutzerdefinierten HTML-Bindungen oder mithilfe eines anderen Microsoft Graph-Toolkit-Steuerelements namens mgt-file-listbehandeln. Hier sehen Sie ein Beispiel für die Bindung der data Eigenschaft an eine der Eigenschaften der Komponente, die benannt files sind und das itemClick Ereignis behandeln, während der Benutzer mit einer Datei interagiert.
```
<mgt-file-list (itemClick)="itemClick($any($event))" [files]="data"></mgt-file-list>
```
Unabhängig davon, ob Sie die zuvor gezeigte mgt-search-results-Komponente verwenden oder benutzerdefinierten Code schreiben, um Microsoft Graph aufzurufen, hängt von Ihrem jeweiligen Szenario ab. In diesem Beispiel wird die mgt-search-results-Komponente verwendet, um den Code zu vereinfachen und die Menge an Arbeit zu verringern, die Sie erledigen müssen.

Erkunden des Suchcodes für Teams-Chatnachrichten

Wechseln Sie zurück zu graph.service.ts , und suchen Sie die searchChatMessages() Funktion. Sie werden sehen, dass es der Funktion ähnelt, die searchFiles() Sie zuvor angesehen haben.
- Es veröffentlicht Filterdaten in die MICROSOFT Graph-API /search/query und konvertiert die Ergebnisse in ein Array von Objekten, die Informationen zu dem teamId, channelIdund messageId die dem Suchbegriff entsprechen.
- Um die Teams-Kanalnachrichten abzurufen, wird ein zweiter Aufruf an die /teams/${chat.teamId}/channels/${chat.channelId}/messages/${chat.messageId} API und die teamId, channelIdund messageId werden übergeben. Dadurch werden die vollständigen Nachrichtendetails zurückgegeben.
- Zusätzliche Filteraufgaben werden ausgeführt, und die resultierenden Nachrichten werden an searchChatMessages() den Aufrufer zurückgegeben.

Öffnen Sie die datei chats.component.ts , und suchen Sie die search() Funktion. Der vollständige Pfad zur Datei ist client/src/app/chats/chats.component.ts. Die search() Funktion ruft in searchChatMessages() auf und übergibt den query Parameter an ihn.

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

Die Ergebnisse der Suche werden der data Eigenschaft der Komponente zugewiesen, und die Datenbindung wird verwendet, um das Ergebnisarray zu durchlaufen und die Daten zu rendern. In diesem Beispiel wird eine Angular Material-Kartenkomponente zum Anzeigen der Suchergebnisse verwendet.

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

Teams-Chats anzeigen

Senden einer Nachricht an einen Microsoft Teams-Kanal

Zusätzlich zur Suche nach Microsoft Teams-Chatnachrichten ermöglicht die Anwendung einem Benutzer auch das Senden von Nachrichten an einen Microsoft Teams-Kanal. Dies kann durch Aufrufen des /teams/${teamId}/channels/${channelId}/messages Endpunkts von Microsoft Graph erfolgen.

Im folgenden Code sehen Sie, dass eine URL erstellt wird, die die teamId Werte enthält channelId . Umgebungsvariablenwerte werden für die Team-ID und Kanal-ID in diesem Beispiel verwendet, aber diese Werte können dynamisch mit Microsoft Graph abgerufen werden. Die body Konstante enthält die zu sendende Nachricht. Anschließend erfolgt eine POST-Anforderung, und die Ergebnisse werden an den Aufrufer zurückgegeben.

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

Die Nutzung dieser Art von Funktionalität in Microsoft Graph bietet eine hervorragende Möglichkeit, die Benutzerproduktivität zu verbessern, indem sie es Benutzern ermöglichen, direkt über die Anwendung, die sie bereits verwenden, mit Microsoft Teams zu interagieren.

Nächster Schritt

Organisationsdaten: Abrufen von E-Mails und Kalenderereignissen

Feedback

War diese Seite hilfreich?

Last updated on 2025-06-13