Erstellen einer Me-Erfahrung in Microsoft Teams

Microsoft Teams ist der Hub für die Zusammenarbeit. Dort treffen Sie Ihre Kollegen, tauschen Sich aus und arbeiten gemeinsam an Dateien. Hier können Sie die Anwendungen Ihrer Organisation öffnen, ohne den Kontext Ihrer Arbeit zu verlassen. Es ist auch der Ort, an dem Sie Ihre Geschäftspartner treffen.

Microsoft Teams konzentriert sich auf Teamarbeit. Mithilfe der Erweiterbarkeitsfunktionen können Sie es erweitern, um Ihre Kollegen in den Mittelpunkt zu stellen und ihnen einen zentralen Ort zu bieten, an dem sie ihren Arbeitstag beginnen und sich auf den Tag vorbereiten können.

In diesem Artikel wird ein Beispielszenario vorgestellt, in dem Sie Microsoft Teams mithilfe von SharePoint-Framework erweitern können, um Ihren Kollegen eine Me-Erfahrung zu bieten, in der sie ihren Tag starten und ihre persönlichen Informationen anzeigen können.

In den folgenden Abschnitten werden einige Möglichkeiten zur Implementierung einer Me-Erfahrung in Microsoft Teams mithilfe von SharePoint-Framework beschrieben. Für jede Dieser Abschnitte werden die Vorteile und Überlegungen erläutert, die Sie berücksichtigen sollten.

Einbetten einer modernen SharePoint-Seite

Kürzlich wurde in SharePoint Online die Möglichkeit eingeführt, moderne SharePoint-Seiten in Microsoft Teams einzubetten. Mit dieser Funktion können Sie eine moderne SharePoint-Seite mit mehreren SharePoint-Framework Webparts erstellen, die personalisierte Informationen für den aktuellen Benutzer anzeigen, z. B. aktuelle Dokumente oder anstehende Besprechungen.

Sobald die Seite bereit ist, erstellen Sie in Microsoft Teams eine persönliche App, die auf die SharePoint-Seite verweist.

Vorsicht

Beim Einbetten einer modernen SharePoint-Seite in Teams sollten Sie die URL der Seite nicht verwenden, da sie in der Teams-Desktop-App nicht funktioniert. Verwenden Sie stattdessen eine spezielle URL, die auf die teamslogon.aspx Seite verweist.

Um die Benutzererfahrung zu verbessern, würden Sie die Anzeige der Seite im Vollbildmodus aktivieren, wodurch die Kopfzeile und die Navigation entfernt werden, sodass benutzer sich auf den Inhalt konzentrieren können.

Vorteile des Einbettens von SharePoint-Seiten als Registerkarten

Das Erstellen der Me-Experience in Microsoft Teams mithilfe einer modernen SharePoint-Seite ist die einfachste Möglichkeit, Benutzern ein personalisiertes Dashboard in Microsoft Teams anzubieten. Im Folgenden sind einige wichtige Vorteile der Verwendung dieses Ansatzes aufgeführt.

Kein Code erforderlich

Bei diesem Ansatz werden standardmäßige SharePoint-Seitenbearbeitungsfunktionen verwendet. Vorausgesetzt, Sie verfügen über die erforderlichen Webparts, ist kein benutzerdefinierter Code erforderlich.

Präsentieren von Informationen mithilfe der standardmäßigen Bearbeitungsfunktionen für SharePoint-Seiten

Beim Erstellen der SharePoint-Dashboardseite können Sie alle Seitenfunktionen wie vertikale oder horizontale Spalten, hervorgehobene Abschnitte oder Webparts mit voller Breite nutzen, um die verschiedenen Elemente auf einer Seite sinnvoll zu gestalten. Wenn die von Ihnen verwendeten Webparts konfigurierbar sind, können Sie sie außerdem an Ihre spezifischen Anforderungen anpassen.

Kombinieren von Informationen aus verschiedenen Quellen

Durch die Verwendung einer Mischung aus Webparts können Sie wirklich personenbezogene Informationen wie E-Mails, Besprechungen oder die Dokumente, an denen die Person kürzlich gearbeitet hat, mit anderen Informationen aus der Organisation kombinieren, die jedoch basierend auf ihrer Rolle oder Region für die Person relevant sind.

Es spielt auch keine Rolle, ob die Webparts, die Sie auf der Seite einfügen, von Microsoft bereitgestellt oder von Ihrer Organisation erstellt werden und ob sie in einer einzelnen oder mehreren Lösungen bereitgestellt werden.

Packen und Verteilen von Anwendungen in Ihrer Organisation ohne Code

Um Ihren Benutzern die auf diese Weise erstellte Me-Experience anzubieten, würden Sie sie als persönliche Teams-App packen. Mithilfe von App Studio können Sie die persönliche App erstellen und in Ihrem Organisationskatalog veröffentlichen, damit sie von allen anderen benutzern verwendet werden kann.

Überlegungen zum Einbetten von SharePoint-Seiten als Registerkarten

Die Verwendung moderner SharePoint-Seiten ist zwar die einfachste Möglichkeit, Benutzern ein personalisiertes Dashboard in Microsoft Teams anzubieten, es gibt jedoch einige Überlegungen, die Sie berücksichtigen sollten, bevor Sie diesen Ansatz verwenden.

Spezifisch für Ihre Organisation

Die persönliche App, die die Me-Experience basierend auf einer SharePoint-Seite anbietet, verweist auf eine bestimmte URL in Ihrer SharePoint-Umgebung. Da es für Ihren Mandanten spezifisch ist, ist es nicht für die Verwendung durch andere Organisationen geeignet.

Die gleiche Seite für alle

Um die Dinge für Ihre Benutzer einfach zu halten, würden Sie eine einzelne SharePoint-Seite erstellen, die als Dashboard dient, und sie dann als persönliche Teams-App verfügbar machen. Während die Webparts auf der Seite personalisierte Informationen (meine E-Mails, meine Besprechungen, meine Dokumente) anzeigen würden, sind die Elemente auf der Seite für alle identisch. Benutzer können nicht selbst konfigurieren, welche Informationen sie sehen möchten oder wie viele Elemente die verschiedenen Webparts anzeigen sollen. Das Layout und die Konfiguration der Elemente auf der Seite sind für alle gleich.

Wann das Einbetten von SharePoint-Seiten empfohlen wird

Dieser Ansatz ist ideal für Organisationen, die ihren Benutzern eine Me-Erfahrung in Microsoft Teams mit so wenig Aufwand und benutzerdefinierter Entwicklung wie möglich bieten möchten.

Erstellen einer persönlichen Teams-App mit mehreren Registerkarten

Ein weiterer Ansatz, um Ihren Benutzern eine Me-Erfahrung in Microsoft Teams mit SharePoint-Framework zu bieten, besteht darin, eine persönliche Teams-App mit mehreren Registerkarten zu erstellen.

Persönliche Teams-Apps können aus einer oder mehreren Registerkarten bestehen. Jede Registerkarte zeigt auf eine andere URL. Beim Erstellen einer persönlichen Teams-App mit SharePoint-Framework können Sie jede Registerkarte auf ein SharePoint-Framework-Webpart verweisen. Durch die Kombination relevanter Webparts in einer einzelnen persönlichen Teams-App können Sie Benutzern einen zentralen Ort für den Zugriff auf relevante Informationen bieten.

Bei diesem Ansatz würden Sie beginnen, indem Sie alle Webparts, die Sie verfügbar machen möchten, in einem SharePoint-Framework-Projekt platzieren.

Als Nächstes aktualisieren Sie das Teams-Manifest und verweisen auf die verschiedenen Webparts als Registerkarten auf die persönliche App, z. B.:

{
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.5/MicrosoftTeams.schema.json",
  "manifestVersion": "1.5",
  "packageName": "MyContoso",
  "id": "e81a1b68-686e-412f-90ac-cb80f2544398",
  // ... trimmed for readability
  "staticTabs": [
    {
      "entityId": "com.contoso.my.meetings",
      "name": "Meetings",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=e81a1b68-686e-412f-90ac-cb80f2544398%26forceLocale={locale}",
      "scopes": [
        "personal"
      ]
    },
    {
      "entityId": "com.contoso.my.mail",
      "name": "Mail",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=e81a1b68-686e-412f-90ac-cb80f2544398%26forceLocale={locale}",
      "scopes": [
        "personal"
      ]
    },
    {
      "entityId": "com.contoso.my.files",
      "name": "Files",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=e81a1b68-686e-412f-90ac-cb80f2544398%26forceLocale={locale}",
      "scopes": [
        "personal"
      ]
    },
    {
      "entityId": "com.contoso.my.settings",
      "name": "Settings",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=e81a1b68-686e-412f-90ac-cb80f2544398%26forceLocale={locale}",
      "scopes": [
        "personal"
      ]
    }
  ],
  // ...trimmed for readability
}

Wichtig

Stellen Sie sicher, dass die Webparts, die Sie in der persönlichen Teams-App verfügbar machen möchten, in ihrem Manifest in der supportedHosts Eigenschaft den TeamsPersonalApp angegebenen Wert aufweisen.

Damit Benutzer Webparts konfigurieren können, die auf den verschiedenen Registerkarten verfügbar gemacht werden, können Sie ein separates Einstellungs-Webpart erstellen und als Registerkarte verfügbar machen.

{
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.5/MicrosoftTeams.schema.json",
  "manifestVersion": "1.5",
  "packageName": "MyContoso",
  "id": "e81a1b68-686e-412f-90ac-cb80f2544398",
  // ... trimmed for readability
  "staticTabs": [
    // ... trimmed for readability
    {
      "entityId": "com.contoso.my.settings",
      "name": "Settings",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=e81a1b68-686e-412f-90ac-cb80f2544398%26forceLocale={locale}",
      "scopes": [
        "personal"
      ]
    }
  ],
  // ...trimmed for readability
}

Vorteile des Erstellens von persönlichen Teams-Apps mit mehreren Registerkarten

Das Erstellen der Me-Experience als persönliche Teams-App mit mehreren Registerkarten erfordert einige Entwicklungsarbeit. Im Gegenzug bietet es mehr Vorteile im Zusammenhang mit der Personalisierung und Verteilung der Lösung.

Benutzerspezifische Konfiguration

Benutzer installieren persönliche Teams-Apps und können sie für ihre spezifischen Anforderungen konfigurieren. Indem Sie die Me-Experience als persönliche Teams-App erstellen und einige Konfigurationsoptionen verfügbar machen, können Sie benutzern erlauben, anzugeben, welche Art von Informationen sie sehen und wie sie angezeigt werden sollen. Während der Satz von Registerkarten, die Arten von Informationen, die in der persönlichen App angezeigt werden, festgelegt ist, kann derEn Inhalt von jedem für seine spezifischen Anforderungen konfiguriert werden.

Paket als wiederverwendbare Lösung

Persönliche Teams-Apps, die mit SharePoint-Framework erstellt wurden, können von mehreren verschiedenen Organisationen verwendet werden. Wenn die Organisation über das SharePoint-Framework-Paket mit Webparts verfügt, die in ihrem Mandanten bereitgestellt werden, kann sie die persönliche Teams-App installieren und auch verwenden. Microsoft Teams passt URLs automatisch an, sodass sie auf den SharePoint-Mandanten der Organisation verweisen.

Überlegungen zum Erstellen von persönlichen Teams-Apps mit mehreren Registerkarten

Das Erstellen von persönlichen Teams-Apps mit mehreren Registerkarten bietet Ihnen mehr Flexibilität in Bezug auf die Personalisierung und Verteilung der Lösung. Es gibt jedoch einige Überlegungen, die Sie berücksichtigen sollten, bevor Sie diesen Ansatz verwenden.

Erfordert eine benutzerdefinierte Entwicklung

Im Vergleich zum Erstellen eines Dashboards mit einer modernen SharePoint-Seite und dem Verfügbarmachen als persönliche Teams-App mit App Studio erfordert das Erstellen einer persönlichen Teams-App mit SharePoint-Framework eine benutzerdefinierte Entwicklung. Die Komplexität dieses Aufwands hängt stark von Ihrer Lösung und der Art von Informationen ab, die Sie verfügbar machen möchten.

Beschränkt auf benutzerdefinierte Webparts

Beim Erstellen von persönlichen Teams-Apps mit mehreren Registerkarten können Sie nur auf benutzerdefinierte Webparts verweisen. Das Verweisen auf das von Microsoft bereitgestellte Standardwebpart wird nicht unterstützt.

Alle Webparts sollten sich im selben Projekt befinden.

Die Verwendung aller Webparts im selben Projekt ist zwar nicht erforderlich, hilft Ihnen jedoch, die Wartung Ihrer Projektmappe zu vereinfachen. Wenn Webparts in mehreren Projekten gespeichert werden, kostet es mehr Aufwand, ihre Verweise und Konfiguration im Laufe der Zeit zu verwalten.

Benutzerdefiniertes Webpart zum Verfügbarmachen von Einstellungen erforderlich

Persönliche Teams-Apps verfügen nicht über eine Standard-Benutzeroberfläche zum Konfigurieren von Einstellungen. Stattdessen wird empfohlen, Einstellungen auf einer separaten Registerkarte verfügbar zu machen. Der Entwickler hat die Kontrolle über die Benutzererfahrung dieser Registerkarte und kann sie an die spezifischen Anwendungsanforderungen anpassen.

Wenn Sie dies in SharePoint-Framework übersetzen, bedeutet dies, dass Sie ein separates Webpart erstellen müssen, mit dem Benutzer die Anwendung konfigurieren können. Die Registerkarte "Einstellungen" kann die Konfiguration für alle anderen Registerkarten verfügbar machen, sodass Benutzer die gesamte Anwendung von einem Ort aus konfigurieren können.

Implementieren des Speichers für die Benutzerkonfiguration

Persönliche Teams-Apps bieten keine Infrastruktur zum Beibehalten ihrer Konfiguration. Jede Anwendung muss selbst entscheiden, wie und wo sie die Einstellungen des Benutzers beibehalten.

Während SharePoint-Framework Webparts eine Standardmethode zum Beibehalten von Einstellungen haben, wenn sie auf SharePoint-Seiten oder in Microsoft Teams-Registerkarten verwendet werden, können sie diese Infrastruktur nicht verwenden, wenn sie als persönliche Teams-Apps verfügbar gemacht werden. Stattdessen müssen Sie eine Möglichkeit zum Speichern der Benutzereinstellungen auswählen. Darüber hinaus müssen Sie sicherstellen, dass Ihre Webparts ihre Konfiguration von diesem Speicherort abrufen können.

Jedes Webpart ist eine separate Registerkarte.

Beim Erstellen persönlicher Teams-Apps mit SharePoint-Framework entspricht jede Registerkarte in der App einem Webpart. Je nachdem, wie viele Informationen Sie in Ihrer Me-Experience verfügbar machen möchten, kann Ihre Anwendung möglicherweise über viele Registerkarten verfügen. Anstatt schnell einen Überblick zu erhalten, müssten Benutzer zu den verschiedenen Registerkarten navigieren, um alle erforderlichen Informationen zu finden.

Wann wird das Erstellen persönlicher Teams-Apps empfohlen?

Dieser Ansatz eignet sich für Organisationen, die über professionelle Entwickler mit Erfahrung beim Erstellen SharePoint-Framework Lösungen verfügen und die Me-Experience an andere Organisationen oder den Marketplace verteilen möchten. Darüber hinaus können Benutzer die Anwendung verwenden, solange sie nicht zu viele Arten von Informationen (Registerkarten) verfügbar macht.

Kombinieren mehrerer Webparts auf einer einzelnen Registerkarte einer persönlichen Teams-App

Bei der Diskussion über die Idee, eine benutzerdefinierte persönliche Teams-App mit SharePoint-Framework zu erstellen, haben wir erwähnt, dass jede Registerkarte einem Webpart entspricht. Im Kontext einer Me-Erfahrung führt dies zu einer fragmentierten Erfahrung und vielen verschiedenen Registerkarten, zwischen denen Benutzer wechseln müssen, um einen vollständigen Überblick über ihre Daten zu erhalten.

Wenn Sie Ihre Webparts mit React erstellen, können Sie dieses Problem beheben, indem Sie mehrere Stammkomponenten React (die React Komponente, auf die Sie in der Webpartklasse verweisen) in einem einzelnen Webpart kombinieren.

Angenommen, Sie haben ein Projekt mit den folgenden Webparts: Persönlicher Kalender, Persönliche Kontakte, persönliche Email und Persönliche Aufgaben. Standardmäßig werden alle diese Webparts separaten Registerkarten in einer persönlichen Teams-App zugeordnet. Was wäre, wenn wir sie in einer einzelnen Registerkarte gruppieren könnten, um eine präzisere Ansicht der Informationen zu erhalten?

Um die Benutzerfreundlichkeit zu vereinfachen, können Sie ein neues Webpart erstellen und dessen Stamm-React Komponentenreferenz React Komponenten der einzelnen Webparts verwenden, z. B.:

import { WebPartTitle } from '@pnp/spfx-controls-react/lib/WebPartTitle';
import * as React from 'react';
import { IPlanningProps } from '.';
import PersonalCalendar from '../../personalCalendar/components/PersonalCalendar';
import { PersonalTasks } from '../../personalTasks/components';
import RecentlyUsedDocuments from '../../recentlyUsedDocuments/components/RecentlyUsedDocuments';
import styles from './Planning.module.scss';

export default class Planning extends React.Component<IPlanningProps, {}> {
  public render(): React.ReactElement<IPlanningProps> {
    return (
      <div className={styles.planning}>
        <WebPartTitle displayMode={this.props.displayMode}
          title='Planning'
          updateProperty={this.props.updateProperty} />
        <div className={styles.column}>
          <PersonalCalendar displayMode={this.props.displayMode}
            graphClient={this.props.graphClient}
            title='Upcoming meetings'
            daysInAdvance={4}
            numMeetings={0}
            refreshInterval={5}
            updateProperty={this.props.updateProperty} />
        </div>
        <div className={styles.column}>
          <PersonalTasks displayMode={this.props.displayMode}
            graphClient={this.props.graphClient}
            updateProperty={this.props.updateProperty}
            title='My tasks'
            showCompleted={false}
            userName={this.props.pageContext.user.loginName} />
        </div>
        <div className={styles.column}>
          <RecentlyUsedDocuments context={this.props.pageContext}
            title='My recent documents'
            displayMode={this.props.displayMode}
            graphClient={this.props.graphClient}
            updateProperty={this.props.updateProperty}
            nrOfItems={10} />
        </div>
      </div>
    );
  }
}

Mit einem solchen Container-Webpart können Sie Ihren vorhandenen Code wiederverwenden, ohne ihn zu duplizieren. Darüber hinaus verbessern Sie die Benutzererfahrung, indem Sie verwandte Informationen kombinieren und die Anzahl der verschiedenen verfügbaren Registerkarten verringern.

Vorteile der Kombination mehrerer Webparts auf einer einzelnen Registerkarte

Durch das Kombinieren von Informationen aus mehreren Webparts auf einer einzigen Registerkarte können Sie die Benutzererfahrung Ihrer persönlichen Teams-App vereinfachen.

Gruppieren verwandter Informationen

Durch die Möglichkeit, die Darstellung von Informationen in einer persönlichen Teams-App neu anzuordnen, können Sie die Benutzerfreundlichkeit verbessern. Indem Sie verwandte oder ähnliche Informationen auf einer einzelnen Registerkarte platzieren, helfen Sie Benutzern, schnell einen Blick auf die für sie relevanten Elemente zu werfen.

Das Gruppieren verwandter Informationen verringert auch die Anzahl der verschiedenen Registerkarten, die in der persönlichen App angezeigt werden, sodass Benutzer einfacher zwischen den verschiedenen Abschnitten navigieren können.

Steuern der Benutzererfahrung

Wenn Sie verwandte Informationen gruppieren, erstellen Sie neue React Komponente und verweisen auf vorhandene Komponenten aus dem Inneren. Dabei haben Sie die vollständige Kontrolle darüber, wie die Informationen dargestellt werden, und können verschiedene Aspekte wie die Wichtigkeit der angezeigten Informationen, ihre Relevanz für den Benutzer, das Gerät, die Bildschirmgröße usw. berücksichtigen.

Wiederverwendung von vorhandenem Code

Wenn Sie SharePoint-Framework Webparts mithilfe von React erstellen, wird die Hauptfunktionalität des Webparts in eine einzelne React Komponente eingeschlossen. Indem Sie auf diese Komponente aus einer anderen Komponente verweisen, können Sie alle Funktionen wiederverwenden, ohne Code duplizieren zu müssen. Diese Möglichkeit bietet Ihnen große Flexibilität und ermöglicht es Ihnen, eine Reihe wiederverwendbarer Bausteine zu erstellen, die dann in größeren Webparts oder Teams-Apps zusammengesetzt werden können.

Überlegungen zum Gruppieren mehrerer Webparts auf einer einzelnen Registerkarte

Durch das Kombinieren mehrerer Webparts auf einer einzelnen Registerkarte können Sie den verfügbaren Bildschirmbestand besser nutzen und dem Benutzer eine umfassende Ansicht der relevanten Informationen bieten. Es gibt jedoch einige spezifische Überlegungen, die Sie berücksichtigen sollten, bevor Sie sich für diesen Ansatz entscheiden.

Das Kombinieren von Webparts erfordert Entwicklungsaufwand

Um mehrere React Komponenten in einem einzelnen Webpart zu kombinieren, müssen Sie über ein ausreichendes Verständnis von SharePoint-Framework verfügen. Es ist zwar nicht komplizierter als das Erstellen von Webparts mit React, Aber Sie müssen verstehen, wie die verschiedenen React Komponenten, die Sie integrieren möchten, funktionieren, damit Sie sie ordnungsgemäß konfigurieren können.

Nur für benutzerdefinierte Webparts

Um mehrere React-Komponenten in ein einzelnes Webpart zu integrieren, benötigen Sie Zugriff auf deren Quellcode. Derzeit ist der Quellcode für Erstanbieter-Webparts nicht verfügbar, was bedeutet, dass dieser Ansatz nur auf Webparts von Drittanbietern beschränkt ist.

Wenn das Kombinieren mehrerer Webparts auf einer einzelnen Registerkarte empfohlen wird

Dieser Ansatz wird immer dann empfohlen, wenn Sie Benutzern eine umfassende Me-Erfahrung mit Informationen aus vielen verschiedenen Quellen bieten möchten. Die angezeigten Informationen werden vollständig durch den Code gesteuert, den Sie besitzen. Mit diesem Ansatz können Sie auch eine Lösung erstellen, die direkt oder über den Marketplace an andere Organisationen verteilt werden kann.