Ian Matthysen
Ian Matthysen

Reputation: 21

Microsoft Teams: Making web parts built with App Studio for MS Teams available in Sharepoint

I'm in the process of converting several existing web parts (built in Visual Studio using the SharePoint Add-In project template) to work in Microsoft Teams. In a nutshell, there are 2 directions to accomplish this:

  1. Using SharePoint Framework (SPFx), NodeJS, Typescript, visual Studio Code and Yeoman generator, OR
  2. Visual Studio, HTML, Javascript, AppStudio for Microsoft Teams and NGROK (for testing).

Following option (1) solves this whole issue completely, because it only involve these steps to make the app part available in both SharePoint AND Teams:

  1. Ensure that the supportedHosts config setting in <WebPart>.manifest.json has the "TeamsPersonalApp" and "TeamsTab" options included.
  2. Execute gulp bundle --ship in Command Prompt.
  3. Execute gulp package-solution --ship in Command Prompt.
  4. Drag-and-drop the resulting package onto the Sharepoint App Catalog and wait for the upload to complete.
  5. Click on the "Sync to Teams" menu item.

However, option (1) does not work for me, because the web part uses DevExtreme controls that is built in JavaScript, and the DevExpress development/support teams are not familiar with using their controls in a web part that is being built in SPFx. In addition, the web part uses API calls to retrieve data.

So, I completed the development of one of the web parts using option (2). These are the resources I referenced to do the development:

As it stands, it works very nicely. However, this web part must be available in Sharepoint as well. The problem is that the schema of the manifest.json files of options (1) and (2) differs, so Sharepoint will not allow the .zip file that is generated with option 2 to be uploaded.

I came across this page, but there are many broken links on the page and it doesn't really answer the question: https://techcommunity.microsoft.com/t5/microsoft-teams/is-it-possible-to-create-a-teams-webpart-and-display-it-on/m-p/110476.

If anyone could provide help with this (additional links, insights, etc), I'd really appreciate it!

Upvotes: 0

Views: 88

Answers (0)

Related Questions