Integrate & display files in custom app

%3CLINGO-SUB%20id%3D%22lingo-sub-1841581%22%20slang%3D%22en-US%22%3EIntegrate%20%26amp%3B%20display%20files%20in%20custom%20app%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1841581%22%20slang%3D%22en-US%22%3E%3CP%3EWhat%20is%20the%20best%20way%20to%20integrate%20files%20within%20Teams%20in%20a%20custom%20app%3F%20Is%20there%20a%20framework%2Fwidget%20for%3A%3C%2FP%3E%3COL%3E%3CLI%3ESelecting%20a%20file%20within%20Team%3C%2FLI%3E%3CLI%3EDisplay%20a%20file%20within%20your%20App%20(e.g.%20PPT%2C%20PDF%2C%20Excel%2C%20Word)%3C%2FLI%3E%3CLI%3EControlling%20the%20current%20slide%2Fpage%2C%20if%20you%20want%20all%20users%20to%20see%20the%20same%20thing%3F%3C%2FLI%3E%3C%2FOL%3E%3CP%3EThanks%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1841581%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EMicrosoft%20Teams%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1844136%22%20slang%3D%22en-US%22%3ERe%3A%20Integrate%20%26amp%3B%20display%20files%20in%20custom%20app%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1844136%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F742026%22%20target%3D%22_blank%22%3E%40e_morling%3C%2FA%3E%26nbsp%3B-%20Yes%20you%20can%20display%20the%20file%20with%20in%20the%20teams.%20You%20can%20provide%20the%20file%20url%20to%20the%20tab%20and%20open%20the%20file%20with%20in%20the%20tab%20Or%20to%20the%20adaptive%20card%20button%2C%20but%20you%20need%20to%20encode%20the%20file%20url%20please%20check%20the%20below%20code%20to%20encode%20the%20URL.%3C%2FP%3E%0A%3CPRE%3E%3CSPAN%3Enew%20AdaptiveOpenUrlAction()%20%7B%E2%80%8B%E2%80%8B%20Title%20%3D%20actionText%2C%20Url%20%3D%20new%20Uri(GetFileViewerURL(%22Your%20File%20URL%20here%22%2C%20%22pptx%22))%20%7D%E2%80%8B%E2%80%8B%3B%0Aprivate%20string%20GetFileViewerURL(string%20actionData_URL%2C%20string%20prefix)%0A%20%20%20%20%20%20%20%20%7B%E2%80%8B%E2%80%8B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%24%22%3CA%20tabindex%3D%22-1%22%20title%3D%22https%3A%2F%2Fteams.microsoft.com%2F_%23%2F%257bprefix%257d%2Fviewer%2Fteams%2F%2522%22%20href%3D%22https%3A%2F%2Fteams.microsoft.com%2F_%23%2F%257Bprefix%257D%2Fviewer%2Fteams%2F%2522%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%20aria-disabled%3D%22false%22%3Ehttps%3A%2F%2Fteams.microsoft.com%2F_%23%2F%7B%E2%80%8B%E2%80%8Bprefix%7D%E2%80%8B%E2%80%8B%2Fviewer%2Fteams%2F%22%3C%2FA%3E%20%2B%20actionData_URL%3F.Replace(%22%2F%22%2C%20%22~2F%22)%3B%0A%20%20%20%20%20%20%20%20%7D%E2%80%8B%E2%80%8B%3C%2FSPAN%3E%3C%2FPRE%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1852716%22%20slang%3D%22en-US%22%3ERe%3A%20Integrate%20%26amp%3B%20display%20files%20in%20custom%20app%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1852716%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F742026%22%20target%3D%22_blank%22%3E%40e_morling%3C%2FA%3E%26nbsp%3B-%20Currently%20we%20don't%20have%20example%20in%20javascript%3C%2FP%3E%3C%2FLINGO-BODY%3E
Occasional Contributor

What is the best way to integrate files within Teams in a custom app? Is there a framework/widget for:

  1. Selecting a file within Team
  2. Display a file within your App (e.g. PPT, PDF, Excel, Word)
  3. Controlling the current slide/page, if you want all users to see the same thing?

Thanks

5 Replies

@e_morling - Yes you can display the file with in the teams. You can provide the file url to the tab and open the file with in the tab Or to the adaptive card button, but you need to encode the file url please check the below code to encode the URL.

new AdaptiveOpenUrlAction() {​​ Title = actionText, Url = new Uri(GetFileViewerURL("Your File URL here", "pptx")) }​​;
private string GetFileViewerURL(string actionData_URL, string prefix)
        {​​
            return $"https://teams.microsoft.com/_#/{​​prefix}​​/viewer/teams/" + actionData_URL?.Replace("/", "~2F");
        }​​

@Nikitha-MSFT Thank you, do you have an example with Javascript?

@e_morling - Currently we don't have example in javascript

@Nikitha-MSFT But it is possible to do in Javascript? With the example you provided in Java, is the file "on top" of the application? So that once the user closes the file the app is still open behind it? 

@e_morling - The code which I provided for the file not application. When you close it will close the file not application. It is by design.