How to open a file in the Custom spfx teams tab in MS teams

%3CLINGO-SUB%20id%3D%22lingo-sub-1774603%22%20slang%3D%22en-US%22%3EHow%20to%20open%20a%20file%20in%20the%20Custom%20spfx%20teams%20tab%20in%20MS%20teams%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1774603%22%20slang%3D%22en-US%22%3E%3CP%3EI%20have%20created%20the%20custom%20teams%20Tab%20using%20spfx%20to%20list%20all%20the%20files%20in%20my%20own%20desing%20in%20the%20MS%20teams.In%20that%20while%20clicking%20the%20file%20i%20need%20to%20open%20a%20file%20as%20same%20as%20we%20open%20the%20file%20in%20%22%3CSTRONG%3EFiles%22%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FSTRONG%3Etab.I%20tried%20setting%20the%20top%20url%20for%20the%20page%20%2C%20also%20many%20other%20work%20around%20but%20no%20luck.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eso%20can%20anyone%20suggest%20me%20how%20to%20open%20the%20file%20from%20the%20custom%20SPFX%20MS%20Teams%20tab%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1774603%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EAdministrator%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EDevices%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EFiles%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EMicrosoft%20Teams%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1786898%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20open%20a%20file%20in%20the%20Custom%20spfx%20teams%20tab%20in%20MS%20teams%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1786898%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F809127%22%20target%3D%22_blank%22%3E%40Admin1925%3C%2FA%3E%26nbsp%3B-%20To%20open%20the%20sharepoint%20url%20with%20in%20the%20teams%20you%20need%20to%20encode%20the%20URL.%3CBR%20%2F%3ECould%20you%20please%20change%20URL%20using%20below%20code%3C%2FP%3E%0A%3CDIV%3E%0A%3CPRE%3E%3CSPAN%20class%3D%22cm-line%22%3Eprivate%20string%20GetFileViewerURL(string%20actionData_URL%2C%20string%20prefix)%0A%3C%2FSPAN%3E%3CSPAN%20class%3D%22cm-line%22%3E%20%20%20%20%20%20%20%20%7B%0A%3C%2FSPAN%3E%3CSPAN%20class%3D%22cm-line%22%3E%20%20%20%20%20%20%20%20%20%20%20%20return%20%24%22https%3A%2F%2Fteams.microsoft.com%2F_%23%2F%7Bprefix%7D%2Fviewer%2Fteams%2F%22%20%2B%20actionData_URL%3F.Replace(%22%2F%22%2C%20%22~2F%22)%3B%0A%3C%2FSPAN%3E%3CSPAN%20class%3D%22cm-line%22%3E%20%20%20%20%20%20%20%20%7D%3C%2FSPAN%3E%3C%2FPRE%3E%0A%3C%2FDIV%3E%3C%2FLINGO-BODY%3E
New Contributor

I have created the custom teams Tab using spfx to list all the files in my own desing in the MS teams.In that while clicking the file i need to open a file as same as we open the file in "Files" tab.I tried setting the top url for the page , also many other work around but no luck.

 

so can anyone suggest me how to open the file from the custom SPFX MS Teams tab?

1 Reply

@Admin1925 - To open the sharepoint url with in the teams you need to encode the URL.
Could you please change URL using below code

private string GetFileViewerURL(string actionData_URL, string prefix)
        {
            return $"https://teams.microsoft.com/_#/{prefix}/viewer/teams/" + actionData_URL?.Replace("/", "~2F");
        }