Unlocking Power Apps: Viewing Word, Excel & PowerPoint!
Overview:
The blog post delves into an intriguing hidden feature of Power Apps: its ability to view Word, Excel, and PowerPoint documents using the PDF viewer. Through easy-to-follow steps, it demonstrates the process of setting up the SharePoint Document Library, configuring Power App Studio, and inserting the necessary code for the functionality.
Unlocking a Hidden Power Apps Feature
Did you know that Power Apps has a hidden feature? You can actually use the PDF viewer to view Word, Excel, and PowerPoint documents instead of just PDFs. It’s not a built-in feature, but with just one line of code, you can make it happen. Once you understand the process, it’s quite straightforward to accomplish.
Welcome to the Document Viewer app used by employees. With this app, they can easily view Word (docx), Excel (xlsx), and PowerPoint (pptx) files. When an employee chooses a file from the list, it opens, displaying the entire document on the right side of the app.
Create SharePoint Document Library
Let’s get started by setting up the SharePoint Document Library. Create a new library named “ File Viewer ” and make sure to include the following types of files:
- Word Documents (docx)
- Excel Files (xlsx)
- PowerPoint Presentations (pptx)
- Any other file type that isn’t mentioned in the list above.
Let's create a list of Word, Excel, and PowerPoint files in a Power App:
- Open Power App Studio and start a new tablet app from scratch.
- Place a label at the top of the screen and label it “ File Viewer ” to serve as the title bar.
- Next, include the SharePoint Document Library called “ File Viewer ” as a data source within the app.
let's create a new blank vertical gallery on the left side of the screen:
- Start by adding a blank vertical gallery to the left side of the screen.
- Choose “File Viewer” as the source of data for this gallery.
Show the data in the gallery we need to add labels One for the name and a second for created time or modified time Insert the label and rename the label lbl_Name
Write this code on this label text property to show the file name
Text: ThisItem.Name
Insert one more label to show the time created and modified Rename the label to lbl_time
Write code on this label text property to show the time and date
Text: "Created Time "&ThisItem.Created &" ⏭️ "& "Modified Time " &ThisItem.Modified
To give the same design do this step on gallery property
Fill: RGBA(237, 237, 237, 1)
TemplateFill: If(ThisItem.IsSelected,RGBA(246, 88, 16, 0.44),Color.White)
TemplatePadding: 10
TemplateSize: 50
Insert the image in gallery to show the file
You can copy and paste this lengthy code block into the “Image” property of the image. This code block uses the “EndsWith” function to examine the file’s extension at the end of its name. Then, it utilizes the SVG code from a free Power Apps Icon Set to display the corresponding icon.
If(
// If it's a Word document (docx)
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",
// If you see a file with the extension .xlsx, that indicates it's an Excel file
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",
// If it's a PowerPoint presentation (pptx)
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",
// For any other file type,
"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"
)
Now that we have a list of PDF files to open, the next step is to include a PDF viewer control in the app.
Put the PDF viewer on the right side of the screen so that it occupies the entire space. Initially, it will show Lorem Ipsum text until we provide it with a Word, Excel, or PowerPoint file.
To use the PDF viewer for displaying Word, Excel, or PowerPoint documents, we need to first convert the docx, xlsx, or pptx file into a PDF format. This can be easily done in Power Apps with just a single line of code.
Write the code on Document of the pdf viewer
// Take the selected item's Large Thumbnail URL.
// Replace "/thumbnail" with "/pdf" to convert the URL to a PDF link.
Substitute(
'gal_file viewer'.Selected.Thumbnail.Large, // Get the selected item's Large Thumbnail URL.
"/thumbnail", // Replace "/thumbnail" part with "/pdf".
"/pdf" // Resulting URL now points to a PDF version.
)
Now check the results
Conclusion:
Unlocking the hidden Power Apps feature for viewing Word, Excel, and PowerPoint documents offers employees a streamlined experience. By leveraging SharePoint and simple code modifications, businesses can integrate this powerful tool into their operations, making document access smoother and more intuitive.
