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

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/the-secret-way-to-view-word-excel-powerpoint-files-in-power-apps/. Author: Matthew Devaney.

The Secret Way To View Word, Excel & PowerPoint Files In Power Apps Posted by - Matthew Devaney on - January 16, 2022 61 Comments

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 App Setup The SharePoint Document Library

Create A List Of Word, Excel and PowerPoint Files

Display Word, Excel and PowerPoint Icons Add The PDF Viewer Control To The App

Convert Word, Excel and PowerPoint Files Into A PDF

How 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' Code language: JavaScript ( javascript )

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 Code language: HTTP ( http )

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 Code language: CSS ( css ) ThisItem .Modified Code language: CSS ( css )

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" ) Code language: JavaScript ( javascript ) 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" ) Code language: JavaScript ( javascript )

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 Code language: CSS ( css )

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 Code language: JavaScript ( javascript )

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 Code language: JavaScript ( javascript ) That’s how the magic works! Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up 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. Document Library Excel PDF Viewer control PowerPoint Word Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps