Impossible d'ajouter une application à Teams

L’objectif était de créer une application SPFx qui fonctionnerait dans SharePoint en tant que WebPart ainsi que dans Teams en tant qu’onglet Teams. Je me suis donc mis au travail, j’ai ouvert mon invite de commande et lancé Yeoman avec le générateur @microsoft/sharepoint. Pour être complet, j’ai utilisé la dernière version SPFx disponible à ce moment-là, qui était la 1.16.

Une fois la solution configurée avec le code par défaut, le HTML et le CSS, j’ai immédiatement créé le package sans rien modifier, j’ai juste vérifié que “TeamsTab” figurait bien parmi les supportedHosts dans le manifeste du WebPart.

Le package a été créé et prêt à être téléchargé dans le catalogue d’applications SharePoint. Lors du téléchargement, je me suis assuré que le WebPart était ajouté à tous les sites afin de pouvoir l’ajouter également à Teams.

Jusqu’ici tout allait bien, il ne me restait plus qu’à ajouter l’application en tant qu’onglet. À ma grande surprise, j’ai obtenu le message d’erreur “This app cannot be found.” Je ne comprenais pas vraiment au début, mais lorsque j’ai examiné le problème de plus près via la console des outils de développement, j’ai vu le message d’erreur “Cannot read properties of undefined (reading ‘validDomains’)”.

ValidDomains est un paramètre dans le fichier manifeste utilisé pour ajouter l’application au catalogue d’applications Teams. Ce qui s’est mal passé ici, c’est que lorsque vous appuyez sur le bouton “Add to Teams” dans le catalogue d’applications SharePoint, ce fichier manifeste pour le catalogue d’applications Teams est créé dynamiquement et apparemment quelque chose peut mal se passer dans ce processus.

Vous avez maintenant 2 options :

  • Soit vous supprimez l’application du catalogue d’applications Teams et vous essayez d’ajouter l’application à nouveau dans Teams depuis le catalogue d’applications SharePoint en espérant que le processus se déroule correctement.

  • Soit vous prenez les choses en main et fournissez un fichier manifeste valide.

{
    "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.8/MicrosoftTeams.schema.json",
    "manifestVersion": "1.8",
    "packageName": "[packageName]",
    "id": "[id]",
    "version": "2.0",
    "developer": {
        "name": "John Doe",
        "websiteUrl": "https://www.contoso.com",
        "privacyUrl": "https://www.example.com/termofuse",
        "termsOfUseUrl": "https://www.example.com/privacy"
    },
    "name": {
      "short": "[name]"
    },
    "description": {
      "short": "[descriptionShort]",
      "full": "[descriptionFull]"
    },
    "icons": {
      "outline": "[id]_outline.png",
      "color": "[id]_color.png"
    },
    "accentColor": "#004578",
    "configurableTabs": [
      {
        "configurationUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26componentId={{SPFX_COMPONENT_ID}}",
        "canUpdateConfiguration": false,
        "scopes": [
          "team",
          "groupchat"
        ],
        "context": [
          "channelTab",
          "privateChatTab",
          "meetingSidePanel",
          "meetingDetailsTab",
          "meetingChatTab"
        ]
      }
    ],
    "validDomains": [
      "*.login.microsoftonline.com",
      "*.sharepoint.com",
      "resourceseng.blob.core.windows.net"
    ],
    "webApplicationInfo": {
      "resource": "https://{teamSiteDomain}",
      "id": "00000003-0000-0ff1-ce00-000000000000"
    }
  }

Une explication du fichier manifeste :

  • remplacez [id] par le paramètre id de votre fichier manifeste de WebPart

  • remplacez [packageName] par le nom de votre package

  • remplacez [name] par le nom de votre application

  • Pour le paramètre description, donnez une valeur claire pour short et full

  • Entrez les valeurs du développeur comme vous le souhaitez.

Placez ce fichier manifeste dans le dossier teams de votre solution. Mettez les fichiers du dossier teams dans un zip et donnez à ce zip le nom exact “TeamsSPFxApp.zip”.

Maintenant, lorsque vous compilez et packagez la solution, vous verrez qu’en changeant le fichier sppkg en un fichier zip, TeamsSPFxApp.zip est inclus dans le dossier ClientSideAssets de votre fichier zip.

Vous pouvez ensuite télécharger à nouveau votre fichier sppkg dans le catalogue d’applications SharePoint et lorsque vous appuyez sur “Add to Teams”, le fichier manifeste sous-jacent pour Teams ne sera pas généré dynamiquement si le fichier zip TeamsSPFxApp est trouvé.

Contenu associé