Convert PowerApps Data to PDF, including Camera and Pen Controls

[@BenjaGm]

Hello, can you apply style to this HTML output?

[@elanceelance3985]

Nice work,
Can we do the same with multiple records in the collection?
I mean to save all the collected pics & pen inputs. Then, print it all to pdf

[@kellycristinazacarias1779]

​@@clavinfernandes8566 You totally rock it! I can't believe it. I was looking for this has been a week or more. Thank you soo much!

[@clavinfernandes8566]

@@kellycristinazacarias1779 Thank you so much, for the nice comment!!!

[@kellycristinazacarias1779]

@@clavinfernandes8566 Do you know how can i have a static header and only the "body" of the html be inside the "apply each"?

[@jeroenritmeijer2714]

@@kellycristinazacarias1779 That is a generic HTML issue. I think it is a matter of using the THEAD HTML Element, see stackoverflow.com/questions/274149/repeat-table-headers-in-print-mode

[@venkatkommisetty]

Really good try Clavin and very useful. Look forward to see more from you.

[@clavinfernandes8566]

Thank you so much, Venkat, for the nice comment!!! It means a lot to me. We are planning for many more videos, please stay tuned.

[@macm7730]

Thanks for sharing and explaining everything so well, I've a
quick question, I've created a flow for generating a Word Template for Patient Statement...and then converting it into PDF. I'm running this flow for individual patients and the data is coming from SQL Stored Procedure to Word Template to PDF. These PDF files are being
generated and stored over the SharePoint. Instead of 50 separate files I’m
trying to merge everything in one PDF file. I didn't find appropriate Action in
PowerApps flow for merging all the PDFs into one. Anyone has idea or suggestion
regarding this? Can we achieve this using Flow in PowerApps?

[@clavinfernandes8566]

Hello.
We have two options here -
Option 1 - Append all the 50 SQL Server items to a single HTML file and then convert it to PDF.
Option 2- Use the Muhimbi Merge action, Merge the 50 files into a Single PDF.
To have a better understanding of your requirement and assist you better, please send us an email at [e-mail]

[@macm7730]

@@clavinfernandes8566 Great! Thank you very much

[@aaron6516]

Sir this is so very helpful!!! Very nice work and demonstrating this!!! Very much appreciate the breakdown!!

[@jeffta1979]

Hi thank you for the video, i did the JSONvar however when i click on the name it does not give the code or text as yours does.

[@clavinfernandes8566]

Hey, The First thing you need to check is if your collection is created correctly and if you have set the values to JSONvar correctly.
I am including the sample formula below which you need to use on the onSelect property of the Button.
Collect(
Controlcollection,
{
Name: TextInput1.Text,
Image: Camera1.Photo,
Pen: PenInput1.Image
}
);
Set(
JSONVar,
JSON(
Controlcollection,
JSONFormat.IncludeBinaryData
)
);
To get the code( sample payload), we need to navigate back to our Power Apps, add a label to the Power Apps Canvas, then set it to the ‘JSONVar’ variable, click on the button, and then finally copy the label content to the clipboard and delete the label.
Now this is all documented at the link - clavinfernandes.wordpress.com/2020/02/12/convert-multiple-power-apps-media-controls-from-power-apps-screen-to-html-and-pdfs/
If something is still confusing, then please drop an email to me at [e-mail]

[@dbschenkersingapore5542]

hi, is it possible to have a dynamic html code in the case of multiple image attachments? So if there is only 1 image attached, then the there will only be 1 row in the table, and if there are 2, and additional row is created for it.

[@clavinfernandes8566]

It should be possible to achieve your requirement, but we need to understand how you have configured the App. Please drop us an email at [e-mail].

[@PeterPanQuails]

That is awesome. Clearly explained and very useful tutorial. Thank you Sir.

[@tebitu]

Nice job, i do have on question, i try to the same with the "Add picture" control, the picture is showing in collection but not in the JSONVar, is there any limitation or work this is a different way

[@clavinfernandes8566]

The "Add Image" control has two parts -> AddMediaButton1 and UploadedImage1. If you want to access the Image you show use the "UploadedImage1.Image".

[@omarhernandezsolis2238]

you are the best thank you so much for the tutorial

[@leokearns1221]

I have one other suggestion. Can the html file be added as an attachment to a sharepoint list item?

[@clavinfernandes8566]

Yes, the HTML can also be added as an attachment to a SharePoint list item. You will need to use the SharePoint 'Add attachment' action

[@TheNilyog]

This is very good article, can we do that on image write signature and save in one pdf file? can we do that basically i am trying but not get perfect solution. any clue? appreciate in advance.

[@clavinfernandes8566]

Hey Nilesh, With reference to your requirement, you can convert the image to PDF and then add the signature as an "Image Watermark" on the PDF. With Muhimbi, you can add "Images as Watermark" using our Power Automate actions or REST API.

[@TheNilyog]

@@clavinfernandes8566 basically I have capture image using image control and set that image in image control I have set that image control In pen input control then I have sign on image with the help of peninput then both image and sign save in one pdf file it's shows like sign on image.

[@cathy1384]

Hey thanks for the video. I am desperately trying to print a Dymo label from the html created, using printnode. But the page layout is too big so I barely can see what is printed. Do you have a solution for this? Thanks in advance

[@jeroenritmeijer2714]

That is a generic HTML issue. I propose creating the HTML as a static file (for testing purposes) and do a print preview in your Chrome browser to see how it comes out. The Muhimbi PDF Converter will create very similar output to what you see in Chrome. For generic HTML help, you may want to ask a question at www.stackoverflow.com/

[@filipzivojinovic1378]

Thanks bro !!!