The Secret Way To View Word, Excel & PowerPoint Files In Power Apps

The Secret Way To View Word, Excel & PowerPoint Files In Power Apps


Power Apps has a secret Word, Excel and PowerPoint document viewer hiding in plain sight. It’s actually the PDF viewer. No, the PDF viewer can’t do this by default. But with one-line of code you can use Power Apps PDF viewer to show docx, xlsx, and pptx files instead of pdf files. It is very easy to implement. You just have to know how to do it.

Table Of Contents:
• Introduction: Document Viewer AppSetup The SharePoint Document LibraryCreate A List Of Word, Excel and PowerPoint FilesDisplay Word, Excel and PowerPoint IconsAdd The PDF Viewer Control To The AppConvert Word, Excel and PowerPoint Files Into A PDFHow Does The Word, Excel & PowerPoint to PDF Conversion Work?




Introduction: Document Viewer App

Employees at an animal hospital user the Document Viewer app to look at Word (docx), Excel (xlsx) and PowerPoint files (pptx). When the employee selects a file from a list it opens to show the full document on the right-side of the app.




Setup The SharePoint Document Library

Create a new SharePoint document library called Document Viewer one of each filetype:

  • Word (docx)
  • Excel (xlsx)
  • PowerPoint (pptx)
  • Another filetype not found in the list above





Create A List Of Word, Excel and PowerPoint Files

Open Power App Studio and create a new tablet app from blank. Insert a label at the top of the screen with the text “Document Viewer” to act as titlebar. Then add the Document Viewer SharePoint Document Library to the app as a datasource.



Make a new blank vertical gallery and position it on the left-side of the screen. Choose Document Viewer as the datasource.



This code will appear in the Items property of the gallery.

'Document Viewer'



Next, we will update the style of the gallery.



Use this code in each of these properties in the gallery to achieve the same style as shown in the image above.

Fill: RGBA(237, 237, 237, 1)
TemplateFill: If(ThisItem.IsSelected, ColorFade(LightSkyBlue, 70%), White)
TemplatePadding: 8
TemplateSize: 80



Then create 2 new labels and insert them into the gallery.


Write this code in the Text property of the labels to show the document name and the last modified date.

ThisItem.Name
ThisItem.Modified




Display Word, Excel and PowerPoint Icons

To make a better looking file explorer we will place an icon beside each filename in the list. Insert a new Image into the gallery and place it on the left-side of the row.



Then we will create the icons Word, Excel and PowerPoint icons with some SVG code.



Copy and paste this long code block into the Image property of the Image. The EndsWith function checks the file extension at the end of the filename. Then it uses the SVG code from this free Power Apps Icon Set to draw the icon.

If(

    // Word icon
    EndsWith(ThisItem.'File name with extension', "docx"),

    "data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%202048%202048%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M2048%20475v1445q0%2027-10%2050t-27%2040-41%2028-50%2010H640q-27%200-50-10t-40-27-28-41-10-50v-256H115q-24%200-44-9t-37-25-25-36-9-45V627q0-24%209-44t25-37%2036-25%2045-9h397V128q0-27%2010-50t27-40%2041-28%2050-10h933q26%200%2049%209t42%2028l347%20347q18%2018%2027%2041t10%2050zm-384-256v165h165l-165-165zM320%201424h161q2-8%209-43t18-83%2021-103%2022-101%2016-76%208-31l7%2030q7%2030%2017%2077t23%20100%2023%20103%2019%2084%2010%2043h160l148-672H834l-80%20438-100-438H502l-96%20440-86-440H170l150%20672zm320%20496h1280V512h-256q-27%200-50-10t-40-27-28-41-10-50V128H640v384h397q24%200%2044%209t37%2025%2025%2036%209%2045v922q0%2024-9%2044t-25%2037-36%2025-45%209H640v256zm640-1024V768h512v128h-512zm0%20256v-128h512v128h-512zm0%20256v-128h512v128h-512z%27%20fill%3D%27%230078d4%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E",
    
    // Excel icon
    EndsWith(ThisItem.'File name with extension', "xlsx"),
    "data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%202048%202048%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M2048%20475v1445q0%2027-10%2050t-27%2040-41%2028-50%2010H640q-27%200-50-10t-40-27-28-41-10-50v-256H115q-24%200-44-9t-37-25-25-36-9-45V627q0-24%209-44t25-37%2036-25%2045-9h397V128q0-27%2010-50t27-40%2041-28%2050-10h933q26%200%2049%209t42%2028l347%20347q18%2018%2027%2041t10%2050zm-384-256v165h165l-165-165zM261%201424h189q2-4%2012-23t25-45%2029-55%2029-53%2023-41%2010-17q27%2059%2060%20118t65%20116h187l-209-339%20205-333H707q-31%2057-60%20114t-63%20112q-29-57-57-113t-57-113H279l199%20335-217%20337zm379%20496h1280V512h-256q-27%200-50-10t-40-27-28-41-10-50V128H640v384h397q24%200%2044%209t37%2025%2025%2036%209%2045v922q0%2024-9%2044t-25%2037-36%2025-45%209H640v256zm640-1024V768h512v128h-512zm0%20256v-128h512v128h-512zm0%20256v-128h512v128h-512z%27%20fill%3D%27%230b6a0b%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E",
    
    // PowerPoint icon
    EndsWith(ThisItem.'File name with extension', "pptx"),
    "data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%202048%202048%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M2048%20475v1445q0%2027-10%2050t-27%2040-41%2028-50%2010H640q-27%200-50-10t-40-27-28-41-10-50v-256H115q-24%200-44-9t-37-25-25-36-9-45V627q0-24%209-44t25-37%2036-25%2045-9h397V128q0-27%2010-50t27-40%2041-28%2050-10h933q26%200%2049%209t42%2028l347%20347q18%2018%2027%2041t10%2050zm-384-256v165h165l-165-165zM368%20752v672h150v-226h100q52%200%2097-15t78-46%2053-72%2020-97q0-56-17-97t-50-67-76-39-97-13H368zm1552%201168V512h-256q-27%200-50-10t-40-27-28-41-10-50V128H640v384h397q24%200%2044%209t37%2025%2025%2036%209%2045v922q0%2024-9%2044t-25%2037-36%2025-45%209H640v256h1280zM1536%20640q79%200%20149%2030t122%2082%2083%20123%2030%20149h-384V640zm-128%20128v384h384q0%2080-30%20149t-82%20122-123%2083-149%2030q-33%200-65-6t-63-18V792q31-11%2063-17t65-7zm-804%20300h-86V883h90q47%200%2074%2020t27%2070q0%2052-28%2073t-77%2022z%27%20fill%3D%27%23ca5010%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E",
    
    // Other filetype icon,
    "data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%202048%202048%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M1243%200l549%20549v1499H128V0h1115zm37%20219v293h293l-293-293zM256%201920h1408V640h-512V128H256v1792zm256-896V896h896v128H512zm0%20256v-128h896v128H512zm0%20256v-128h896v128H512z%27%20fill%3D%27%237a7574%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E"
)




Add The PDF Viewer Control To The App

Now that we’ve got a list of PDF files to open the next step is to add a pdf viewer control to the app.



Place the PDF viewer so it fills right-side of the screen. It will display Lorem Ipsum text until we supply a it with a Word, Excel or PowerPoint file.




Convert Word, Excel and PowerPoint Files Into A PDF

We will use the PDF viewer to display a Word, Excel or PowerPoint document instead. To do this we must convert the docx, xlsx or pptx file to a pdf. This task can be accomplished in Power Apps with only one-line of code.



Write this code in the Document property of the PDF viewer.

Substitute(
    gal_Files.Selected.Thumbnail.Large,
    "/thumbnail",
    "/pdf"
)



The Document Viewer app is now completed. The app should work as shown below.




How Does The Word, Excel & PowerPoint to PDF Conversion Work?

When we select the thumbnail of a Word, Excel or PowerPoint file from the gallery like this it does not directly return an image.

gal_Files.Selected.Thumbnail.Large



Instead, it returns the SharePoint API web address that will return an image. This API transforms a docx file into into a thumbnail. Take a look a the code below to see where the words docx and thumbnail appear.

https://canadaeast1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=docx&cs=fFNQTw&docid=https%3a%2f%2fmatthewdevaney.sharepoint.com%3a443%2f_api%2fv2.0%2fdrives%2fb!89APnJ4x-k-YpcmiIGM7DWa2IOP7EHdFgNmlF2w7ov02wz2jjypdQpx3wlFp16fq%2fitems%2f0173OPFMNJ7V2QPX3XZRD3TATVOWZDLI6T%3fversion%3dPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbWF0dGhld2RldmFuZXkuc2hhcmVwb2ludC5jb21AZjFiOGI1MDktNTBhNC00YTVjLThlNDgtYmYzZDNlN2MxMGVkIiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTY0MTI1NDQwMCIsImV4cCI6IjE2NDEyNzYwMDAiLCJlbmRwb2ludHVybCI6InJIaGQ3dXhZaTloblpSZWVYbFNJRlRWNDJpaExucjIxMWN2dk5VbHlWR009IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMjEiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJPV013Wm1Rd1pqTXRNekU1WlMwMFptWmhMVGs0WVRVdFl6bGhNakl3TmpNellqQmsiLCJhcHBfZGlzcGxheW5hbWUiOiJBcHAgU2VydmljZSIsImdpdmVuX25hbWUiOiJNYXR0aGV3IiwiZmFtaWx5X25hbWUiOiJEZXZhbmV5IiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfG1kQG1hdHRoZXdkZXZhbmV5LmNvbSIsIm5paSI6Im1pY3Jvc29mdC5zaGFyZXBvaW50IiwiaXN1c2VyIjoidHJ1ZSIsImNhY2hla2V5IjoiMGguZnxtZW1iZXJzaGlwfDEwMDMyMDAwOGI5M2RhNTBAbGl2ZS5jb20iLCJzaGFyaW5naWQiOiI1NmNiY2I0MS04MTU5LTRjOTMtOGU1ZS1lNzA2YzBkN2E5NTQiLCJ0dCI6IjAiLCJ1c2VQZXJzaXN0ZW50Q29va2llIjpudWxsLCJpcGFkZHIiOiI0MC44NS4yMDYuOTUifQ.Z29OaGh4OXRVZUFwbU8xVXh0OEZaNk9yWG5rQ3F6SVhDaHVNcEt4ZFdFaz0&width=800&height=800



But wait a minute, we need it to return a pdf instead. Using the Substitute function we change the word thumbnail to pdf. Now the API will change the docx into a pdf and we can display it in the PDF Viewer.

https://canadaeast1-mediap.svc.ms/transform/pdf?provider=spo&inputFormat=docx&cs=fFNQTw&docid=https%3a%2f%2fmatthewdevaney.sharepoint.com%3a443%2f_api%2fv2.0%2fdrives%2fb!89APnJ4x-k-YpcmiIGM7DWa2IOP7EHdFgNmlF2w7ov02wz2jjypdQpx3wlFp16fq%2fitems%2f0173OPFMNJ7V2QPX3XZRD3TATVOWZDLI6T%3fversion%3dPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbWF0dGhld2RldmFuZXkuc2hhcmVwb2ludC5jb21AZjFiOGI1MDktNTBhNC00YTVjLThlNDgtYmYzZDNlN2MxMGVkIiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTY0MTI1NDQwMCIsImV4cCI6IjE2NDEyNzYwMDAiLCJlbmRwb2ludHVybCI6InJIaGQ3dXhZaTloblpSZWVYbFNJRlRWNDJpaExucjIxMWN2dk5VbHlWR009IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMjEiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJPV013Wm1Rd1pqTXRNekU1WlMwMFptWmhMVGs0WVRVdFl6bGhNakl3TmpNellqQmsiLCJhcHBfZGlzcGxheW5hbWUiOiJBcHAgU2VydmljZSIsImdpdmVuX25hbWUiOiJNYXR0aGV3IiwiZmFtaWx5X25hbWUiOiJEZXZhbmV5IiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfG1kQG1hdHRoZXdkZXZhbmV5LmNvbSIsIm5paSI6Im1pY3Jvc29mdC5zaGFyZXBvaW50IiwiaXN1c2VyIjoidHJ1ZSIsImNhY2hla2V5IjoiMGguZnxtZW1iZXJzaGlwfDEwMDMyMDAwOGI5M2RhNTBAbGl2ZS5jb20iLCJzaGFyaW5naWQiOiI1NmNiY2I0MS04MTU5LTRjOTMtOGU1ZS1lNzA2YzBkN2E5NTQiLCJ0dCI6IjAiLCJ1c2VQZXJzaXN0ZW50Q29va2llIjpudWxsLCJpcGFkZHIiOiI0MC44NS4yMDYuOTUifQ.Z29OaGh4OXRVZUFwbU8xVXh0OEZaNk9yWG5rQ3F6SVhDaHVNcEt4ZFdFaz0&width=800&height=800



That’s how the magic works!





Questions?

If you have any questions about The Secret Way To View Word, Excel PowerPoint Files In Power Apps please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.

Matthew Devaney

Subscribe
Notify of
guest
25 Comments
Oldest
Newest
Inline Feedbacks
View all comments
ManishM
ManishM
8 months ago

This is a great workaround with SharePoint. I do not use SharePoint. How can we do this using Dataverse?

ManishM
ManishM
8 months ago

Thanks for your response and the link. I could attempt to take what Vivek demoed little further. My fear is, that such workaround is not sustainable for a serious app with multiple personas. I only hope and wish PA team comes up with Office viewer control.

Thank you again. I really enjoy your posts.

aydar sitdikov
aydar sitdikov
8 months ago

Great, thanks! 
Will this work with sharepoint attachments?

Sylwester
Sylwester
8 months ago

Hi Matthew,

I tested this option in December but it doesn’t work 🙁
PDFViwer show only “Couldn’t open PDF file. Open in my browser instead”.
Open in browser also doesn’t work and shows error:

{"error":{
  "code": "notSupported",
  "message": "pdf",
  "innererror": {
    "code": "InputFormatNotSupported"
  }
}}

Example generation link:
https://northeurope1-mediap.svc.ms/transform/pdf?provider=spo&inputFormat=pdf&cs=fFNQTw&docid=https%3a%2f%2feuropasystems.sharepoint.com%3a443%2f_api%2fv2.0%2fdrives%2fb!bdAKQUXUEU2GDQyNmH3VY477j2TAMTlOmV4ZhYSGvtSk-9v4D45KRJ–Civ5HHzT%2fitems%2f01GS25KWRGXMZJZAKIUJAICSHQTQESA2MT%3fversion%3dPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvZXVyb3Bhc3lzdGVtcy5zaGFyZXBvaW50LmNvbUA2NTE1NThlOS0wZWJlLTRmZGEtOTRjZS0xZDRhMWZkZGVhNDAiLCJpc3MiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAiLCJuYmYiOiIxNjQyNDEwMDAwIiwiZXhwIjoiMTY0MjQzMTYwMCIsImVuZHBvaW50dXJsIjoiZEc4bGVWL3loTW9OWmkwaHRuZHZrSzNxcTYzS25aa3RWSEQ1eWdDdVgwQT0iLCJlbmRwb2ludHVybExlbmd0aCI6IjEyMCIsImlzbG9vcGJhY2siOiJUcnVlIiwidmVyIjoiaGFzaGVkcHJvb2Z0b2tlbiIsInNpdGVpZCI6Ik5ERXdZV1F3Tm1RdFpEUTBOUzAwWkRFeExUZzJNR1F0TUdNNFpEazROMlJrTlRZeiIsImFwcF9kaXNwbGF5bmFtZSI6IkFwcCBTZXJ2aWNlIiwiZ2l2ZW5fbmFtZSI6IlN5bHdlc3RlciIsImZhbWlseV9uYW1lIjoiS293YWxza2kiLCJuYW1laWQiOiIwIy5mfG1lbWJlcnNoaXB8c3lsd2VzdGVyLmtvd2Fsc2tpQGV1cm9wYXN5c3RlbXMuY29tIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwM2JmZmQ5YTY4NzVkN0BsaXZlLmNvbSIsInNoYXJpbmdpZCI6ImU5OTUzMjlkLWJlNGQtNDQ5Zi1iZGIxLTE5NzM2ZmE5M2EyMSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOm51bGwsImlwYWRkciI6IjUyLjE3NC4xODAuMTYwIn0.OEFOOUF6WlB6VE5VRFBBV3YwNmxBRzdxb2J0ejBNTmVTbTVJS2ZZeTQxMD0&width=800&height=800

You can help?

2022-01-17_12h09_31.png
Sylwester
Sylwester
8 months ago

Yes, I am trying to open a PDF.
I saw your technique also used for PDF (https://youtu.be/vqK29FWbLxU) so I tried 🙂
Thanks for information about article.
I’m looking forward 🙂

Sylwester
Sylwester
7 months ago

Hi Matthew,

Hhen can the article about pdf be expected? 🙂

Evan
Evan
5 months ago

Hi Matthew,

Thanks for this great tutorial! I’m a amateur in PowerApps, so this was helpful.
I’m aiming to display a library of Excel files in a PowerApp using this technique, but I am receiving the same error as above. Would you be able to take a look at this error code:

{"error":{
  "code": "notSupported",
  "message": "Error from Office Service. Url=https://excelcs.officeapps.live.com/document/export/pdf HttpCode=UnsupportedMediaType cert=subject:;thumbprint: ResponseHeaders=X-ErrorCode: XLSPageLimitExceeded\r\nX-ErrorCategory: NotSupported\r\nX-IsRetriable: False\r\nX-ClientCorrelationId: 6e1f137a-932e-441a-a574-19a5103cee15\r\nX-ServiceCorrelationId: 6e1f137a-932e-441a-a574-19a5103cee15\r\nX-ConversionTimeInMs: 2446.4314\r\nX-FileDownloadTimeInMs: 3562.7914\r\nCache-Control: private\r\nDate: Mon, 11 Apr 2022 19:07:18 GMT\r\nServer: Microsoft-IIS/10.0\r\nX-AspNet-Version: 4.0.30319\r\nX-Powered-By: ASP.NET\r\n",
  "innererror": {
    "code": "invalidFileFormat"
  }
}}

Thank you!

Damian`
Damian`
2 months ago
Reply to  Evan

You probably have an empty (no content) Excel file. Try to edit the file and write anything in it, then use the PDF viewer.
This raises another question for Mat, how can we avoid it. How can we check if a file has no content?

Rob
Rob
8 months ago

Hi Matthew,

Great article and thanks for sharing your knowledge.
Do you know if the transform option can have a policy within an organization?

I have tried to convert a file by replacing thumbnail for pdf in the items url.
This only seem to work for word but not for excel for instance.

I would also like to know if you have tried to host this file explorer in a model driven variant and make use of dynamic values to start browsing the sharepoint folder.

To my knowledge the success of this experience is mostly dependent on how the sharepoint site is structured. You need to have root folder for the most optimum experience, correct?

BR Rob

Pavan
Pavan
7 months ago

Hi Matthew,
Can I know whether there any way to download the excel file in addition to viewing the file from sharepoint document library.

Thanks,
Pavan

Pavan
Pavan
7 months ago

Thanks Matthew for the suggestion the file path is working well in Google Chrome and Mozzilla but when I try downloading in Microsoft Edge it is directly opening the Excel file which is residing in Sharepoint in my Microsoft Excel Desktop Application.

Alex
Alex
4 months ago

Hey Matthew, how would I go about using this but the the folder inside document viewer for instance is dictated by an item selected in gallery?

If I click Alex in gallery for example, it opens document viewer/alex folder?

Damian`
Damian`
3 months ago

Hello this is great. Eny ideas why thumbnails does not refresh even if i manually refresh library from app?

Damian`
Damian`
2 months ago

Ok sorry about that. I have added an “Edit” button to this gallery to allow the user to edit the file. Everything works fine, but it didn’t refresh the thumbnail. I’ve already found an ugly way to fix this by adding the string “a” after making any changes to the document, and it works, but maybe there is another way to do it.

Substitute(
    gall_Att.Selected.Thumbnail.Large,
    "/thumbnail",
    "/pdf"
)&varPDFrefresh

varPDFrefresh is a variable with “a” constantly being added when the file is edited

Aafreen Sultana
Aafreen Sultana
2 months ago

Hi Matthew,

Though my excel is of a single sheet. it comes in 2 pages. How can i fix it ??

Christoph
Christoph
7 days ago

Nice one. Have you tried it with a SharePoint List an attachments as well?
For example, if you have a Power Apps based SharePoint Form and want to display the attachments within the form.

Last edited 7 days ago by Christoph