Créer une application de portail intranet Teams à partir d’un site ou d’une page SharePoint OnlineCreate a Teams 'Intranet Portal app' from a SharePoint Online site or page

Suivez les étapes décrites dans cet article pour créer une application autonome et statique à l’intérieur de Teams qui crée un lien vers le site intranet de votre organisation.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.

Une application personnelle Teams de votre site intranet SharePoint est créée et apparaît sous forme d’onglet dans Teams.A Teams Personal App of your SharePoint intranet site is created, and will appear as a tab inside of Teams. Cet onglet peut contenir des informations importantes pour les utilisateurs de tous les membres de votre Teams.This tab can contain information important to all your Teams users. Il s’agit d’un moyen rapide et commode pour les utilisateurs de Teams d'accéder aux mises à jour en un seul clic.It is a quick and convenient way for Teams users to access updates just a tab click away.

N’oubliez pas que le processus présenté doit utiliser un site ou page Moderne SharePoint.Be aware that the process shown must use a modern SharePoint site or page to work. Ce processus n’est pas disponible pour les sites ou pages classiques.This process is not available for classical sites or pages.

Important

Assurez-vous que le chargement latéral des applications Teams est activé pour votre locataire.Make certain that side-loading of Teams apps is enabled for your tenant. Selon l’endroit où vous vous trouvez dans le processus de migration du portail d’administration Teams, vous devrez peut-être l’activer soit sous Teams > Administrateur, soit sous Paramètres > Administration > Services et compléments > Microsoft Teams > Applications > Applications externes, dans la version précédente du portail.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!

Utilisez l’application Studio pour créer votre application SharePoint Online autonomeUse App Studio to create your standalone SharePoint Online app

Avant de commencer :Before you begin:

  1. Vous devez connaître l'URL d'un site ou d'une page de communication ou d'équipe moderne SharePoint Online.You'll need to know the URL of a SharePoint Online modern Communication or Team site, or page.

    • Les chemins d’accès de ces sites sont toujours /teams/ ou /sites/.These sites will always have either /teams/ or /sites/ in their paths.
  2. Vous devez connaître le sous-domaine de votre client, lequel sera utilisé dans l’espace réservé {{subdomain}}.You'll need to know your tenant's subdomain, which will be used in the placeholder {{subdomain}}.

  3. Cet article utilise l’espace réservé {{siteUrl}} pour l’URL du site ou de la page que vous avez choisi.This article will use {{siteUrl}} as a placeholder for the URL of the site or page you chose.

  4. De plus, {{sitePath}} sera utilisé pour indiquer le chemin d’accès de l’URL (par exemple : /teams/Contoso).Also, {{sitePath}} will be used to denote the path of the URL (ex: /teams/Contoso).

    • Exemples de chemins d’accès : /teams/Contoso ou /sites/ContosoExample paths: /teams/Contoso or /sites/Contoso

Commencez par suivre les étapes ci-dessous :Begin by following the steps below:

  1. Accédez au Store Teams.Go to the Teams Store.

  2. Installez ou ouvrez App Studio.Install or open App Studio.

  3. Cliquez sur Ouvrir, en regard de l’option App.Click Open, next to the App option.

  4. Avec App studio ouvert, cliquez sur Éditeur de manifeste.With App Studio open, click on Manifest Editor.

  5. Créer une nouvelle application.Create a new app.

  6. Renseignez tous les Détails de l’application.Fill in all App Details.

  7. Cliquez sur Onglets sous Fonctionnalités.Click on Tabs under Capabilities.

  8. Cliquez sur Ajouter sous l’onglet Personnel.Click Add under Personal Tab.

  9. Entrez le Nom puis sélectionnez une nouvelle ID d’entité unique.Fill in the Name and choose a new unique Entity ID.

  10. Renseignez lescontentURL et URL du site web.Fill in the contentURL and Website URL.

  1. Accédez à la page Domaines et autorisations.Navigate to Domains and Permissions. Assurez-vous que la section domaines valides contient votre nom de domaine SharePoint Online.Make sure the valid domains section contains your SharePoint online domain name.

    Exemple: contoso.sharepoint.comExample: contoso.sharepoint.com

  2. Ajoutez les propriétés Authentification unique de l’application web suivante :Add the following web app single sign-on properties:

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

    Authentification unique de l’application web avec ID et URL.

  3. Enregistrez ces propriétés, puis accédez à Tester et distribuer.Save these properties and then navigate to Test and distribute.

  4. Installez l’application pour tester l’application personnellement.Install the app to test the application personally.

Important

Si vous n'utilisez pas Teams App Studio, vous devrez compresser le fichier manifest.JSON que vous venez de créer, accédez à l’App Store dans Teams, puis cliquez sur le lien télécharger l’application personnalisée (en bas à droite de l’App Store).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). L’application est alors disponible.This will make the app available to you.

  1. L’application est désormais disponible sous la forme d’un onglet statique que vous pouvez charger et afficher dans Teams.Now the app is available as a static tab for you to load and view in Teams.

Tester et afficher votre nouvel onglet statiqueTest and view your new static tab

Pour afficher l’onglet nouveau sur le bureau Teams, accédez aux points de suspension (...) sur le côté gauche de la barre de l’application.To view the new tab on the Teams desktop, navigate to the ellipses () in the left-hand side of your app bar. Trouvez votre nouvelle application, chargez-la et testez-la dans Teams.Find your new app, load it, and test your standalone application in Teams.

Si vous souhaitez que la nouvelle application soit disponible dans le menu de gauche à une position supérieure, vous devez utiliser un paramètre de stratégie d’application.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. Ce paramètre se trouve dans la section administrateur Teams > stratégie d’application > Ajouter une application épinglée.This setting can be found under the Team admin section > app policy > add a pinned application. Lorsque vous attribuez la politique à un utilisateur pour le test, le changement apparaîtra quelques heures plus tard.When you assign the policy to a user for testing, the change will appear a few hours later. À cet esprit, n’hésitez pas à choisir l’emplacement dans lequel l’application doit apparaître à votre guise pour éviter les retards.With this in mind, please decide where the app should appear at your earliest convenience to help avoid delays.

Pour afficher et tester la nouvelle application sur un appareil mobile, ouvrez le tiroir de l’application en appuyant sur le chevron (^) au-dessus de la barre d’onglets située en bas de l’écran.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. Recherchez votre application et accédez-y sur votre appareil mobile.Find your app and navigate to it on your mobile device.

Attention

La prise en charge des appareils mobiles est actuellement disponible dans Aperçu pour les développeurs.Mobile support is currently in Developer Preview. Pour activer l’Aperçu pour les développeurs, accédez à Paramètres > À propos, puis activez le mode Aperçu pour les développeurs.To enable Developer Preview, navigate to Settings > About and then enable Developer Preview mode.

Exemple de fichier Manifest.JSONA Sample Manifest.JSON file

Le fichier JSON que vous avez généré ressemble à celui ci-dessous.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"

    }

}