In this article, we will create PowerApps document viewer app to learn how PowerApps view documents from the SharePoint document library.

We will learn,

• The PowerApps PowerPoint viewer
• The PowerApps pdf viewer
• The PowerApps word document viewer
• The PowerApps Excel viewer

PowerApps document viewer

In this app, we will work with a SharePoint document library that will contain documents of PowerPoint, pdf, word, and excel types, when the user selects a file from a list it opens to show the full document on the right-side of the app.

Prepaire Sharepoint document library

1. Create SharePoint document library

2. Upload samples of the diffrent document types that we will use in the Power Apps Document Viewer App.

Create the PowerApps Document Viewer Canvas App

1. From the make site , create a Canvas app with tablet formate and name it PowerApps documents viewer app.
2. Add the SharePoint Document Library that we create to the app as a datasource.
   1. from the view menu
   2. Add data
   3. search for Sharepoint connector
   4. Add a connection
   5. Type the URL of your SharePoint Site
   6. Choose the document viewer list
   7. Insert a gallery and assign the sharepoint document viewer as a data source

8. Insert Alabel and Image in the gallery
9. set the lable text property to show the file name and its extension

ThisItem.'File name with extension'

9. In the Image property of the gallery you can set the image accourding to the document type
   • You can use the Free PowerApps Icons to set the images of the doument
   • search for the document type and get the power apps Code as shown below

9. so in our case the formula for the image property in the gallery will be as shown bellow,

If(

    
// pdf icon
    EndsWith(ThisItem.'File name with extension', "pdf"),
    "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%27M1920%201664h-128v384H128v-384H0V640h128V0h1243l421%20421v219h128v1024zM1408%20384h165l-165-165v165zM256%20640h1408V512h-384V128H256v512zm1408%201024H256v256h1408v-256zm128-896H128v768h1664V768zM448%20896q40%200%2075%2015t61%2041%2041%2061%2015%2075q0%2040-15%2075t-41%2061-61%2041-75%2015h-64v128H256V896h192zm0%20256q26%200%2045-19t19-45q0-26-19-45t-45-19h-64v128h64zm448-256q53%200%2099%2020t82%2055%2055%2081%2020%20100q0%2053-20%2099t-55%2082-81%2055-100%2020H768V896h128zm0%20384q27%200%2050-10t40-27%2028-41%2010-50q0-27-10-50t-27-40-41-28-50-10v256zm384-384h320v128h-192v128h192v128h-192v128h-128V896z%27%20fill%3D%27%23a4262c%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E",
    // 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"
)

Actually we will use The Power Apps PDF viewer to display also a Word, Excel or PowerPoint document in Power Apps canvas app.

10. In the right side of the app insert the PDF viewer
    1. from the Media menu
    2. select PDF viewer

To use PowerApps pdf viewer to view the other document type , we have convert the docx, xlsx or pptx files to a pdf first

Now we will know how PowerApps view any document like Excel, Word, PowerPoint,etc

Not for PDF we will add another code for PDF files

Convert Documents to pdf in Power Apps

All we have to do is a single line code that we will apply on the document property of the pdf viewer that we inserted in our PowerApps canvas app.

• So in Document property type this formula that shown below.

When we select the thumbnail of a Word, Excel or PowerPoint file from the gallery ,It returns the web address for the SharePoint API, which will provide an image. This API converts a docx file into a thumbnail image as shown bellow.

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

PowerApps pdf viewer

Usage

Show text, graphics, and other content in a PDF file by adding this type of control and setting its Document property to the URL, enclosed in double quotation marks, of the file that you want to show.

Limitations

The PDF Viewer must only handle HTTPS links, not HTTP, due to the security architecture of Power Apps.

The Document attribute must point to the PDF file directly. Server redirection and HTML document views are not supported.

The document’s hosting server should not require authentication.

If a PDF document is stored on a server with restrictive cross-origin resource sharing (CORS) settings, you may not be able to read it in your app. To fix the problem, the PDF document server must allow cross-origin requests from powerapps.com.

How to view PDF in PowerApps?

You can view Power apps PDF using flow but here I will show you how PowerApps view PDF from SharePoint without flow

All we have to do for our previous formula is to update the formula and check if the file is pdf then pass the full URL for the pdf file to the PowerApps pdf viewer

If( EndsWith(Gallery1.Selected.'File name with extension', "pdf"),
Gallery1.Selected.'Link to item',
Substitute(
    Gallery1.Selected.Thumbnail.Large,
    "/thumbnail",
    "/pdf"
))

Gallery1.Selected.’Link to item‘ will get the full URL for the pdf file in the SharePoint including HTTPS.

some times you can able to view the Pdf file in the app but you can show the pdf file in the browser instead.

Conclusion

We can use the PDF viewer in PowerApps to show PDF, Word, Excel, PowerPoint, or any type of document.

See Also

• What are Microsoft Power Apps?
• PowerApps Print Function, Forms, And Scrollable Galleries
• PowerApps Validation Examples On/before Submitting
• Share PowerApps With External Users / Guest Users
• Sign Up and use Power Apps
• PowerApps Canvas App Vs Model-driven App Vs Portal App.
• What Is Microsoft Dataverse?
• How to share Power Apps to Office 365 group
• Connectors in a Power Apps.
• Share Power Apps to external users (guest users)
• How To Create A PowerApps Custom Connector?
• How To Create Power Apps DataFlows?
• Learn Power Apps – youtube channel.