Erstellen einer Intranet-Portal-App für Teams von einer SharePoint Online-Website oder -Seite ausCreate a Teams 'Intranet Portal app' from a SharePoint Online site or page

Führen Sie die in diesem Artikel aufgeführten Schritte aus, um eine eigenständige und statische App innerhalb von Teams zu erstellen, die mit der Intranet-Seite Ihrer Organisation verknüpft ist.Use the steps in this article to create a standalone and static app inside of Teams that links to the intranet site for your org.

Eine Persönliche Teams-App Ihrer SharePoint-Intranet-Website wird erstellt und als Registerkarte innerhalb von Teams angezeigt.A Teams Personal App of your SharePoint intranet site is created, and will appear as a tab inside of Teams. Diese Registerkarte enthält Informationen, die für alle Teammitglieder wichtig sind.This tab can contain information important to all your Teams users. Es ist eine schnelle und bequeme Möglichkeit für die Benutzer von Teams, auf Updates zuzugreifen, die nur einen Tab-Klick entfernt sind.It is a quick and convenient way for Teams users to access updates just a tab click away.

Beachten Sie, dass für den gezeigten Vorgang eine moderne SharePoint-Website oder -Seite verwendet werden muss.Be aware that the process shown must use a modern SharePoint site or page to work. Diese Vorgehensweise ist für klassische Websites oder Seiten nicht verfügbar.This process is not available for classical sites or pages.

Wichtig

Stellen Sie sicher, dass Side-Loading von Teams-Apps für Ihren Mandanten aktiviert ist.Make certain that side-loading of Teams apps is enabled for your tenant. Je nachdem, wo Sie sich im Migrationsprozess des Teams-Administratorportals befinden, müssen Sie dies möglicherweise entweder unter Teams > Administrator oder unter Administrator > Einstellungen > Dienste und Add-Ins > Microsoft Teams > Apps > Externe Apps in der vorherigen Version des Portals aktivieren!Depending on where you are in the migration process of the Teams Admin portal, you might need to enable it either under Teams > Admin, or under Admin > Settings > Services and Add-ins > Microsoft Teams > Apps > External Apps, in the previous version of the portal!

Verwenden von App Studio zum Erstellen einer eigenständigen SharePoint Online-AppUse App Studio to create your standalone SharePoint Online app

Bevor Sie beginnen:Before you begin:

  1. Sie müssen die URL einer modernen SharePoint Online-Kommunikations- oder-Team-Website oder-Seite kennen.You'll need to know the URL of a SharePoint Online modern Communication or Team site, or page.

    • Diese Websites verfügen immer über /teams/ oder /sites/ in ihren Pfaden.These sites will always have either /teams/ or /sites/ in their paths.
  2. Sie müssen die Unterdomäne Ihres Mandanten kennen, die im Platzhalter {{subdomain}} verwendet wird.You'll need to know your tenant's subdomain, which will be used in the placeholder {{subdomain}}.

  3. In diesem Artikel wird {{siteUrl}} als Platzhalter für die URL der ausgewählten Website oder Seite verwendet.This article will use {{siteUrl}} as a placeholder for the URL of the site or page you chose.

  4. Außerdem wird {{sitePath}} dazu verwendet, den Pfad der URL (beispielsweise: /teams/contoso) zu kennzeichnen.Also, {{sitePath}} will be used to denote the path of the URL (ex: /teams/Contoso).

    • Beispielpfade: /teams/Contoso oder /sites/ContosoExample paths: /teams/Contoso or /sites/Contoso

Beginnen Sie mit den folgenden Schritten:Begin by following the steps below:

  1. Wechseln Sie zum Teams-Store.Go to the Teams Store.

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

  3. Klicken Sie neben der App-Option auf Öffnen.Click Open, next to the App option.

  4. Klicken Sie bei geöffnetem App Studio auf Manifest-Editor.With App Studio open, click on Manifest Editor.

  5. Erstellen Sie eine neue App.Create a new app.

  6. Füllen Sie alle App-Details aus.Fill in all App Details.

  7. Klicken Sie auf Registerkarten unter Funktionen.Click on Tabs under Capabilities.

  8. Klicken Sie unter persönliche Registerkarte auf Hinzufügen.Click Add under Personal Tab.

  9. Füllen Sie den Namen aus, und wählen Sie eine neue eindeutige Entitäts-ID aus.Fill in the Name and choose a new unique Entity ID.

  10. Füllen Sie die contentURL und Website-URL aus.Fill in the contentURL and Website URL.

  1. Navigieren Sie zu Domänen und Berechtigungen.Navigate to Domains and Permissions. Stellen Sie sicher, dass der Abschnitt gültige Domänen Ihren SharePoint Online-Domänennamen enthält.Make sure the valid domains section contains your SharePoint online domain name.

    Beispiel: contoso.sharepoint.comExample: contoso.sharepoint.com

  2. Fügen Sie die folgenden Web App-Eigenschaften für Einmaliges Anmelden (Single Sign-on, SSO) hinzu:Add the following web app single sign-on properties:

    Beispiel: AAD application ID: 00000003-0000-0ff1-ce00-000000000000 Resource Url: {{subdomain}}.sharepoint.comExample: AAD application ID: 00000003-0000-0ff1-ce00-000000000000 Resource Url: {{subdomain}}.sharepoint.com

    Web App-Single Sign-On, mit ID und URL.

  3. Speichern Sie diese Eigenschaften und navigieren Sie dann zu Testen und Verteilen.Save these properties and then navigate to Test and distribute.

  4. Installieren Sie die App, um die Anwendung persönlich zu testen.Install the app to test the application personally.

Wichtig

Wenn Sie nicht mit Teams App Studio arbeiten, müssen Sie die soeben erstellte manifest.JSON-Datei als .zip komprimieren, zum App Store in Teams navigieren und auf den Link benutzerdefinierte App hochladen (unten rechts im App Store) klicken.If you aren't using Teams App Studio, you will have to .zip the manifest.JSON file you just created, navigate to the App Store in Teams, and click upload custom app link (at the bottom right of the App Store). Dadurch wird die App für Sie verfügbar.This will make the app available to you.

  1. Die App ist nun als statische Registerkarte verfügbar, die Sie laden und in Teams anzeigen können.Now the app is available as a static tab for you to load and view in Teams.

Testen und Betrachten Sie Ihre statische RegisterkarteTest and view your new static tab

Um die neue Registerkarte im Team-Desktop anzuzeigen, navigieren Sie auf der linken Seite der App-Leiste zu den Auslassungszeichen (...).To view the new tab on the Teams desktop, navigate to the ellipses () in the left-hand side of your app bar. Suchen Sie Ihre neue App, laden Sie sie herunter und testen Sie Ihre eigenständige Anwendung in Teams.Find your new app, load it, and test your standalone application in Teams.

Wenn Sie die neue App im linken Menü an einer höheren Position verfügbar machen möchten, müssen Sie dafür eine App-Richtlinieneinstellung verwenden.If you want to make the new app available in the left menu at a higher position, you must use an app policy setting for this. Diese Einstellung finden Sie im Abschnitt Team Administrator > App-Richtlinie > Hinzufügen einer angehefteten Anwendung.This setting can be found under the Team admin section > app policy > add a pinned application. Wenn Sie einem Benutzer die Richtlinie zum Test zuweisen, wird die Änderung wenige Stunden später angezeigt.When you assign the policy to a user for testing, the change will appear a few hours later. In diesem Sinne sollten Sie frühzeitig entscheiden, wo die App angezeigt werden soll, um Verzögerungen zu vermeiden.With this in mind, please decide where the app should appear at your earliest convenience to help avoid delays.

Wenn Sie die neue App auf einem mobilen Gerät anzeigen und testen möchten, öffnen Sie die App-Schublade, indem Sie auf das Chevron (^) oberhalb der Registerkartenleiste am unteren Rand des Bildschirms tippen.To view and test the new app on a mobile device, open the app drawer by tapping on the chevron (^) above the tab bar near the bottom of your screen. Suchen Sie Ihre App, und navigieren Sie auf Ihrem mobilen Gerät zu ihr.Find your app and navigate to it on your mobile device.

Achtung

Die Unterstützung für Mobilgeräte befindet sich derzeit im Developer Preview.Mobile support is currently in Developer Preview. Um Developer Preview zu aktivieren, navigieren Sie zu Einstellungen > Info, und aktivieren Sie dann den Developer Preview-Modus.To enable Developer Preview, navigate to Settings > About and then enable Developer Preview mode.

Eine Manifest.JSON-BeispieldateiA Sample Manifest.JSON file

Die von Ihnen generierte JSON-Datei sieht in etwa so wie die nachfolgende aus.The JSON file you generate will look something like the one below.

{

    "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.5/MicrosoftTeams.schema.json",

    "manifestVersion": "1.5",

    "version": "1.0.0",

    "id": "33ebded3-931c-4333-b0c5-b51dd8738873",

    "packageName": "com.contoso.teams.devapp",

    "developer": {

        "name": "Contoso", ''

        "websiteUrl": "https://www.contoso.com",

        "privacyUrl": "https://www.contoso.com/privacy",

        "termsOfUseUrl": "https://www.contoso.com/terms"

    },

    "icons": {

        "color": "color.png",

        "outline": "outline.png"

    },

    "name": {

        "short": "Contoso Intranet", '

        "full": "Intranet Portal for Contoso"

    },

    "des    ription": {

        "short": "Intranet portal for Contoso",

        "full": "This app is to demonstrate the capabilities of hosting a SharePoint communication and team site as a standalone app in Teams"

    },

    "accentColor": "#FFFFFF",

    "staticTabs": [

        {

                     "       nti        Id":       "com    unicat    onSi    eTab",

            "name": "Contoso Net",

            "contentUrl": "https://contoso.sharepoint.com/sites/ContosoNet/_layouts/15/teamslogon.aspx?SPFX=true&dest=/sites/ContosoNet/",

            "websiteUrl": "https://contoso.sharepoint.com/sites/ContosoNet",

            "scopes": [

                "personal"

            ]

        },

        {

            "entityId": "teamSiteTab",

            "name": "Team Contoso",

            "contentUrl": "https://contoso.sharepoint.com/teams/TeamContoso/_layouts/15/teamslogon.aspx?SPFX=true&dest=/teams/TeamContoso/",

            "websiteUrl": "https://contoso.sharepoint.com/teams/TeamContoso",

            "scopes": [

                "personal"

            ]

        }

    ],

    "permissions": [

        "identity",

        "messageTeamMembers"

    ],

    "validDomains": [

        "contoso.sharepoint.com"

    ],

    "webApplicationInfo": {

        "id": "00000003-0000-0ff1-ce00-000000000000",

        "resource": "https://contoso.sharepoint.com"

    }

}