Hinzufügen einer Microsoft Teams-Registerkarte in SharePoint als SPFx-WebpartAdding a Microsoft Teams tab in SharePoint as an SPFx web part

Umfassende Integration zwischen Microsoft Teams und SharePointRich integration between Teams and SharePoint

Mit der November-Version von Microsoft Teams und SharePoint Framework v.With the November release of Teams and SharePoint Framework v. 1,7 haben Entwickler zwei leistungsstarke Funktionen:1.7, developers have two powerful capabilities:

Teams-Registerkarten in SharePointTeams tabs in SharePoint

Mit SharePoint Framework v. 1.7 unterstützen wir nun die Möglichkeit für Entwickler, ihre Teams-Registerkarten zu nehmen und in SharePoint zu hosten.With SharePoint Framework v.1.7, we’re now supporting the ability for developers to take their Teams tabs and host it in SharePoint. Wenn Tabs in SharePoint gehostet werden, erhalten Sie eine ähnliche "ganzseitige" Oberfläche, wobei Sie alle Funktionen von Teams-Registerkarten unter Beibehaltung des Kontexts und der Vertrautheit einer SharePoint-Website verfügbar machen.As Tabs hosted in SharePoint get a similar "full page" experience, exposing the all the features of Teams tabs while retaining the context and familiarity of a SharePoint site.

SharePoint-Framework in Microsoft TeamsSharePoint Framework in Teams

Sie können auch Ihre Microsoft Teams-Registerkarten mit SharePoint Framework implementieren.You can also implement your Microsoft Teams tabs using SharePoint Framework. Für SharePoint-Entwickler wird dadurch der Entwicklungsprozess für Teams-Registerkarten erheblich vereinfacht, da SharePoint-Framework-Webparts in SharePoint gehostet werden, ohne dass externe Dienste wie Azure erforderlich sind.For SharePoint developers, this significantly simplifies the development process for Teams tabs because SharePoint Framework web parts are hosted within SharePoint without any need for external services such as Azure. Erfahren Sie mehr über die Verwendung des SharePoint-Frameworks in Microsoft Teams.Learn more about using the SharePoint Framework in Teams.

EinführungIntroduction

In diesen Anweisungen wird erklärt, wie Sie eine Registerkarte aus einer Microsoft Teams-Beispiel-app erstellen und in SharePoint verwenden können.These instructions will explain how you can take a tab from a Microsoft Teams sample app and use it in SharePoint. Wir verwenden eine Registerkarte, die bereits auf Azure gehostet wird, um sich auf die erforderliche Integrationsarbeit zu konzentrieren.We will be using a tab that's already hosted on Azure in order to focus on the required integration work.

Die Beispiel-APP, die wir verwenden, ist eine Talent Verwaltungsanwendung.The sample app we're using is a Talent Management application. Es verwaltet den Einstellungsprozess von Kandidaten für offene Positionen in einem Team.It manages the hiring process of candidates for open positions in a team. (Die APP selbst, während Sie nett aussieht, tut tatsächlich nichts.(The app itself, while it looks nice, doesn't actually do anything. Wir möchten uns darauf konzentrieren, eine Teams-APP zu erstellen und Sie in Teams zu laden, ohne eine echte Talent Verwaltungsanwendung zu erstellen.)We want to focus on building a Teams app and loading it into Teams, not create a real talent management application.)

Vorteile dieses AnsatzesBenefits of this approach

  • Erreichen von SharePoint-Benutzern mit der Registerkarte "vorhandene Teams"Reach SharePoint users with your existing Teams tab
  • Laden Sie Ihr App-Manifest direkt in Ihren SharePoint-App-Katalog hoch.Upload your app manifest directly to your SharePoint app catalog. Microsoft Teams-Anwendungspakete werden jetzt von SharePoint unterstütztTeams application packages are now supported by SharePoint
  • Endbenutzer konfigurieren die Registerkarte auf einer Seite genauso wie alle anderen SharePoint-WebpartsEnd users configure the tab on a page just like any other SharePoint web part
  • Ihre Registerkarte kann auf Ihren Kontext zugreifen, genauso wie Sie es kann, wenn Sie innerhalb von Teams läuftYour tab can access its context just as it can when running inside Teams

Schritt 1: Testen der Beispiel-AppStep 1: Testing the sample app

Laden Sie das Beispiel-App-Manifest von hierherunter.Download the sample app manifest from here.

Klicken Sie in Microsoft Teams auf das Store-Symbol unten links und dann auf "benutzerdefinierte App hochladen" unten links.In Microsoft Teams, click on the Store icon at the lower left and then "Upload a custom app" at the lower left. Die Datei, die hochgeladen werden soll, befindet sich im Ordner "Downloads"; Es heißt TalentMgmt-Azure.zip.The file to upload will be located in your Downloads folder; it's called TalentMgmt-Azure.zip. Wenn alles gut geht, sehen Sie den Bildschirm "Installation/Zustimmung" für die Talent Management-APP.If all goes well, you'll see the install/consent screen for the talent management app. Wählen Sie das Team aus, das Sie installieren möchten, und klicken Sie auf die Schaltfläche installieren.Choose the team you want to install to and click the Install button. Sie können jetzt mit der APP experimentieren.You're now free to experiment with the app.

Schritt 2: Verwenden der Registerkarte "Teams" in SharePointStep 2: Using the Teams tab in SharePoint

Laden Sie Ihr Teams-App-Paket in Ihren SharePoint-App-Katalog hoch, indem Sie beispielsweise einen Besuch durchsuchen. https://YOUR_TENANT_NAME.sharepoint.com/sites/apps/AppCatalog/Forms/AllItems.aspx https://contoso.sharepoint.com/sites/apps/AppCatalog/Forms/AllItems.aspxUpload and deploy your Teams app package to your SharePoint App Catalog by visiting https://YOUR_TENANT_NAME.sharepoint.com/sites/apps/AppCatalog/Forms/AllItems.aspx, e.g. https://contoso.sharepoint.com/sites/apps/AppCatalog/Forms/AllItems.aspx.

Wenn Sie dazu aufgefordert werden, aktivieren Sie die Option "Diese Lösung für alle Websites in der Organisation verfügbar machen":When prompted, enable "Make this solution available to all sites in the organization":

Registerkarten in der SharePoint-Ansicht

Erstellen Sie in Ihrer Website eine neue Seite, indem Sie auf die Schaltfläche Gear oben rechts und dann auf "Seite hinzufügen" klicken:In your site, create a new page by clicking in the gear button at the upper right and then "Add a page":

SharePoint-Ansicht

Die Erstellungsumgebung für SharePoint-Seiten wird angezeigt.You'll see the SharePoint Pages authoring experience. Nennen Sie Ihre Seite "meine Teams-Registerkarte".Name your page "My Teams Tab".

Öffnen Sie die Webpart-Toolbox durch Drücken der +-Schaltfläche, und wählen Sie Ihre Teams-Registerkarte ("Contoso HR" genannt) aus.Open the web part toolbox by pressing the + button, and select your Teams Tab (named "Contoso HR"). Webparts werden alphabetisch sortiert; Wenn es sich um eine lange Liste handelt, können Sie die Suchleiste verwenden, um Sie zu finden.Web parts are sorted alphabetically; if it's a long list, you can use the search bar to find it. Dadurch wird ein Webpart im Canvas-Bereich erstellt, der die Registerkarte Teams enthält:This will create a web part in the canvas that contains your Teams tab:

Registerkartenansicht

Drücken Sie die Schaltfläche "veröffentlichen", wenn Sie die Bearbeitung abgeschlossen haben.Press the "Publish" button when you are finished editing.

Möglicherweise möchten Sie auf "Seite zur Navigation hinzufügen" klicken, um in der linken Navigationsleiste eine Kurzübersicht zu Ihrer Seite zu haben:You may want to click "Add page to navigation" to have a quick reference to your page in the left navigation bar:

Registerkarte in SharePoint-Bild

Schritt 3: Durchsuchen von App-Seiten in SharePointStep 3: Explore App Pages in SharePoint

Nachdem Sie Ihre Seite veröffentlicht haben, können Sie Ihre Teams-app in eine umfassendere Erfahrung in SharePoint umwandeln.Once your page is published, you can explore turning your Teams app into a more complete experience inside SharePoint. Dadurch wird die aktuelle Seite in eine APP-Seite umgewandelt, die das normale SharePoint-Seitenlayout mit einer ganzseitigen Oberfläche für die Registerkarte "Teams" zeigt:This converts the current page into an App Page, showing the normal SharePoint page layout with a full-page experience for the Teams tab:

Bild von Registerkarten in SharePoint

Weitere InformationenMore information