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

%3CLINGO-SUB%20id%3D%22lingo-sub-1480472%22%20slang%3D%22en-US%22%3EMicrosoft%20Teams%3A%20Making%20web%20parts%20built%20with%20App%20Studio%20for%20MS%20Teams%20available%20in%20SharePoint%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1480472%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20everyone!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESomeone%20posted%20something%20similar%20as%20what%20I'm%20about%20to%20discuss%20in%20this%20post.%20Sadly%2C%20there%20wasn't%20any%20solution%20and%20several%20links%20that%20were%20included%20in%20the%20responses%20are%20broken.%20The%20post%20can%20be%20found%20here%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fmicrosoft-teams%2Fis-it-possible-to-create-a-teams-webpart-and-display-it-on%2Fm-p%2F110476%22%20target%3D%22_blank%22%3Ehttps%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fmicrosoft-teams%2Fis-it-possible-to-create-a-teams-webpart-and-display-it-on%2Fm-p%2F110476.%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ENow%2C%20on%20to%20my%20question%3A%20I'm%20in%20the%20process%20of%20converting%20several%20existing%20web%20parts%20(built%20in%20Visual%20Studio%20using%20the%20SharePoint%20Add-In%20project%20template)%20to%20work%20in%20Microsoft%20Teams.%20In%20a%20nutshell%2C%20there%20are%202%20routes%20I%20could%20follow%20to%20accomplish%20this%3A%3C%2FP%3E%3CP%3E(1)%20Using%20SharePoint%20Framework%20(SPFx)%2C%20NodeJS%2C%20Typescript%2C%20Visual%20Studio%20Code%20and%20Yeoman%20Generator%2C%20OR%3CBR%20%2F%3E(2)%20Visual%20Studio%2C%20HTML%2C%20Microsoft%20Teams%20SDK%2C%20Javascript%2C%20AppStudio%20for%20Microsoft%20Teams%20and%20NGROK%20(for%20testing).%3C%2FP%3E%3CP%3E%3CBR%20%2F%3EFollowing%20option%20(1)%20solves%20this%20whole%20issue%20completely%2C%20because%20it%20only%20involves%20these%20steps%20to%20make%20the%20app%20part%20available%20in%20both%20SharePoint%20AND%20Teams%3A%3C%2FP%3E%3COL%3E%3CLI%3EEnsure%20that%20the%20%3CEM%3EsupportedHosts%3C%2FEM%3E%20config%20setting%20in%20%3CEM%3E%3CWEBPART%3E.manifest.json%3C%2FWEBPART%3E%3C%2FEM%3E%20has%20the%20%22%3CEM%3ETeamsPersonalApp%3C%2FEM%3E%22%20and%20%22%3CEM%3ETeamsTab%3C%2FEM%3E%22%20options%20included.%3C%2FLI%3E%3CLI%3EExecute%20%3CEM%3Egulp%20bundle%20--ship%3C%2FEM%3E%20in%20Command%20Prompt.%3C%2FLI%3E%3CLI%3EExecute%3CEM%3E%20gulp%20package-solution%20--ship%3C%2FEM%3E%20in%20Command%20Prompt.%3C%2FLI%3E%3CLI%3EDrag-and-drop%20the%20resulting%20package%20onto%20the%20Sharepoint%20App%20Catalog%20and%20wait%20for%20the%20upload%20to%20complete.%3C%2FLI%3E%3CLI%3EClick%20on%20the%20%22%3CEM%3ESync%20to%20Teams%3C%2FEM%3E%22%20menu%20item.%3C%2FLI%3E%3C%2FOL%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHowever%2C%20option%20(1)%20does%20not%20work%20for%20me%2C%20because%20the%20web%20part%20uses%20DevExtreme%20controls%20that%20is%20built%20in%20JavaScript%2C%20and%20the%20DevExpress%20development%2Fsupport%20teams%20are%20not%20familiar%20with%20using%20their%20controls%20in%20a%20web%20part%20that%20is%20being%20built%20in%20SPFx%2FTypeScript.%20In%20addition%2C%20the%20web%20part%20uses%20API%20calls%20to%20retrieve%20data.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESo%2C%20I%20completed%20the%20development%20of%20one%20of%20the%20web%20parts%20using%20option%20(2).%20These%20are%20the%20resources%20I%20referenced%20to%20do%20the%20development%3A%3C%2FP%3E%3CUL%3E%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fwww.rickvanrousselt.com%2Fteams-ramp-up-part-3%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fwww.rickvanrousselt.com%2Fteams-ramp-up-part-3%2F%3C%2FA%3E%3C%2FLI%3E%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Ftutorials%2Fget-started-dotnet-app-studio%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Ftutorials%2Fget-started-dotnet-app-studio%3C%2FA%3E.%3C%2FLI%3E%3C%2FUL%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAs%20it%20stands%2C%20it%20works%20very%20nicely.%20However%2C%20this%20web%20part%20must%20be%20available%20in%20Sharepoint%20as%20well.%20The%20problem%20is%20that%20the%20schema%20of%20the%20manifest.json%20files%20of%20options%20(1)%20and%20(2)%20differs%2C%20so%20Sharepoint%20will%20not%20allow%20the%20.zip%20file%20that%20is%20generated%20with%20option%202%20to%20be%20uploaded.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20also%20posted%20about%20this%20exact%20issue%20on%20StackOverflow%20(%3CA%20href%3D%22https%3A%2F%2Fstackoverflow.com%2Fquestions%2F62455352%2Fmicrosoft-teams-making-web-parts-built-with-app-studio-for-ms-teams-available-i%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fstackoverflow.com%2Fquestions%2F62455352%2Fmicrosoft-teams-making-web-parts-built-with-app-studio-for-ms-teams-available-i%3C%2FA%3E)%2C%20but%20I%20didn't%20get%20any%20response%20there%2C%20so%20I'm%20hoping%20to%20get%20some%20answers%20here%20from%20all%20the%20Microsoft%20Teams%20developer%20geniuses!%20%3A)%3C%2Fimg%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIf%20anyone%20could%20provide%20help%20with%20this%20(additional%20links%2C%20insights%2C%20etc)%2C%20I'd%20really%20appreciate%20it!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1480472%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3Econfiguration%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EMicrosoft%20Teams%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Highlighted
Visitor

Hi everyone!

 

Someone posted something similar as what I'm about to discuss in this post. Sadly, there wasn't any solution and several links that were included in the responses are broken. The post can be found here: https://techcommunity.microsoft.com/t5/microsoft-teams/is-it-possible-to-create-a-teams-webpart-and-...

 

Now, on to my question: 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 routes I could follow to accomplish this:

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


Following option (1) solves this whole issue completely, because it only involves 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/TypeScript. 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 also posted about this exact issue on StackOverflow (https://stackoverflow.com/questions/62455352/microsoft-teams-making-web-parts-built-with-app-studio-...), but I didn't get any response there, so I'm hoping to get some answers here from all the Microsoft Teams developer geniuses! :)

 

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

0 Replies