Implement a PDF preview in a Model Driven Apps
Recently I needed to implement a PDF preview in a Model Driven App. This should be quite an easy thing to implement.
The PDF Preview in a Model Driven Apps options
Well, I considered the following options:
- Out of the box previewer
- Existing custom controls for my Model Driven App
- Develop a new custom PCF control
- Embedded Canvas app
I looked at the existing controls but there doesn’t seem to be a file preview option available.
Then there are some PDF related controls in the PCF Gallery but none of these really do what I need them to do.
I could of course develop my own PCF control, but I’m too lazy for that. And it would probably take me too long. Well at least it would take me longer than writing this blog post.
How about creating a canvas app? There is a PDF Preview control in Canvas apps, so that should be quite easy!
The Model Driven App
I’ve already got Model Driven app that I’ve developed. My records in Dataverse live in the table “Test Documents”. In the Test Document table I’ve got a column Document URL. The Document URL will give me the URL of the file in SharePoint.
My client wants the files to be stored in SharePoint and I don’t want to create any duplicates of the the file. So a single field supplying the URL of the file will have to do the trick here.
I will start this blog my putting a couple of bits in place that we will need later on.
Creating a flow to collect the PDF data
I will need to create a flow that will take the file location details and then collects my file from SharePoint.
A simple 3 step flow will be all that we need.
My Input parameters are two text properties:
- SiteURL
- DocumentPath
Then the Respond to a Power App or flow will use the following expression:
datauri(base64ToBinary(body('Get_file_content_using_path')?['$content']))Creating your base Canvas App
To get started I just create an empty canvas app. Later on I will add the bit to make it all work. This app and the above flow should of course be created as part of a solution, so that you can deploy all of it to different environments.
Creating an Embedded Canvas App
Even though there is a Canvas apps options in the available controls, this option will not give what you are looking for:
The above option will add your canvas app to the form however we will need to pass in some data from the model driven app to the canvas app. This part will need to be done within the classic from editor.
So now click on the Switch to classic form editor. Once the classic form editor appears click on the field where you want to Canvas app to appear.
Then by double clicking on the field control for Document URL the field properties will appear.
In the Controls, you can supply the details for your app.
Now you can customize the app, by clicking on the Customize button. Failing to do so will result in problems with the integration. between the two apps.
Developing your PDF Preview App
If you following the above steps, you should see the ModelDrivenFormIntegration object in the treeview of the Canvas app.
If this doesn’t appear, then most likely you didn’t click on the Customize button earlier.
Within the Canvas App we now have two properties to play with.
Data is a table or records and Item is the current item according to the documentation. However you will find that the Item property doesn’t populate until you have configured one very important setting.
Configuring your @ModelDrivenFormIntegration
Before you can use the Item property in the @ModelDrivenFormIntegration. You will need to supply the Datasource that is used. You can do this within the Datasource property of the @ModelDrivenFormIntegration control found in the treeview.
Once this is done, the Item property will be read by my app. Any fields available in my table are now available for selection as well.
Configuring OnVisible
Now when the app appears I will need to run the following code to call my flow that we created earlier.
Set(varPDFContent,
GetPDFFileContent.Run(
First(
Split([@ModelDrivenFormIntegration].Item.'Document URL' ,"/" & EncodeURL("Shared%Documents"))
).Value,
[@ModelDrivenFormIntegration].Item.'Document URL'
).file_content
)The above code can of course also be added tot he App’s OnStart if that is what you prefer.
Adding the PDF Viewer control
Now all we have to do is add the PDF Viewer control to the app.
Timing issues
The above will all work when you run the app within the Power Apps studio however when you try to run the app from within the Model Driven App you will find that there may be some timing issues.
The ModelDrivenFormIntegration is a bit slower to load than for the App OnStart or the Screen OnVisible to be executed. Therefore when we try to get to the data, we may get some errors thrown at us by the Canvas app.
There is an easy solution for this as the Integration is loaded with the first screen of the app. So the implementation of a Splash screen that redirects us to the PDF preview screen will fix the timing issues for us..
The canvas app in the Model Driven App
As we now look at the PDF control in the Model Driven App we will see that the preview of the pdf is loaded.
Continue Reading Pieter Veenstra’s Article on their blog
Implement a PDF preview in a Model Driven Apps
Recently I needed to implement a PDF preview in a Model Driven App. This should be quite an easy thing to implement.
Blog Syndicated with Pieter Veenstra’s Permission
More About This Author
Array
Modern Workplace26 March 2024Receive the available storage within your SharePoint Online tenant- Modern Workplace20 March 2024Options for Documenting Your Power Apps: Comments, Code, and Controls
- Modern Workplace18 March 20242 ways to duplicate SharePoint Lists to support your Power Apps
- Modern Workplace14 March 2024Update a Hyperlink Column in SharePoint with Power Automate
