View SharePoint Documents Files In Power Apps

By
Last updated:

View SharePoint Documents Files In Power Apps

View All types of file in PowerApps

View SharePoint Documents Files In Power Apps

You can view SharePoint Library documents in Power Apps, including Excel, PDF, Word, and PowerPoint files, using the PDF viewer. Although the PDF viewer does not support this functionality by default, you can enable it with a single line of code. This allows the PDF viewer to display DOCX, XLSX, and PPTX files. The implementation is straightforward if you know the process.

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 in Power Apps

In this App you can view all your Documents

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
View SharePoint Documents Files In Power Apps

Create Power Apps, And Add Below things in that

Select Gallery, Choose data source View SharePoint Documents Files In Power Apps

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

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.

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"
)

Create Power Automate Flow in PowerApps and provide name GetfileContent

Step 1 add

Step 2

Step 3

@{datauri(base64ToBinary(outputs('Get_file_content_using_path')?['body']?['$content']))
}

Save Flow

On Gallery On Select Property Add Below Formula

If(
    Lower(
        Last(
            Split(
                Gallery2.Selected.'File name with extension',
                "."
            )
        ).Value
    ) = "pdf",
    Set(
        fileconent,
        GetfileContent.Run(Gallery2.Selected.'Full Path').output
    )
)

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.

  If(Lower( Last( Split( Gallery2.Selected.'File name with extension',".")).Value)="pdf",fileconent,
     Substitute(
    Gallery2.Selected.Thumbnail.Small,
    "/thumbnail",
    "/pdf"
))

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

✨ Thanks for reading! ✨

I hope you found this blog on the Microsoft Power Platform helpful! From Power Apps, Power Automate (Cloud & Desktop), Canvas Apps, Model-driven Apps, Power BI, Power Pages, SharePoint, Dynamics 365 (D365), Azure, and more, I cover a wide range of topics to help you harness these powerful tools. Don’t miss out on future tips, tutorials, and insights—hit that subscribe button to get the latest posts right to your inbox. 💌💬 I’d love to hear your thoughts! Drop a comment below with your questions, ideas, or feedback—let’s get the conversation started!🔗 Let’s connect and grow together!


Follow me, Ravindra Jadhav, on your favorite platforms for even more content and updates on Microsoft Power Platform and related technologies:

💼 LinkedIn – Let’s network and share ideas!

💻 GitHub – Explore my projects and code.

🐦 Twitter – Stay updated with quick tips and industry news.

📺 YouTube – Watch tutorials and deep dives on Power PlatformPower AppsPower Automate, and more! Let’s build something amazing together with Power Platform and Azure! 🚀 

Leave a Comment