How to Generate PDFs from Power Apps and debug problems [Using Power Automate]

have you ever wanted to create a PDF from power apps if you have then stay tuned because this video is for you my name is Brian Knight from pragmatic works oftentimes we get projects where a custom customer wants to create a PDF and sign up our apps whether it be an invoice a permitting information or some other mechanism where they want to take the information from a data set and push it into PDF maybe even email it out this is a common common requirement inside of power apps the number of ways doing this one of the ways is using third-party tools for example if you have a PDF already and you want to put the power out state into that PDF or a word doc there's some third-party tools that can integrate into that to make that happen in this video though we're gonna focus on creating a PDF from scratch that PDF is going to be first created from an HTML doc inside of power apps converted using a Microsoft Flo our power automate excuse me and then ultimately create it again as a PDF so the intermediate step is the HTML piece if you want to find an easier way there are a number of third-party tools you can use to ultimately the same problem saw the same problem in a much easier way this video of course have a cost but this is a an easy way of doing it by yourself so let's begin let's take a look at our parkour problem I want to create so ultimately we want to store this file it looks something like this yeah inside of your SharePoint or onedrive or email it out those are some of the mechanisms you want to do so we're gonna choose onedrive for business the time being we can use any of those onedrive onedrive for business SharePoint a number different locations you can use to ultimately store that intermediate files this is what we're trying to produce we're trying to create from a gallery that looks like this the PDF that you saw that looks like this so same information just in two different ways so let's take a look at how we can do that so first of all we're going to a drop in some HTML a text here so we're going to insert and what Rob will now label and excuse me look little trigger-happy there text and HTML text now this is not a required step what we're using this for is ultimately help you kind of visualize the HTML and kind of debug it before we go through the flow steps so again this this is not required we could put all that logic into the button that calls that power automate flow so with a number of ways of doing it we're just going to take this one way just so you guys can see what we're creating in our case if you wanted to keep this style and from a debug perspective go ahead and hide that hi the HTML text mode to create and and do a number of ways so let's take a look at how we can do this so first of all I've got the HTML already created here so you guys don't have to watch me do this now ignore the styling at first so we'll come back to the styling in a moment here but as we kind of go down here we'll see okay I've got my header one this is my project my header for that project then I'm doing a number of table rows and table headers here from my project name my status name and my active now the core of the code will be really care about here is this concatenate in every row that you're seeing in a gallery on the left at the for every row we're gonna put this liner you're seeing right here so we're gonna open it up with a table row and there's some detail for that table row TR TD and we'll put the columns in here for project name and for status email and for active flat so this is the core code that we have to do and as you see we're kind of breaking out of the literal code here and putting in the column name by putting us a little pair of and percents right here so reasonably common code here for HTML now if you're curious about the head the information you see above this styling information what I did and I'm going to copy this in real quick so we can kind of see what the code looks like and paste that in alright from a styling side what I did is I went over to w3schools comm you went to a CSS look for tables and as you kind of scroll down you'll find one that you like I chose this guy but bottom here we then can customize it how you want by hitting try it yourself you can get the core code I'm seeing right here copy from style does dial and then change the colors that you want to make this look more appropriate for you okay so that that's essentially I'm just keeping the standard code that you see right now but we could stylize it however you want now a few things and note that when you start out when you put the style code in here you will not see it in this HTML text the debugging I'm using more is just to see hey does it know the column names line up to look okay from that perspective now it will show itself in the flow later when it creates the HTML and the PDF but it will not show here if you want that code to show what you have to do is you have to go into each of these tags here and put your styling in the tag itself so for TV you would have style equals and then you know Yatta Yatta Yatta after that whatever kind of styling you want to do then you'll actually see it inside that another note here is this PDF generator to be very very fickle with your code HTML is very forgiving however PDF is not so I'll show you in a moment how to debug some of those challenges also and what's will cost them those issues so will will actually trigger a few issues later in this webinar all right so we got this now done we're ready to rock let's go ahead now and drop our button then to create the PDF so let's one drop that button in we won't style that button in anyway well let's call this create PDF and the code we're gonna have to do now is we're gonna jump out to flow now our power automate and creative flow to actually create this PD this best PDF doc again the steps are we'll create the HTML then the PDF that cryptic creation the PDF s use a conversion process and that conversion process creates a blob and memory but doesn't actually save that blob anywhere then we create the PDF somewhere on a site love you SharePoint whether it be a onedrive wherever that might the final resting place maybe you might email it out you might pop it link in there whatever you wish to do and then you could if you wanted to delete the file after after you've used that transient space also so let's go ahead a few might be you definitely want to leave that HTML doc though ideally so I'm gonna go ahead and go to create a new flow alright let's go ahead and create a new flow from instant from blank will be will start power apps and we'll go ahead and call this create PDF from gallo all right whatever and hit created all right with that nail done akin to three steps create the file in onedrive let's be the HTML file convert the file to PDF the third step is going to be to create the file again as a PDF and you could create some fourth step there to either email the file out to delete all the transient files whenever you wish to do so let's kind of start the first step first let's go ahead and I'm choosing onedrive for business again you can choose whatever you wish to to locate this for the most part I'll choose onedrive for business so and create file now in my case I'm gonna go ahead and point to the location you saw before I'm gonna come back one step here location we saw before is this power apps folder on my onedrive for business ok so I'm going point to that I'm gonna hard cook mine because it's gonna be a transient folder that will use just kind of store this application information add next is the file name you want to choose now I'm choosing to actually request that information from power apps so I can provide the user a link to that file afterwards subway and choose ask now before I do that I should probably go ahead and rename this task and you'll see why and I'm out here go ahead and rename this and say create maybe HTML file oh great HTML file that's interesting has he do that for let's try that rename one more time here all right we'll just go with one let's go with a crate file and I'll put HTML Wow all right well whatever okay oh I see it's because I have the file name is required it's let me do that rename step down okay no worries well we're we will actually name it after we do this ask for power so the file names can be provided by power apps the content for the file it's going to be again requested from power apps also the reason I wanted to rename this before that before this is because he now has create file in it now it should let me go ahead and rename this alright free HTML but unfortunately now my variables are set and I've got these inputs now have create file in it instead of create HTML file that's okay though we'll be at Bertha uses to debug write down our next stop is to go ahead and convert the file so let's go ahead and do the convert file this will be again onedrive for business and we're looking for a convert file okay there's a few of the conversions pollicis go ahead I'm looking for the preview one okay it was actually right in front my face there we'll just use this one right here actually all right it's gonna be a PDF file the unique ID for that file it's going to be the ID that was created earlier so it's going to point to the ID in the create create HTML see I'm using crit HTML and there's the ID of that file so when do that let's get rid of my face you can see the whole thing here also alright so we have the create ID next we'll go ahead and hit new step now we want to create the file again now from that convert file so we should probably go ahead and rename this guy also just to be a little clearer here that we that we say convert to PDF there we go so at least we kind of tell us going on there our last file lost it again is to create the file again this time is going onedrive for business and create file ok and where do you want to put this file I'll put it back again in that same same PDI same power apps folder alright the file name I'm going to just hard code this with time being you get the idea that we can we can do some extra work in here and I'll create I create this one called I saw Brian dot PDF we of course would would likely take the PT HTML file coming in strip out the HTML the the dot HTML file convert that into PDF and that'd be the better of solution but we'll keep it real simple now this one's a be really careful this one make sure that you choose the convert to PDF convert to PDF and get the file content from there now we also could go through and say fellow name and actually just pick the file name from the previous step all so let's try that see how bad those okay now we'll see some interesting stuff and we do this let's go ahead and save this now with that now saved let's go back to our PDF and again I'm gonna create some bugs so we can kind of debug those in a moment also so I'm gonna kick create PDF let's go ahead and go to actions go to power automate and we should have a create PDF from gal there we go first thing it's going to need is a file a name well went and passed it a hard-coded name the time-being of tests at HTML i'll call this just you know brian dot HTML comma and then what is a content of that so again this is where i would go through and put all that HTML doc that we did earlier inside of this or i may have a variable that does it or whatnot but in my case i'm gonna go ahead and use the HTML that we've already dropped in dot text now in your case that HTML to excuse me now in your case that might actually say HTML text one i've been doing it over and over again a few times to make sure that what this man she went smoothly so this wooden XHTML one not in your Casa Speer case so let's see what happens when I fire this off now again this is gonna give us some a little bit of an issue but hopefully I've created a tissue we'll see hit create PDF then in onedrive for business we'll see a few files get dropped in hopefully there we go alright ok this little temporary file right here and it was crated but I see a few issues looks like I've got a zero bite there we go so finally it was created there we go alright so we have our Brian HTML and we have our Brian dot PDF let's see how it looks okay so we have it looks pretty good now let's let's find some ways to break this for it now I like to break stuff and show you guys the same kind of problems that you're going experience I think uh problems I experienced preparing for this I want to go ahead and show you guys how picky some of these things can be also so let's go back and tell and see how we can break the process here so our requirements are now done things look beautiful right and this worked out great but this is of course a staged stage item here so look looks like things are working pretty well and I can then return that Brian that PDF from the flow and then actually pop a link there does you download it or email it out so my requirements done so you could hit pause right now our stop on me if you wanted to go ahead anything try this yourself however in my case I'm gonna try to break a few things now so first of all I'm gonna do something really simple to break this and this is just my stuff that drove me nuts when I first started looking at this so the first thing is let's go ahead and submit look seems it's very an oculus here let's let's kind of change the order of some of these things so I've got this th TD TR right here what if I and this is completely acceptable inside of HTML here if I go in just quickly change that around a little bit just make that where it's closing out the row before it closes out the header alright let's see what that does to our PDF now alright takes a few seconds here we should see about a minute ago should come to come turn into a about a minute about a second ago there we go just refresh this there it goes and our day divided by itself so we open us up this time there we go so now we're seeing some weirdness now right then all my my PDF was successfully created however there's no data in it so this is one of the gotchas I found that it's very very picky this convert files very picky about the order of them that the items has to be perfect HTML for it ultimately convert that PDF for you in this canned way of doing things so let's try and actually what we'll fix this one and create another problem of course to fix this we'll just revert there's columns back so we'll go back into our HTML here again and you'll notice everything looks happy like if I actually go back over here again and go back and select the actual Brian dot HTML here we're seeing that the HTML looks perfect right so to debug this will drive you nuts and because it has to be absolutely perfect in the PDF land so I can fix this again by making sure that it closed my header first then my row the other mistake I made was right here I was ending my row here before I ended my detail for the row let's go ahead and create that PDF now watch what happens this time again it'll take a few seconds here there's my few seconds again my HTML looks perfect right HTML is a very forgiving language unfortunately this PDF here is not gonna be very free great for giving so there we go even a few seconds ago and should there we go it will now show you the first row but no subsequent rows it's one of the big gotchas again the HTML has to be perfect and so you might want to use some kind of editor to make sure it's generated correctly from the first moment but if you don't do get things like this so ultimately the order of your TRS and your TDs and your table your table headers all that stuff matters again some of the ways you can expand this is you could go through now and email that out you take the link there the ID that we had out before add a flow step to email that or you could also display a link where somebody can actually click the download and then ultimately destroy that file if you wanted to as well so some ways you can kind of expand the example that means be coverage here I'll put the code for the HTML the all items code down below in the description this video also in case you're trying to copy and paste thank you so much for watching this video please do subscribe to this and hit the metal icon and if you want to us to build an app for you we love to build apps and we have a load of training classes on power apps and power bi and the whole power platform at pragmatic works calm you'll find that link in the header as well thanks so much for watching this video let me have you any questions in the comments below have a great day did I

Channel: Pragmatic Works

Views: 36,188

Keywords: PowerApps, PDF, Power Automate

Id: pCq0SVDmtMI

Length: 17min 9sec (1029 seconds)

Published: Mon Mar 02 2020