Kan app niet toevoegen aan Teams

De bedoeling was om een SPFx-app te maken die zowel in SharePoint als WebPart als in Teams als Teamstab zou werken. Dus ik ging aan de slag, opende mijn opdrachtprompt en startte Yeoman op met de @microsoft/sharepoint generator. Voor de volledigheid: voor dit project gebruikte ik de nieuwste SPFx-versie op dat moment, namelijk 1.16.

Zodra de oplossing was opgezet met de standaardcode, html en css-styling, maakte ik meteen het pakket aan zonder iets te wijzigen. Het enige wat ik deed, was controleren of “TeamsTab” inderdaad aanwezig was bij de supportedHosts in het web part manifest.

Het pakket was aangemaakt en klaar om te uploaden naar de SharePoint-appcatalogus. Bij het uploaden zorgde ik ervoor dat het web part aan alle sites werd toegevoegd zodat ik het web part ook aan Teams kon toevoegen.

Tot zover goed, nu hoefde ik alleen nog de app als tabblad toe te voegen. Tot mijn grote verbazing kreeg ik de foutmelding “Deze app kan niet worden gevonden.” Ik begreep het aanvankelijk niet helemaal, maar toen ik het probleem nader bekeek via de developer tools-console, zag ik de foutmelding “Cannot read properties of undefined (reading ‘validDomains’)”.

ValidDomains is een parameter in het manifestbestand dat wordt gebruikt om de app toe te voegen aan de Teams-appcatalogus. En wat hier fout ging, was dat wanneer je op de knop “Toevoegen aan Teams” klikt in de SharePoint-appcatalogus, dit manifestbestand voor de Teams-appcatalogus dynamisch wordt aangemaakt en er blijkbaar iets mis kan gaan in dit proces.

Nu heb je 2 opties:

  • Of je verwijdert de app uit de Teams-appcatalogus en probeert de app opnieuw vanuit de SharePoint-appcatalogus aan Teams toe te voegen in de hoop dat het proces correct verloopt.

  • Of je neemt de zaken zelf in handen en levert een geldig manifestbestand.

{
    "$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"
    }
  }

Een woordje uitleg over het manifestbestand:

  • vervang [id] door de id-parameter van je webpart-manifestbestand

  • vervang [packageName] door de naam van je pakket

  • Vervang [name] door de naam van je app

  • Geef voor de beschrijvingsparameter een duidelijke waarde op voor short & full

  • Vul de waarden van de developer naar wens in.

Je plaatst dit manifestbestand in de teams-map van je oplossing. Zet de bestanden in de teams-map in een zip en geef deze zip de exacte naam “TeamsSPFxApp.zip”.

Nu wanneer je de oplossing bouwt en pakt, zul je zien dat wanneer je het sppkg-bestand naar een zip-bestand omzet, TeamsSPFxApp.zip is opgenomen in de ClientSideAssets-map van je zip-bestand.

Je kunt dan je sppkg-bestand opnieuw uploaden naar de SharePoint-appcatalogus en wanneer je op “Toevoegen aan Teams” drukt, wordt het onderliggende manifestbestand voor Teams niet dynamisch gegenereerd wanneer het zip-bestand TeamsSPFxApp wordt gevonden.

Gerelateerde inhoud