Build a Document Preview App in Power Apps with SharePoint and Power Automate
May 20, 2026
#SharePoint#Power Apps#Power Automate
Chetan Jha
Introduction
Have you ever wished you could preview documents directly inside Power Apps without downloading them or switching tabs? In today’s fast-paced business environment, teams need quick access to files, whether proposals, contracts, or reports, all within a single interface.
In this blog, we’ll walk you through how to build a seamless and interactive document preview experience in Microsoft Power Apps. By leveraging SharePoint as a data source and Power Automate for document conversion, you’ll learn how to render various file types, including PDFs, Word documents, and Excel files, directly inside a canvas app. The result? A clean, efficient, and user-friendly document viewer that keeps your workflow uninterrupted.
Business Scenario
A team shares proposal documents, contracts, and reports in a SharePoint library. Team members need a fast, clean way to browse and read files without switching context to the browser.
The goal is to build a single-screen Power App where:
All uploaded documents are listed on the left with type icons
Clicking any file instantly renders a preview on the right
A search bar filters documents by name in real time
A Download button gives one-click access to the original file
Prerequisites
A Microsoft 365 account with Power Apps and Power Automate access
A SharePoint site (e.g. https://yourorg.sharepoint.com/sites/Demo)
Permission to create Document Libraries in SharePoint
Basic familiarity with Canvas Power Apps
Security Considerations
Need help with your business solution?
Our team can help you implement the right solution for your organization.
Power Automate flow permissions should align with organizational security policies
Step-By-Step Guide
Step 1: Create the SharePoint Document Library
Navigate to your SharePoint site. Click New and then Document library. Name the library based on your business requirements and click Create.
Upload a mix of test files (ensure you have at least one .docx, .xlsx, .pptx, and .pdf) so you can thoroughly test all file types later.
Step 2: Create the Solution and Power App
Go to make.powerapps.com, click on Solutions, and select New Solution. Enter the necessary publisher and solution details as required.
Inside your new solution, click New, select App, and then choose Canvas AppGive it a name, such as DocPreview, choose the Tablet layout, and click Create. Rename the default screen to scrPreview.
Step 3: Connect SharePoint as a Data Source
In the left-hand panel, click the Data icon and select Add Data. Search for SharePoint, select the connector, choose the Document library you created earlier, and click Connect.
Step 4: Add the Document Gallery (Left Panel)
Insert a Vertical Gallery and rename it to galDocuments. Configure the following properties:
Insert a Header control from the Modern Controls menu. Set the properties as follows :
Fill : RGBA(56, 96, 178, 1)
Font : Font.'Lato Black'
FontColor : RGBA(255, 255, 255, 1)
IsLogoVisible : false
IsProfilePictureVisible : false
Title : "Document Preview"
TitleFontSize : 18
Now, Insert a Text Input control and rename it to txtSearch. Set the following properties:
BorderColor : RGBA(200, 200, 200, 1)
Height : 40
Width : 528
X : 248
Y : 88
Placeholder : "Search documents..."
Size : 15
How Search Works:
Because we already referenced TextInput1.Text in the gallery's Items property (Step 4), the gallery will automatically filter documents in real time as the user
types.Filter(
Document,
TextInput1.Text = "" ||
StartsWith(Lower('File name with extension'), Lower(TextInput1.Text))
)
This means as the user types in TextInput1, the gallery filters documents in real time.
Step 7: Add the PDF Viewer Control for Document Preview
Now we need a viewer on the right side where the selected document will appear.
Insert a PDF Viewer Control and name it PdfViewer1Position it on the right half of the screen, next to the gallery.
Set the following properties:
X : 593
Y : 108
Width : 750
Height : 614
DisplayMode : DisplayMode.View
ShowControls : true
Document : varFileContent
Visible : varShowPdf && !IsBlank(varFileContent)
ShowControls: true
Step 8: Create the Power Automate Flow for PDF
While Office files (DOCX, XLSX, PPTX) can preview successfully using SharePoint’s built-in thumbnail URLs, PDF files require a different approach. The Power Apps PDF Viewer Control expects file content formatted as a base64 data URI. We will build a flow to retrieve the actual file content from SharePoint, convert it, and send it back to Power Apps.
In the Canvas App, click the Power Automate tab, select Create new flow, and choose Create from blank.
Step 8.1 : Power Apps (V2) Trigger
Click Add an input, select Text, and name it FileIdentifier. This allows Power Apps to pass the specific file's ID to the flow.
This is the file's unique identifier that Power Apps will pass to the flow whenever a user clicks a PDF file from the gallery.
Step 8.2 :Get File Content
Add the SharePoint Get file content action. Set the Site Address to your SharePoint site, and pass the FileIdentifier from the trigger into the File Identifier field.
Step 8.3 :Compose
Add a Compose action. In the Inputs field, enter the following expression:
The Power Apps PDF Viewer Control does not accept raw binary content directly. It only understands a base64 data URI in the format data:application/pdf;base64,<encoded content>. This Compose action takes the raw file binary returned by SharePoint, converts it to base64, and prepends the required prefix so the PDF Viewer Control can render it correctly.
Important: Do NOT wrap body('Get_file_content') inside base64ToBinary(). The SharePoint Get file content action already returns binary data. Adding base64ToBinary() causes a type error because it expects a string, not an object.
Step 8.4 : Respond to a Power App
Add a Respond to a Power App or flow action. Click Add an output, select Text, and configure it as:
Name : FileContent
Value : outputs('Compose')
This sends the base64 data URI string back to Power Apps where it will be stored in varFileContent and displayed in the PDF Viewer Control.
Step 9: Wire Up the Gallery OnSelect Formula
Back in Power Apps, select Gallery Control and set its OnSelect property to the formula below. It detects the file extension and chooses the correct rendering strategy:
Set(varShowPdf, false);
Set(varSelectedDoc, ThisItem);
Set(varFileContent, Blank());
If(
EndsWith(Lower(ThisItem.'File name with extension'), ".pdf") ||
Step 10: Add the Download Button and Loading Spinner
Insert a Button. Set Text to Download, Icon to ArrowDownload, and OnSelect to Launch(varSelectedDoc.'{Link}'). Set Visible to !IsBlank(varSelectedDoc).
Insert a Spinner Control. Set Visible to !varShowPdf && !IsBlank(varSelectedDoc). This shows a loading indicator while the flow is running.
Result
After publishing the app, users see a clean two-panel interface. The left panel lists all documents from SharePoint with colour-coded file type icons. Typing in the search bar instantly filters the list.
Clicking a document triggers the OnSelect formula. For Office files, the thumbnail transformation fires immediately and the PDF Viewer Control renders the document in under a second. For PDF files, the Power Automate flow retrieves the file content and converts it into a preview-compatible format, converts it to a base64 data URI, and the viewer displays it within 2-3 seconds.
DOCX files: rendered as paginated PDF preview
XLSX files: all tables and charts visible across pages
PPTX files: slides rendered as PDF pages
PDF files: native preview with page controls
Conclusion
With just a few steps, you can transform your Power App into a dynamic file viewer that enhances productivity and user experience. This approach eliminates the need for external downloads and keeps your team focused within the app environment.
Try implementing this solution in your next project and see how it simplifies document handling for your organization. If you found this guide helpful, share your thoughts in the comments below and don’t forget to explore our other Power Apps tutorials for more practical insights and automation ideas.
Frequently Asked Questions (FAQ)
1. Which file types are supported in this solution?
This implementation supports common document formats such as:
PDF
DOCX
XLSX
PPTX
PDF files are rendered using Power Automate and PDF Viewer Control, while Office files use SharePoint preview capabilities.
2. Why is Power Automate used only for PDF files?
Power Apps PDF Viewer Control requires content in a compatible PDF format. To achieve this, Power Automate retrieves the file content from SharePoint, converts it into a Base64 data URI, and sends it back to Power Apps.
Office documents use SharePoint preview functionality and therefore do not require this additional step.
3. How does the preview work for Word, Excel, and PowerPoint files?
Office files use SharePoint's built-in preview mechanism. The application transforms the thumbnail URL into a preview URL:
This enables document previews without calling Power Automate.
4. Can external customer files be previewed?
Yes. As long as files are uploaded to the SharePoint document library, they can be previewed using the same approach.
However, Excel files with complex formatting, charts, or custom layouts may render differently depending on the original file structure.
5. Why do I see a loading spinner before preview appears?
The loading indicator improves user experience while Power Apps waits for file content to load or while Power Automate processes the selected document.
6. Can users download files after previewing them?
Yes. A download button is included that launches the selected SharePoint file directly:
