Preview SharePoint Online document (in an IFRAME) in model-driven apps? (and canvas apps)

[LenC]

Is there a way to display SharePoint Online hosted documents in a model-driven app? The scenario is a user needs to review a document (usually a PDF) and transcribe data into the app. It would be useful to have the document side-by-side in the app forms.

I am talking about actually rendering the document, not simply using Document Management to render a list of related docs stored in SharePoint.

In Canvas apps, I've tried some 'hacks' to get the Canvas PDF Viewer to render thumbnails. Even the highest resolution thumbnails are too grainy to read for our PDF forms.

I was hoping we could get the full SharePoint document preview functionality embedded in our model-driven or canvas apps.

Thanks!

[rampprakash · Accepted solution]

Hello @LenC 

There are multiple ways available.

Way 1:

Add an iframe in a Tab then Onload of the Form (using JavasScript) get the Document Location URL and bind it.

Way 2:

Create a button --> On Click of button Use Javascript to open SIDE PAN --> In the Side Pan --> Call the JS and Bind IFRAME there 

Let me know if you need more details

Please mark as Answer if it is helpful and provide Kudos

Subscribe : https://www.youtube.com/channel/UCnGNN3hdlKBOr6PXotskNLA
Blog : https://microsoftcrmtechie.blogspot.com

[LenC]

Thanks, @rampprakash. I do see if I use a direct URL to a SharePoint PDF, and allowed xss, the built-in IFRAME control rendered a PDF using the browser's own PDF viewer (which is arguably more usable than SharePoint's PDF previewer).

I'll have to quickly study up on scripting and event handling, but this looks like the path.

[Joseph_Nasr]

Hello is there video/tutorial on this?? How do you do the binding? 

I am currently having this issue where I have an Iframe showing a SharePoint Document Library, I need to select some files, and run a power automate flow (from the Sharepoint appearing in the Iframe) but I need the values of 3 fields that are in the record's form (above the Iframe) for the flow.