Easiest Way to View Word, Excel & PowerPoint Files in Power Apps PDF Control

In my current Power Apps project, I need the user to be able to view attached files within the app itself. I can view PDF files but can’t see Word documents, Excel, and PowerPoint files in the app.

When I tried to open files except for PDFs, it gave me a message like “Couldn’t open PDF file. Open in my browser instead.” It did not even if I tried to open it in the browser. I researched this and got the easiest and most achievable way to display all the Word and Excel files using Power Apps PDF viewer.

In this article, I will explain how to view Word, Excel & PowerPoint files in Power Apps PDF control using a simple scenario.

View Word Excel PowerPoint Files in Power Apps PDF Control

The gif below shows that some documents (Word, Excel, PowerPoint) come from a SharePoint Document Library. When a user clicks on a particular file, it opens through a PDF viewer control below. You do not need to navigate to any other screen or browser to open it.

Follow the instructions below to achieve it:

1. I have a SharePoint Document library named Project Documents. You can upload files such as Excel, Word, PowerPoint, and image files.

2. In Power Apps, add a Label for the title and provide its Text property to any header name:

Text = "PROJECT DOCUMENTS"

3. Insert a Horizontal gallery [+ Insert -> Horizontal gallery] (you can take any gallery). Once the gallery is added, drag it to the right side and resize it like below.

4. Add the SharePoint library to the gallery. Select it and set its Datasource and Items property as:

DataSource = Project Documents
Items = 'Project Documents'

5. Next, select the image from the gallery and set its Image property as:

Image = ThisItem.Thumbnail.Large

The above code will give you the image thumbnail of a particular file.

6. Similarly, to display the file name (with extension) in the gallery, select the Title label and set its Text property as:

Text = ThisItem.'File name with extension'

If you want to display only the file name without the extension, then write the code below:

Text = ThisItem.Name

Now, after designing, the gallery will look like the image below.

7. Suppose you want to view the specific file icon instead of the thumbnail image, then apply the SVG code below on the gallery image’s Image property:

Image = If(
    EndsWith(ThisItem.'File name with extension', "doc"),            // For Word 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%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",
    
    EndsWith(ThisItem.'File name with extension', "xls"),              // For Excel 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%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",
    
    EndsWith(ThisItem.'File name with extension', "pptx"),             // For PowerPoint 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%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",
    
    "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"                                              
             // For Other file type icon,
)

In the above code, I have applied only three file icons, i.e., Word document, Excel, and PowerPoint. Also, provide the correct file extension; otherwise, you won’t get the proper file icon.

For example, if it’s a Word document (from the SharePoint library), you must give the extension “doc.” If it’s a PowerPoint presentation, provide the extension “pptx,” and so on.

Once you preview the app, you can see the file icons display like this. Since I didn’t provide any code for the PNG file (image), it got me another file type icon (provided in the code itself).

8. Next, insert a PDF viewer (experimental) control and set its Document property to the formula below:

Document = Substitute(
    Gallery1.Selected.Thumbnail.Large,
    "/thumbnail",
    "/pdf"
)

Where,

Gallery1 = Provide the name of the gallery control

9. It’s done now. Save, publish, and preview the app. Once you select any of the files from the gallery, it’ll open in the PDF viewer, as in the screenshot below.

I hope you now know how to easily display Word documents, Excel files, and PowerPoint files in the Power Apps PDF viewer.

Also, you may like some more Power Apps articles:

• Disable Power Apps Permissions PopUp Consent Form
• Patch Gallery Items in Power Apps
• Download a File from Power Apps
• Power Apps Modern Form Control
• Power Apps Calendar Function
• Change the Owner Of A Power Apps App