Power Apps 📂: Preview SharePoint Files + ✏️ Edit Office Documents
Вставка
- Опубліковано 23 лип 2024
- In this Power Apps Tutorial Video, we dive into the exciting world of file previewing and editing in PowerApps using SharePoint Document Library. Discover how you can seamlessly preview files from SharePoint and directly edit Office documents (Word, PowerPoint, and Excel) within Power Apps.
Throughout this comprehensive tutorial, you'll learn how to leverage the power of SharePoint REST API and Microsoft Graph API to enable document previews and edits in Power Apps. Follow along as this Power Apps tutorial video will guide you through building the file preview experience, making API calls to SharePoint REST API and Graph API, and utilizing Power Automate for seamless integration.
Unlock the magic of the Graph API 🚀 and witness firsthand how you can query the SharePoint REST API to generate file previews and edit experiences. And guess what? These techniques work on Mobile Apps too!
Key topics covered in this video include:
✅ Demo - Document Viewer + Editor in Power Apps
✅ Utilizing Microsoft Graph API to preview drive items
✅ Leveraging SharePoint REST API to preview SharePoint library files
✅ Editing office documents directly within Power Apps
✅ Full document library experience in Power Apps
⬇️ Download the sample Apps showcased in the video:
Exclusive for Channel Members (Silver Club 🥈 or higher).
Find the download link in the Community Tab for Members.
To become a member, click here: ua-cam.com/users/rezadorranijoin
Additional Resources:
🔗 SharePoint REST operations via the Microsoft Graph REST API:
learn.microsoft.com/en-us/sha...
🔗 Microsoft Graph Explorer:
developer.microsoft.com/graph...
🔗 driveItem: preview - Obtain a short-lived embeddable URL for an item to render a temporary preview:
learn.microsoft.com/en-us/gra...
🔗 Embeddable file previews:
learn.microsoft.com/en-us/one...
🔗 Iframe PCF code component:
pcf.gallery/iframe-pcf/
#PowerApps #SharePoint #Documents #Files #Office #microsoftgraph
Table of Contents:
00:00 - Introduction to SharePoint Document Library file viewing and editing in Power Apps
00:49 - SharePoint Document Previews in Power Apps
01:57 - How to build document viewer in PowerApps - Tutorial
03:29 - Power Apps Get file preview using SharePoint API
21:47 - Power Apps Get document preview using Microsoft Graph API
25:30 - Editing Office files in Power Apps
28:20 - Document Library Experience in Power Apps
29:44 - Subscribe to Reza Dorrani channel
🤝 Let’s connect on social:
🔗 Reza Dorrani LinkedIn: / rezadorrani
🐦 Reza Dorrani Twitter: / rezadorrani - Наука та технологія
This is a master Class, Reza is on fireeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee !
🔥
This is certainly another Reza classic! Great Video, great presentation and full of useful content. Certainly needs a couple more watches and then connecting it into my environment. Thanks for always sharing. Certainly, the infusion of the Graph API functionalities has opened up a whole new world of possibilities.
Thanks Doug.
The Graph API indeed opens up a world of possibilities. There is so much more to uncover.
You're on fire lately, Reza!
It's easy to underestimate how useful these videos are - a SharePoint preview is merely a great example use case of the underlying concepts being employed in this video: Calling Flows from a Power App; Graph and SharePoint api calls; PCF components (and an iFrame control being a great example of that); and Azure AD HTTP requests.
A shame the standard Groups HTTP request to the Graph api v1 will be deprecated in favour of a premium connector!
Thanks so much for the appreciation.
Please note the groups connector v1 does support more endpoints than it should have in the first place.
v2 will only support the groups endpoint which makes sense as connector is related to groups.
The premium "http with azure ad" connector has always been an option. It is not a replacement for the groups connector.
Reza, you can know for sure that you've practically saved someone's job - mine! I was so worried about getting a solution for many issues. This video is one of many to make everything come together for me.
Thank you soooo much!
Glad I could help!
Videos are a guide but how one utilizes it in their day to day work or career is upon the individual. You are doing great
Your method of topic selection is so amazing. Again, thank you so much!
Glad you like them! Thanks so much for watching.
Thank you Reza ! Once again, another super interesting video !!
Glad you enjoyed it
Thanks, Reza! Excited to have added this capability into an app. For my purposes, I found it helpful to use the Replace function to replace "embededit" with just "edit" on my word docs. This way the user is taken straight into the Sharepoint editing experience instead of requiring user to click "edit" on the OneDrive preview.
There were 2-3 options. Embed, edit etc.
@@RezaDorrani yes, all great solutions! 👍👍 I used a replace on the "getURL" in the edit option you showed. I found that word docs specifically still needed an extra click to be able to start making edits, so getting rid of the word embed eliminated that by taking to a different editing experience.
You Rock Reza! I'll use your video like a tamplete to develop my onboarding training app, help me a lot, thanks!!!
Cool idea 😎
Fantastic.
I've been seeking for this solution forever, and now with this excellent video and explanations - it is at my fingertips.
Bravo 🥳
You're most welcome!
Another level og Graph API calls. Thanks Reza. This will help a lot in my role
👍
You are such a treasure Reza. Much love brother. Keep up the good work! You make my life and the lives of thousands easier.
Hey, thank you so much
Absolutely Fantastic! Thanks Reza!
Most welcome
This is absolutely insane - what a cool and clever solution, thank you for sharing!
Glad you like it!
Truly Amazing🎉. It’s always a great learning watching your videos😊
Thank you! Cheers!
Awesome video. Very useful video. Many thanks Reza. You are making Power Apps instresting. Kudos to you
You are most welcome
This is fantastic! Thank you so much for posting!!
My pleasure!
This is an excellent example. You made my life easy. Thank you
You're very welcome!
Superb...again it is a breakthrough experience... Thanks Reza for this wonderful information.
Most welcome! Thanks so much
This is absolutely amazing 💯💯💯 you're the STAR 🌟
Thanks Maryam
You out did yourself again... Excellent Video.
Thanks George
Once again great content Reza.
Thank You
Master of masters. Thanks for sharing your solutions.
So nice of you
Something new learned thank you Reza ❤
Thanks so much for watching and so happy to hear that the video has offered something new. I always try to show something new.
Most awaited ❤️
👍👍
Wow. Simply awesome.
Glad you like it!
Great video, thanks for sharing.
Thanks for watching!
Hi... most awaited
Enjoy
Hey Reza, really great video, it worked perfect for my use case. Thank you! Do you have any security concerns with using the PCF functionality inside Canvas Apps?
Personally, No :)
Great demo my friend!!!!
Do you know if there is a way to edit Autocad (DWG) files if the user has Autocad installed on the computer?
Thanks a lot!
I have no clue about editing Autocad files
Next level 🤠
Level ⬆️
Wow maaaaster, now I can make data import app for in dynamics with real high UX.. !!!
👍
Thanks So much, my Guru....
You're most welcome!
Thanks!
Thanks so much
This video is bang on !! The details are awesome and are really helpful, well done Reza, and thanks for the wonderful content.
However I have a question, since powerapps does not support templates I think these can be used, Doc Lib (one with all the templates) can used to create new documents in other Doc Libs, could you please suggest if that will be possible?
Most welcome!
The idea of this video is document preview. Creation of documents is a different ball game altogether.
I have done a few videos on doc creation from power apps. One would more or less run into size limits.
Thanks Reza. Any hints on getting the preview url in a GCC High environment? We don’t have access to explorer. I can only get to the download URL.
No clue about GCC :(
Hi Reza, Great video again! I have a library with only PDF's that we would like to view and then get a sign off acknowledgement and while the method works the preview quality seems a little fuzzy. Is there a way to improve the quality or is there a better way to show PDF in powerapps?
I have done a video on document viewer in Power Apps which shows pdf in pdf viewer control. Check that one.
Hi Reza, great video! Showcased a lot of the capability that Power Apps is gaining recently!
So in this video scenario, you are rebuilding the whole SharePoint Document Library Management in Power Apps, am I right?
This video is focused on file preview and editing. I have done separate videos related to uploading documents, navigating folders and more.
Here I wired all of them to demo an end to end experience. App (full doc lib experience) is available to download for Members only.
Link in video description.
Hey Reza! a SharePoint preview is amazing! I wonder if it is possible to download a file attachment from an old version in Power Apps? Thanks!
Probably possible with the graph api, but not something I have explored
Hi Reza, really a great video!!
I have developed an app which showing the pdf file content from Sharepoint to
power apps canvas app screen in pdf viewer . it's working perfectly in dev(different sharepoint site) , uat (diff site) but in production getting below issue.
"Message": "Missing Authorization header for a privileged call on connection.",
"Source": "product policy"
do you have any idea?
thanks in advance!!
This video does not use pdf viewer + I have not come across the issue you have mentioned.
I recommend posting your issue with screenshots on the forums at powerusers.microsoft.com
Thank you for the video.
It's easy to understand.
I need help understanding how I get a specific folder's ID (Graph Explorer)?
The search term in the gallery is the "hiddenisfolderpath."
I get an error when I use the getURL as you describe.
Video description has link to download entire solution (members only - check description for details)
Reza. You have covered most of the use cases related to document management and how we can achieve it using Power Apps. Thanks for the valuable tips and tricks. You are my🦸
You are most welcome and thanks so much for the appreciation
Thank you for this video Reza!
I confirm that this method works today.
I was using another method which was to get the embedded URL of the documents and faced authentication issues. 😥
Good to hear that this method works
Another Great Video Reza. When I enter the formula on the view Icon in the gallery, it's telling me "This Formula has side effects and cannot be evaluated" Datatype: boolean. Any insight? Thanks
I have not come across this issue hence not sure. You can try downloading the App (link in video description)
excellent! fantastic! mind blowing! you are great Reza! 👏👏👏👏
I have one query:
instead of power automate,
can we use graph api connector i.e., Office365Groups connector in PowerApps itself which you had shown in the previous graph api videos?
Yes, we can. I wanted to mix things up and show different options. In coming videos, you will see me showing various options.
@@RezaDorrani thanks 😊
Awesome video as always Reza. Can this be extended to preview list attachments please?
This is only for documents. I have done a separate video on list attachment previews although that is very limited compared to this.
Wonderful solution :) i have a question, this solution is it work with file attachment in SP in column 'Attachment' not library docs?
It did a video list search a few weeks ago. That already searches for list attachments
Thanks Reza
👍
Again well demonstrated, Thanks @reza for your videos and help🙏 .
23:04 "Inovke Http request" is the premium connector. But, we can use the stadard "Send an HTTP requerst " right?
Yes, you can. But as I mentioned, the http action in groups connector may be deprecated.
@@RezaDorrani If it is deprecated, what is the other option to upload files to document library from PowerApps other than premium connectors and power automate
@@srikanthb8549 Even if deprecated in future, existing apps would be supported.
Thanks Reza!!!! Would like to know if Sharepoint Lists attachments can also be previewed in this manner? And if so, how can we do it?
SharePoint list attachments cannot be done in this manner. Check my videos on list attachments. They are all in a playlist.
Thanks Reza for this great vidéo! Is it a way to replace the PCF ? I can t change the settings of my solution environment and I have an error message to the import. Thanks!
I cannot help with access issues related with your environment. I have no come across any access issue in my environment.
Hi Reza! Another excellent video thank you! I am trying to find a way to embed an in my canvas app easily either directly as html or as a component. No one has covered this in a easy to follow video yet without getting things too complicated and without admin access. Would love a video on this, and/or some pointers on if this can be achieved?
Most welcome! I am not aware of any html for . In this video I use pcf.
Hi Reza! You are The Greatest!. Is there a way to edit office documents without using the premium connector "Invoke an HTTP request"?
Check my series of videos on graph api. I have shown multiple ways to do it.
Great video. How can I achieve the
Thing in power pages for customers. To be able to view sharepoint document library contents related to customer. Showing folders and files and being able to preview or download/ upload files. PDF files
I have done no work with power pages. I will recommend checking or posting your query on forums in case someone has done something similar
powerusers.microsoft.com/
Thanks Alot Reza for this video, this is extremely helpful, I am having just a little bump that preview doesn't gets fit into the size of component, it is rendering correctly but doesn't scale it self to component size width/height , is there any solution for this?
There is a responsive pcf control as well. Search for that in pcf gallery.
Reza - You are the best. This video was very helpful. Is there any way that Power Apps can use a button to open a directory on the network? I am making a Power App for our Help Desk to view information about our Company applications. One tab in the application has the installation information. I wanted to have a button that links to the directory where all the information for the installation (license, install instructions, etc.) is located. Thanks
Thank You so much!
I have never tried that hence not sure what the possibilities are. I will recommend checking on the forums at powerusers.microsoft.com/ in case someone has done something similar.
Amazing, and pretty complicated. Wow. Since you did this, has it become easier to do this ie new ways of doing this?
I am not aware of any new way to do this.
Hey Reza, what do you like to use more, the native pdf viewer or the component❓
I currently have used the pdf viewer, but that component looks pretty noce
I have no preferences
Hi Reza, thanks for the video, it's really helpful. can you tell how to download these files which we are viewing, as you have used the download button, you mentioned using Rest API but can't figure out how to leverage that.
Video description has link to download sample App (members only).
You could try it by reading documentation on graph API and downloading files.
Amazing master! Can you make another work around without using GraphAPI?
I showed every possible option that I know of. I have no plans to deep dive further.
Magic by Reza again and all the time
Thank You 🪄
Please help me: I need to show the attachment in sharepoint list. (In sharepoint list had 1 column: Attachment, how to show these files which user upload to Sharepoint list)
This is to show file (document library) previews only.
For list attachments - I have done other videos. You can check those.
Wow nice Reza key points the pcf component require any licence or it's free as it's in pcf gallery will be safe to integrate in production environment
pcf is standard license.
Hi Reza,
Great content as always. Very well explained!
Just a query - Can we make the Graph API call for File Preview in the App itself using Office 365 group connector instead of calling Flow?
Yes, absolutely! I simply wanted to show another way of achieving the outcomes.
I love to mix things up.
@@RezaDorrani Thanks for confirming. Have a great day!
This is incredibly smart. Thank you for sharing. There is a limitation to the iFrame however to the width and Height to being at 500X700. Is there any workaround to that?
Thanks!
There is a dynamic control as well in pcf gallery. Gove that a try.
@@RezaDorrani
Yup got it. You Champ!
excellent video Pray, could it be done to see attachments in a sharepoint list?
This is specific to doc library only. I have not investigated options for editing attachments
Great content! Exactly what I was looking for. Now I only have to figure out, how those sharepoint-documents can be printed from within PowerApp ;-)
Glad it was helpful!
Is there a way to leverage the preview url to get library document experience without utilizing the PCF iFrame solution? I tried uploading the zip file solution to my PowerApps environment, but I think due to policies, I am receiving a "missing prvCreateCustomControl privilege" error. Or is there any way for me to recreate that Solution locally, since I can't import it?
I am not aware of any control in power apps that can show an . I will recommend checking on the forums at powerusers.microsoft.com/ in case someone has any alternative options.
The last time I imported a PCF component, I recall that it caused a warning message to appear every time a user loaded the app. Essentially warning them that the app included a potentially unsafe component. Will that happen if I follow these steps?
Yes, but I believe there are ways in PCF to improve that experience. I have not done much with PCF though.
I'll have to watch a couple of times to gain the necessary competency. Thank you.
Watch it again and let me know how it goes
@@RezaDorrani It's fantastic. Excellent tutorial.
@@CloudhoundCoUk Thanks so much
ThankS RD, This can edit pdf files! Or only office files! I have a task where I need to sign pdf files and put comments in it by pen control. Do you have any recommendations. Thanks
Only office files. I do not have a video reference on your scenario and would have to try it out to provide guidance. I recommend checking on the forums at powerusers.microsoft.com/ in case someone has done something similar.
Hi sir, your videos are very helpful to develop power app so thank you so much, Can you please share video to power app link with project online and planner app. integration???
I do not have a video reference on planner and project online scenario. I recommend checking on the forums at powerusers.microsoft.com/ in case someone has done something similar.
Hi Reza, great job again!! Can you please share the app for download?
I cannot share link here on general chat. You would need to post a comment on the member only link shared in community tab for this video.
Thanks a lot Reza, this is a big game changer. If we use standard connections, standard licence, and make some calls the API SharePoint REST API or API from the Graph into our PowerApps, can we dev it and deploy it to UAT envi and potentially in PROD ?
But like always, thanks for the share Reza ! Your experience allow us to be better as a developper in Power Platform !
Yes, you absolutely can ALM
@@RezaDorrani
Thanks Reza. So no problem either if we use a premium licence and call the Azure connector in our Power Automate to deploy in UAT and PROD.
I'd like to know, you show an application at the end of your video that lets you browse a SharePoint library, even go into sub-folders, etc... have you ever already made a video that shows how to create this kind of application?
@@bernardnguyen5382 I have not made that one end to end. I have shared that app with members. Link is in video description.
How does he do it ? Its mental. So good
He is a little crack 😉
Hi Reza,
Will it be also possible to setup same document preview experience in Document library custom forms via powerapps?
Yes, should work
@@RezaDorrani thanks!
Awesome, Reza! Can a searchbox be added to search for documents?
I have done a video on searching in file contents. So yes :)
@@RezaDorrani thanks I will look for it, I think I’ve seen it before if I remember correctly. Thanks Reza awesome videos!
Hello Reza Appreciate your video ,your tutorials is awesom , i have 365 licences belong to my organization but when i log in microsoft graph explorer it's ask about admin approval
Graph explorer only requires you to sign in. Certain graph actions require admin approval:
Does this have to be done whilst connecting to the SharePoint documents? Or is it possible when connecting to a SharePoint list which has files attached for example - just the preview that is and not the editing of documents
This is for SP doc libs only.
For SP list attachments, I have done separate videos.
Hi @Reza, would it be possible to provide a downable option for the app?
Video description has details on how to download
Thanks for this great video Reza.I have followed all the steps in this video but when I am clicking on view item details I am getting error "The server did not receive a response from an upstream server" and flow fails.Any idea?Also my document library contains multiple folders and each folder have some documents,so are there any changes in steps?Thanks in advance
No idea as I have not come across this issue.
I have the video built step by step + I have also shared the Apps with members (link in video description)
@@RezaDorraniThanks for the quick response.Ok let me download and check the app in detail.Many thanks
@@dgarg2149 Its for members only (paid)
@@RezaDorraninp..I"ll join.Thankyou
Hi Reza, can we increase the thumbnail size? bigger than large?
I don’t think so.
Can we render word document of Azure blob storage using content URL in canvas App?
Not tried it so not sure. I would recommend checking or posting your query on forums in case someone has done something similar
powerusers.microsoft.com
the video is great, the question is whether such a scenario will work with list attachments?
Thanks!
This is only for doc libs.
Thanks!
This is only for doc libs.
Do you import the whole zip file of the ifram solution? I'm getting a lengthy error when I attempt to do so. You skipped over that specific step in your video.
You need to simply import the solution file (zip file) in solutions.
Check documentation on how to import a solution.
not sure why once i added the beta and edit in the HTTP invoke request. not it only allows to edit the office document and i lost the preview of the other document types. so ended up with two workflows. alos looks like the width of PCF control is fixed not editable.
Not sure about that either as I have not experienced that issue.
Pcf gallery also has a responsive component that you can download and use.
is there a limit of flow run? let's say multiple people clicks on the same file, so will that cause any issue with flow?
Limits are per user
Aka.ms/servicelimits
Does Reza have access to my personal powerapp project wishlist??
😆
I read minds :)
HI Reza.. I have one issue when I am selecting pdf , images flow running properly. When I select excel or document file it's throwing error like " The resource could not be found". Can you please guide me here
Video description has link to download sample app (members only)
I have not come across this issue and hence not sure what the fix for your issue is. I recommend posting your issue with screenshots on the forums at powerusers.microsoft.com
hey I have a sharepoint column that stores multiple choices How can i create a combobox or search from that column that will filter my gallery
Multi choice columns is not delegable. You would need to use search api as shown in video. You can search on managed properties. Check documentation on managed properties.
Reza, how do you make the larger? - What I mean is, it only shows a small window for the document & I can't make the window bigger
There are other pcfs that are responsive as well. Check pcf gallery.
@@RezaDorrani Thanks. I've tried a couple of them & they don't work very well either. Webpages render good, but documents like an 8 1/2 x 11 pdf just don't render the best. If the user changes it to Window width, it works just fine! That is just an extra step the user needs to take & I was hoping to avoid it.
Thanks again Reza for your work
Is there any option to download document in the personal desk from power apps
What is personal desk?
23:28 The premium connector didn't work, received an error "Failed with error: 'AADSTS..." after clicked Sign In, I must have missed something here. Thanks for sharing.
Not sure what this issue is. I have not experienced it.
Reza, this is great, but unfortunately I cannot use a premium connector, is there any other option for that AD connector, in order to work this way? Seems that the Send an HTTP request for Office 365 Groups is not longer available :(
I did a series of videos on Graph API and Power Apps and covered all options. The sent an http request was going to be deprecated and hence I showcased the other route (premium) in this video. I am not aware of any other standard route.
I did a recent video where I show searching in sharepoint libraries. There I show how to call underlying sharepoint api from graph using standard connector. Check if that works for you.
@@RezaDorrani Thanks Reza, I already solve the issue, using the EncodeUrl and the Substitute function, I can previsualize pdf, or any other Office file on the PDF viewer control. No flow needed, just a variable and an If function
@@rhydonplay9190can you make a video and show us how to do this I am locked on , if you make a video you will be helping a lot of people do it
Hi Reza,
I have followed same approach where Word document needs to be edited using PCF component. But after 5 mins, the token is getting expired. Any idea? Please help.
Not sure about this
Another amazing video, Thank you so much Reza . I followed u but stuck somewhere, have imported into solution , when I click get more components inside my powerapps, its shows "There aren't any component libraries in this environment to import" and it ask for Create component library if I click this button, it navigate to another powerapps library where the screens have components only .
Help me to figure it out
This is not a component library. When you go to get more components, you need to switch to Code tab as shown in video. Your environment must be enabled for pcf use. Check documentation on code components.
@@RezaDorrani Thank you reza, it works perfectly , just one more to clear, how to set the document fit in center in src , it cuts some side of doc , there is any property for that?
@@Thaara1424 In the PCF gallery, there is a better version of component. Its called responsive . Select that one.
@@RezaDorrani Tq so much sir, It works as expected
@@Thaara1424 Hi, how did you solve the first problem? because when I click on "get more components", the Code option does not appear. :c
Thank you so much for this. Works like a dream. However, how can I get the files in a folder (teams-channel). I tried with the command children but they do not show up. I get the error item not found. Any help would be greatly appreciated.
I have not tried with files in folder related to a Teams channel hence not sure.
I recommend posting your query on forums at powerusers.microsoft.com
@@RezaDorrani Thank you so much for your answer. I really appreciate it.
@@GabrielaBergantini Hi, i am trying to do the same. Have you found a solution yet?
@@jestinwegert9926 Unfortunately, I did not. I had to create a separate library without folders and just added it to the Teams navigation.
For folders, you can include the folder name or path just before the file name with extension. So instead of /root:/DocumentName.docx:/preview you will have /root:/FolderName/DocumentName.docx:/preview
Hello Reza
Thanks for this video
Can I do all what you present here without premium license ? Thanks
I have done a series of videos on graph api and power apps. I have show many options from rest api to graph using standard and premium. Yes, some of this could be done with standard.
@@RezaDorrani thanks
I uploaded his PCF control, which is uploaded as a managed solution. when i go to get more components i don't see canvas or code option and not the code or PCF. anything we need to enable or activate.
I dont think there is anything else needed
I needed to enable the code component framework in my environment and it worked. thanks for the video. great job.
@@ABCD-ABCDEFGH Im not sure either.
Is there any other way to create that Uri not using Microsoft Graf? Due some permission problems Microsoft Graf can not access SharePoint (needs permission to access resources in your organization that only an admin can grant. Please ask an admin to grant permission to this app before you can use it.) Im the owner of the site but not sure who need to grant permision to Microsoft Graf. Because of permision I can not get Site ID and Document ID. So Im wondering if there is any other way to do get those ID-s?
I am not aware if there is another option to get that Uri
Does anyone know how to suppress the message "This app may contain unsafe code" - as soon as you import a code component, the message always appears every time the app is loaded
As per documentation, it should only pop when editing apps but not when it is being played.
learn.microsoft.com/en-us/power-apps/developer/component-framework/component-framework-for-canvas-apps