Einbetten moderner SharePoint-Seiten in Microsoft Teams als persönliche Apps (Vorschau)Embedding modern SharePoint pages in Microsoft Teams as personal apps (preview)

Gilt für: Microsoft 365Applies to: Microsoft 365

Sie können das Modell für persönliche Apps in Microsoft Teams verwenden, um eine beliebige moderne SharePoint-Seite an die linke Navigationsleiste von Microsoft Teams anzuheften.You can use the Microsoft Teams personal app model to pin any modern SharePoint page to the left navigation of Microsoft Teams. Dies ist ideal, um Intranet-Zielseiten für die unternehmensinterne Kommunikation direkt über Microsoft Teams zugänglich zu machen.This provides a great opportunity to expose intranet landing pages to serve corporate communication needs, directly accessible by Microsoft Teams users. Beispielszenarien können Folgendes umfassen:Example scenarios could include:

  • Hinzufügen Ihrer Unternehmensintranet-Zielseite zu Microsoft Teams zum einfachen Auffinden von Neuigkeiten und InhaltenAdding your corporate intranet landing page to Teams for easy discovery of news and content
  • Hinzufügen der Lernpfade-Lösung zu Microsoft Teams zum Einbetten von Microsoft 365-Lernpfaden für Ihre BenutzerAdd the Learning Pathways solution to Teams to embed Microsoft 365 learning paths for your users
  • Hinzufügen von Einzelseiten-Mitteilungen zu wichtigen Themen für Ihr UnternehmenAdd single page communications on important topics for your company

Führen Sie die in diesem Artikel beschriebenen Schritte aus, um eine beliebige moderne SharePoint-Seite oder -Website in Microsoft Teams einzubetten.Use the steps defined in this article to embed any modern SharePoint page or site in Teams.

In Microsoft Teams eingebettetes SharePoint-Portal



Sie können eine beliebige moderne SharePoint-Seite in Microsoft Teams einbetten, indem Sie eine persönliche App für Microsoft Teams erstellen und die für diese benutzerdefinierte Einrichtung erforderliche Konfiguration manuell vornehmen.You can embed any modern SharePoint page in Microsoft Teams by creating a Teams personal app and manually creating the needed configuration for this custom setup. Beachten Sie dabei die folgenden Überlegungen:Be aware of the following considerations:

  • Diese Funktion wird als VORSCHAU-INTEGRATIONSPFAD bereitgestellt, bis eine systemeigene Lösung verfügbar sein wird.This capability is provided as a PREVIEW INTEGRATION PATH until a native solution becomes available.
  • Das Ziel muss eine moderne SharePoint-Website oder -Seite sein.The target must be a modern SharePoint site or page. Die Einbettung klassischer Veröffentlichungsportale oder anderer klassischer Websites oder Seiten wird nicht unterstützt und funktioniert nicht.Embedding classic publishing portals or other classic sites or pages is not supported and will not work.
  • Ein Benutzer kann über den APPS-Link in Microsoft Teams eine persönliche App hinzufügen.A user can add a personal app from the APPS link in Teams. Ein Benutzer kann eine App an die App-Leiste anheften (die Navigation ganz links in Microsoft Teams), indem er mit der rechten Maustaste darauf klickt und dann "Anheften" auswählt.A user can pin an app to the app bar (the left-most navigation in Teams) by right-clicking it and choosing PIN.
  • Administratoren können eine App über das Microsoft Teams Admin Center für alle oder für bestimmte Benutzer bereitstellen und anheften.Administrators can deploy and pin an app to all or targeted users from the Microsoft Teams admin center.
  • Die Benutzererfahrung weist einige Lücken auf, darunter die folgenden, an deren Behebung wir für eine zukünftige, integrierte Lösung aktiv arbeiten:There are some gaps in user experience including the following, which we are actively looking to address in a future, integrated solution:
    • Auf eingebetteten Seiten sind keine systemeigenen Navigationen, Kopf- oder Fußzeilen vorhanden.There is no native navigation, header, or footer on embedded pages.
    • Bei in Microsoft Teams initiierten Suchvorgängen werden Suchergebnisse aus Microsoft Teams und nicht von der eingebetteten Website zurückgegeben.Search initiated from Teams will return search results from Teams, not search results from the embedded site.
    • In Microsoft Teams können keine Inhalte (Nachrichten, Seiten, Listen oder Bibliotheken) erstellt werden.You cannot create content (news, pages, lists, or libraries) in Teams. Inhalte müssen von der SharePoint-Website mit einem Webbrowser oder der mobilen SharePoint-App erstellt werden.You must create content from the SharePoint site using a web browser or SharePoint mobile app.
    • Das Feature für Seitenkommentare ist auf den SharePoint-Seiten nicht verfügbar, wenn sie in Microsoft Teams bereitgestellt werden.Page comment feature is not available from the SharePoint pages, when they are exposed in Microsoft Teams
  • Alle Benutzer müssen mindestens über die Berechtigung zum Lesen verfügen, um auf die SharePoint-Seite zugreifen zu können.All users accessing the embedded SharePoint page will need to have at least read permission to access the page.
  • Wenn der Name oder die URL eines Mandanten, einer SharePoint-Website oder -Seite geändert wird, muss das Manifest für persönliche Apps in Microsoft Teams aktualisiert werden.If a tenant, SharePoint site or page name or URL is changed, the Teams personal app manifest will need to be updated.
  • Wenn am Anheftungsmodell für moderne SP-Seiten oder -Websites Änderungen vorgenommen werden, kann es sein, dass Sie vorhandene angeheftete persönliche Apps löschen und dann erneut bereitstellen müssen.If changes are made to the pinning model for modern SP pages or sites, it could require you to delete existing pinned personal apps and redeploy them.

Wichtig

Diese Option wird als Vorschau-Integrationspfad bereitgestellt.This option is provided as a preview integration path. Microsoft behält sich das Recht vor, Änderungen am Modell vorzunehmen, die möglicherweise die Löschung bestehender angehefteter Apps und deren erneute Bereitstellung durch eine aktualisierte Lösung erfordern.Microsoft reserves the right to make changes to the model, which could require you to delete existing pinned apps and re-deploy them with an updated solution. Änderungen am Integrationspfad erfordern keine Löschung oder erneute Erstellung der SharePoint-Zielwebsite oder -seite.Changes to the integration path will not require you to delete or recreate the targeted SharePoint site or page.

Einbetten von modernen SharePoint-Websites und -Seiten in Microsoft Teams mit App StudioEmbed SharePoint modern sites & pages into Microsoft Teams with App Studio

In den nachstehend beschriebenen Schritten werden die folgenden Tags verwendet, die basierend auf der modernen SharePoint-Seite oder -Website, die Sie in Microsoft Teams einbetten möchten, angepasst werden sollten:We will be using following tags in the steps below, which you should update based on the modern SharePoint page or site that you want to embed in Teams:

  • [domainUrl]: Stamm-URL der Domäne[domainUrl] – Root URL of the domain
  • [PageUrl]: Die Seite, die auf der Registerkarte relativ zur Stammebene des Mandanten angezeigt werden sollte[pageUrl] – Page, which should be shown in the tab relative to the root of the tenant
    • Beispiel: /sites/theperspective/SitePages/Home.aspxExample - /sites/theperspective/SitePages/Home.aspx

Tipp

Wenn Sie ein Beispiel zum Demonstrieren dieser Integration erstellen möchten, können Sie den https://lookbook.microsoft.com-Diensts verwenden, um Beispiel-Apps und -Seiten in Ihrem Mandanten zu erstellen.If you want to create a sample to demonstrate this integration, you can use the https://lookbook.microsoft.com service to create sample apps and pages in your tenant.

Sie müssen App Studio oder einen anderen Editor verwenden, um die Microsoft Teams-Manifestdatei mit den erforderlichen URLs zu Ihren SharePoint-Seiten zu erstellen.You will need to use App Studio or another editor to create the Teams manifest file with the necessary URLs to your SharePoint pages. Führen Sie die nachstehenden Schritte in App Studio aus.Complete the following steps in App Studio.

  1. Öffnen Sie Microsoft Teams.Open Microsoft Teams.

  2. Navigieren Sie zum Microsoft Teams-Store, indem Sie in der App-Leiste in Microsoft Teams auf "Apps" klicken (linke Navigation).Navigate to Teams store by clicking Apps on the Teams app bar (left navigation).

    Menü "Apps" in Microsoft Teams

  3. Verwenden Sie die Suchfunktion, um nach App Studio zu suchen.Use search to find App Studio.

    Menü "Apps" in Microsoft Teams

  4. Installieren oder öffnen Sie App Studio.Install or open App Studio.

    Menü "Apps" in Microsoft Teams

  5. Öffnen Sie App Studio.Open App Studio.

  6. Navigieren Sie zur Registerkarte "Manifest-Editor".Navigate to the Manifest editor tab.

  7. Klicken Sie auf "Neue App erstellen".Click Create a new app.

  8. Stellen Sie die erforderlichen App-Informationen im folgenden Format bereit:Provide required app information on the form:

    1. Kurzname: Firmen-Intranet [verwenden Sie etwas Aussagekräftiges, das zu Ihrem Szenario passt]Short name – Company Intranet [use something descriptive that supports your scenario]
    2. Vollständiger Name: Contoso-IntranetFull name – Contoso Intranet
    3. Klicken Sie auf Generieren, um eine eindeutige zufällige App-ID zu erstellen.Click Generate to create a unique, random App ID
    4. Paketname: com.contoso.portal.app – verwenden Sie einen Wert, der für Ihre Umgebung eindeutig ist.Package Name – com.contoso.portal.app – Use a value that is unique to your environment
    5. Version: 1.0.0Version – 1.0.0
    6. Beschreibung: Meine erste Intranet-AnwendungDescription – My first intranet application
    7. Vollständige Beschreibung: Meine tolle Intranet-Anwendung zum Einbetten von modernen SharePoint-Seiten in Microsoft Teams.Full description – My awesome intranet application to embed modern SharePoint in Teams
    8. Informationen zum Entwickler – Name: Ihr NameDeveloper Information - Name – Your name
    9. Informationen zum Entwickler – Website: Ihre Website – Unternehmenswebsite oder was Sie vorziehen.Developer Information - Website – Your web site – company web site or whatever is your preference
    10. Partnerinformationen: Leer lassenPartner information – Leave empty
    11. App-URLs: Dies können Seiten in Ihrem Portal sein, für dieses Lernprogramm kann der Wert aber auch nach dem Zufallsprinzip ausgewählt werden.App URLs – These could be pages in your portal, but you can randomize the value for this tutorial
    12. Nutzungsbedingungen: Hierbei könnte es sich auch um eine Seite in Ihrem Portal handeln, für dieses Lernprogramm verwenden wir aber einen Zufallswert.Terms of use – Could be also a page in your portal, but let us use random value in this tutorial
    13. Branding: Dies wäre in der App-Leiste (linke Navigation) und auf der Benutzeroberfläche der App-Installation sichtbar.Branding – These would be visible on the app bar (left navigation) and in the app installation user interface. Sie können dies für das Lernprogramm unverändert beibehalten, aber es wird dringend empfohlen, die Elemente für Ihre Produktionskonfiguration anzupassen.You can leave them as they are for the tutorial, but we absolutely recommend updating them for your production configuration
      1. Branding-Anleitungen zu den Einstellungen für Bild und Gliederung finden Sie in der offiziellen Dokumentation zu Microsoft Teams.See branding guidance for the image and outline settings in the Microsoft Teams official documentation
  9. Navigieren Sie zu "Registerkarten" unter "Funktionen".Navigate to Tabs under Capabilities

    Menü "Apps" in Microsoft Teams

  10. Klicken Sie auf Hinzufügen unter Persönliche Registerkarte hinzufügen.Click Add under the Add a personal tab

  11. Geben Sie die Informationen zur Persönlichen Registerkarte basierend auf Ihrer Einrichtung ein.Fill in the Personal tab details based on your own setup

    1. Name: IntranetName – Intranet
    2. Entity ID: 19991 (Zufallszahl verwenden)Entity ID – 19991 (Use random number)
    3. Content URL: https://[domainUrl]/_layouts/15/teamslogon.aspx?SPFX=true&dest=[pageUrl]Content URL – https://[domainUrl]/_layouts/15/teamslogon.aspx?SPFX=true&dest=[pageUrl]
      1. Aktualisieren Sie die URL anhand Ihrer eigenen Mandanteninformationen.Update the URL based on your own tenant details. Eine Beispiel-URL wäre: https://contoso.sharepoint.com/_layouts/15/teamslogon.aspx?SPFX=true&dest=/sites/theperspective/SitePages/Home.aspxExample URL would be https://contoso.sharepoint.com/_layouts/15/teamslogon.aspx?SPFX=true&dest=/sites/theperspective/SitePages/Home.aspx
      2. Die URL muss codiert werden, um Probleme beim Zugriff über verschiedene Geräte zu vermeiden.The URL will need to be encoded to avoid issues accessing it across different devices.
    4. Website-URL: Sie können diesen optionalen Wert leer lassen.Website URL – You can leave this optional value empty
  12. Navigieren Sie zu Domänen und Berechtigungen unter Fertig stellen.Navigate to Domains and Permissions under Finish

    Menü "Apps" in Microsoft Teams

  13. Stellen Sie sicher, dass unter Domänen von Ihren Registerkarten Ihre Domäne aufscheint.Make sure that Domains from your tabs have your domain on it

    1. Beispiel für einen Domänenwert: contoso.sharepoint.comExample domain value contoso.sharepoint.com
  14. Aktualisieren Sie AAD App ID zu "00000003-0000-0ff1-ce00-000000000000".Update AAD App ID as 00000003-0000-0ff1-ce00-000000000000

  15. Schließen Sie Ihre Domänen-URL in den Wert für einmaliges Anmelden (Single-Sign-On) ein.Include your domain URL to the Single-Sign-On value

    1. Beispielwert: https://contoso.sharepoint.comExample value https://contoso.sharepoint.com

    Menü "Apps" in Microsoft Teams

  16. Navigieren Sie zu Testen und Verteilen unter Fertig stellen.Navigate to Test and distribute under Finish

    Menü "Apps" in Microsoft Teams

  17. Installieren Sie die Lösung für Ihre Nutzung, indem Sie auf Installieren klicken.Install the solution to your usage by clicking Install

    1. Auf diese Weise können Sie die Konfiguration testen und das Lösungssetup überprüfen.This will enable you to test the configuration and validate the solution setup

    Menü "Apps" in Microsoft Teams

  18. Klicken Sie auf Hinzufügen, um die Anwendung in App Studio für Ihre persönliche Nutzung zu installieren.Click Add to install the application to your personal usage from the App Studio

    Menü "Apps" in Microsoft Teams

  19. Überprüfen Sie, ob die Anwendung sowohl im Internet als auch auf dem Desktop wie gewünscht funktioniert.Verify that the application is working based on your objectives in both web and desktop.

    Menü "Apps" in Microsoft Teams

Sie können die Einstellungen ändern, indem Sie zu App Studio zurückkehren und das Manifest mithilfe des Manifest-Editors bearbeiten.Notice that you can modify the settings by going back to App Studio and editing the manifest using the Manifest editor.

Sie können die App für alle oder nur für bestimmte Benutzer bereitstellen, indem Sie das Manifest aus App Studio herunterladen und im App-Katalog in der Microsoft Teams-Verwaltung veröffentlichen.You can deploy the app to all users or to targeted users by downloading the manifest from the App Studio and publishing it to the app catalog in Teams administration.

Wichtig

Um diese Lösung für Benutzer in Ihrem Mandanten bereitstellen zu können, müssen Sie über ausreichende Berechtigungen verfügen, um Apps im Microsoft Teams-App-Katalog bereitzustellen.To deploy this solution to users in your tenant, you must have sufficient permissions to deploy apps in the Microsoft Teams app catalog.

Beispielmanifest für die LösungSample manifest of the solution

Wenn Sie die Lösungsdatei aus App Studio herunterladen und sich die detaillierte Konfiguration der Manifestdatei ansehen, werden Sie feststellen, dass sie die folgende Konfiguration aufweist, um ein ordnungsgemäßes Funktionieren im Web- und im Desktop-Modus zu ermöglichen.If you download the solution file from the App Studio and see the detailed configuration of the manifest file, it has the following configuration to enable it to work properly in web and in desktop modes.

{
    "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.6/MicrosoftTeams.schema.json",
    "manifestVersion": "1.6",
    "version": "1.0.0",
    "showLoadingIndicator": false,
    "id": "7ad6f150-cba8-4c39-81ce-c4da8e4100d9",
    "packageName": "com.contoso.portal.app",
    "developer": {
        "name": "Portal App",
        "websiteUrl": "https://www.contoso.com",
        "privacyUrl": "https://www.contoso.com/privacy",
        "termsOfUseUrl": "https://www.contoso.com/temsofuse"
    },
    "icons": {
        "color": "color.png",
        "outline": "outline.png"
    },
    "name": {
        "short": "Portal App",
        "full": "Our modern portal"
    },
    "description": {
        "short": "My first portal application",
        "full": "My awesome portal application to embed modern SharePoint to our Teams setup"
    },
    "accentColor": "#FFFFFF",
    "staticTabs": [
        {
            "entityId": "19991",
            "name": "Portal",
            "contentUrl": "https://contoso.sharepoint.com/_layouts/15/teamslogon.aspx?SPFX=true&dest=/sites/theperspective/SitePages/Home.aspx",
            "scopes": [
                "personal"
            ]
        }
    ],
    "permissions": [
        "identity",
        "messageTeamMembers"
    ],
    "validDomains": [
        "m365pnp.sharepoint.com"
    ],
    "webApplicationInfo": {
        "id": "00000003-0000-0ff1-ce00-000000000000",
        "resource": "https://contoso.sharepoint.com"
    }
}

Steuern der App-Sichtbarkeit in Microsoft TeamsControlling app visibility in Microsoft Teams

Mithilfe der Richtlinien für die App-Einrichtung für Microsoft Teams im Microsoft Teams Admin Center können Sie die App auch so veröffentlichen, dass sie für alle Mitarbeiter in Ihrem Mandanten standardmäßig angezeigt wird.You can also publish the app to be visible by default for all employees in your tenant by using the Teams app setup policies in the Microsoft Teams admin center. Dadurch können Sie steuern, welche Apps für welche Benutzer sichtbar sind.This provides you options to control which apps are visible to which users. HINWEIS: App-Richtlinien gelten nicht für Gäste des Mandanten.NOTE: App policies do not apply to Guests of the tenant.

Microsoft Teams App-Richtlinien in der Microsoft Teams-Administratorbenutzeroberfläche

Weitere Informationen zu diesen Optionen finden Sie in der folgenden Microsoft Teams-Dokumentation:See more information on these options from the following Microsoft Teams documentation.

Weitere Informationen:See also