Create a PDF from SharePoint Data using Power Apps and Power Automate flow for free

in today's show we're going to learn how to create a pdf from powerapps and we're going to do is we're going to select some sharepoint list data we're going to pull some of the pieces of that put that into the body of the pdf we're even going to grab an image and put it in the pdf for fun but first here's our intro hi my name is shane young with powerapps911 those guys and today we're learning creative pdf and powerapps and what we're going to do is we're going to query our sharepoint data and we're going to select one of our records of our employees list and then we're going to preview what that html looks like that's really the key to making a pdf and then once we've done that we'll hit go and it's going to spit out the pdf with our text and we're going to grab their face picture just to add a little razzle dazzle to it so this is really a core you know intro to creating pdfs we're not going to get super nerdy super deep we're just going to kind of make sure we all understand fundamentally how to build them and some of the common questions i've seen over the years with these so should be fun so let's just switch over to my desktop and take a look okay so over here on my desktop i've got a pretty common power app right and so i'm getting ready i'm teaching a live sharepoint class next week i'm always teaching live classes go check this out but um as i was getting ready for the class next week i thought oh you know what i'm going to build a new demo i've been doing the same demo for so long so i threw together my basic you know we got a gallery over here and then when i gallery we got a form right so that way we can come over and edit the data you know forms work might mess with all that but what i wanted to be able to do was choose something like chewy and say hey i also want to generate a pdf of chewy so we're going to do this now when we do this you can see we get a preview of what it's going to look like and it's not super flashy you can make them super flashy but we're not going to make them super flashy today and then you'll also notice that chewy's pretty little face doesn't show up but that's okay even though his face doesn't show up here it shows up over there right and that's something we're going to talk about as we go through this but basically there's three different sets of html rules as a powerapp maker we deal with right one is how does the html control like html for example it doesn't do table borders it doesn't do images boo how do how does outlook use html so what will okay we put that in a body of an email that's another thing we solve and then last but not least the rules for what gets converted to what as a pdf is a different set of html rules so as a powerapps person we have but three sets of rules today we're really just going to concentrate on the html rules in the control and in flow but i thought it was worth noting anyway what we'll do here is just quickly say create pdf and then as soon as that finishes it closes and if we switch over here and click on demo pdf you'll see that we get a little bit different but very similar so for example notice my color formatting didn't come across but the face did so this is kind of mechanically we're going to work through how to build today all right so instead of like tearing this app apart which i mean we could but i think it's more confusing what we're going to do is just open a new screen and we'll say hey in the new screen i want a gallery right so insert a gallery and then we're going to connect that gallery to our employee sharepoint list and then that's kind of what brings in the data bingo bango right so there's some sharepoint data now the other piece of it is we're going to end up with a html control so here under text we've got the html text control you don't have to use this but this gives you a way to preview and see what you're doing so especially when you're trying to learn this is going to be one of your best friends to to do and so to create this you know i keep mentioning html i should probably mention the process right and so really the process is three steps one we're going to create html that represents the pdf we want to do so we're going to create that html over here in powerapps or it could come from somewhere else but for us it's going to come from powerapps we're going to send that to flow flow is then going to go through a three-step process here i'm just going to show you this real quick flow is going to create a file and then it is going to it's just going to create an html file right so it's going to create a file called demo.html and call whatever you want but it's going to use the html that we send from powerapps secondly once we've created an html file we're then going to convert the file this convert file process doesn't actually convert the file it just says hey this is what this html file would look like if it's a pdf kind of writes it on its hand is the way i explain right it's got it cached so the third step is we can then create a file using the output of this right we're going to build this in a second i want to kind of see why i keep mentioning html because really to make a pdf you have to make the html and then flow does this portion for you so we'll go back over here nope go back over here so whatever we send from here is going to be what we make into a pdf now if you're not familiar with html and let's be honest i was really good at the 90s and i got really good at it again recently with powerapps and power automate but in the middle i kind of forgot how to use it so what i often like to point people to is there's something called w3schools and so they have a whole set of html tutorials and so we can grab stuff from them and then kind of fill in the blanks for ourselves so for example if i go over here and say hey i want to do html paragraphs and then if we kind of flip through here and back all right well there's this one there's this one so here's the one with html horizontal rules i don't know what does that mean well say try it yourself this loads their little triad editor maybe if i ever press it and so when this loads you can see that this html spits out this over here right one for one we don't have to think at all so if i just take this and copy it ctrl c and then we switch back over to powerapps and so here right the html control just wants text it doesn't care how you get there it's gonna be very important you think about that right so we know that text goes between double quotes so i can just take what we copied from over there and paste it directly in here and look we get the same results that they had okay and so now that i realize that that spits out that what if i wanted to make this dynamic so what if i wanted to say hey um up here in the heading you know we might say employee info and then for the paragraph we wanted we said first name right so we said first name now we could just do first name and chewy and if we look now because we're just filling in data in the tags right employee info first name chewy all right but what if i want to make it dynamic you probably do right so now that i know that right here is where that goes i could make this be something different right so for example i can make this attached to our gallery so what if i just said hey i want to close that i want ambersand and i want to open that right so that should fix it everything's good we just have a blank spot there so we know where this amber sand is we go with the first name so we could then just say gallery one dot selected dot first name and then an amber stand after that and lo and behold right we've got nicola's record selected we're seeing hers if we click on chewies we see chewy greg we see greg right so this is letting us make our html dynamic based on the record selected so when you looked over on the other screen where i had all those fields i just repeated this a whole bunch right so i could just copy this line i know that works for first name yeah go right here and paste that in and then we'll just change the hard-coded portion to last name and then say gallery selected dot you guessed it last name and now we've got first name and last name so then you could just rent and repeat through all the fields that you want or if you want to have first name or you want to have this you know let's do another one if we wanted to have a third line what if we just want both names in the same right so full name you know how to do this right gallery selected first name amber sand space space space amber sand gallery one dot selected dot last name and another amber stand right that's just your normal powerapps concatenating string making the text but now that we wrote that now we've got full name here so same thing you're just able to go through those so you know that was one section right another section here was i was like all right more data i don't know i probably said something different but more data and so for this one i didn't want paragraphs i wanted it into some type of ordered list right if you remember from the preview what do we have over here oh let's go back over here let's just click on it again so we can see it so we had the dots all right so we'll go back over here how do you do dots that is called a list so html list over here on the left and then if we click on that look there's unordered lists which are the dots and there's ordered lists which are numbered well i went unordered so there's an unordered list example i'm gonna say try it yourself and so you can see that this is what an unordered list looks like cool copy we'll go over to our app oh not but not that screen we're fixing this one and so we'll go right here we'll paste this in and make sure that it works more data coffee tea milk awesome and so then now we know everything between these lis is what we're looking for right so here i had department and then we wanted to say close that right and then ambersand gallery one dot selected dot department and then amber stand again and then open that one and we should now see is the first item department executive what if we want to make department bold no big deal put a one of these little bee wrappers around it that's how you make something bold and whatever right we could go look that over there but now you see department is bold or if you want to have this in a table instead of an unordered ordered list you just need to come over here flip through these and find the html concept that you're looking for um the same type of thing like if i wanted to make that text purple so i messed it up in the demo you saw it didn't go through so i'm going to try something different we'll go here to colors and so you can see that there's a way to make background colors there's a way to make text colors inside paragraphs border colors there's different color values that it supports so lots of different ways to do colors cool but it looks like at the end of the day it's really a style type of thing so let's go up here text color so that should make this lovely little tomato color i think it's more orange than red but whatever who am i uh oh i need to make sure i get that closing thing right so highlight the right stuff to steal copy and so if we go back over here and we're like all right so in here we know that we have um this and what if we paste that in now you notice right away i get an error okay why what did i copy from over here let's go over here and see what i copied it'd be easier to understand what i stole oh it was right there so you see it right here i stole style equals double quotes color tomato blah blah blah double quotes remember powerapps trace double quotes of the text delimiter well it turns out that html double quotes and single quotes are interchangeable it doesn't care it uses them either or so when you're stealing something like this if it's got double quotes the easiest thing for you to do not to have to think about it is just turn all their double quotes into single quotes to avoid any confusion look at that now it's happy so style single quote color tomato single quote and then t and so we should see tea in that tomato color so instead of tea we wanted to do we want to show their favorite color so we're going to go right here right so we're going to do this kind of thing again and then we know between these two amber sands is where it's going to go and i'm lazy so i'd probably really be copying this all the time control c control v favorite color now favorite color errors oh my goodness how many buttons can i press favorite color errors why because it's a record so what is that it's because favorite color is a choice column over in sharepoint or dataverse so favorite color dot value gets me the word and in this case gives me the word orange which is a valid color all right and so then now what i'm going to do is right here for the style color i'm going to make this portion i'm going to replace tomato with a dynamic value so we know that this returns the word orange or yellow or green whatever color i just chose so i'm go here i'm going to delete this i'm going to do a double quote and a double quote and then an ambersand and an ambersand and then right in the middle we're going to paste it in so that way the color is getting filled in dynamically so we should see now that's orange if we click on the cola who's blue we see blue greg is blue i'm orange chewy is power purple it's weird that power purple works over here but it doesn't work over there let's we're not going to question it we'll just use greg there you go so hopefully you're seeing how that would work right and then last but not least let's just replace milk we won't do any fancy coloring but what if we wanted this to be um hourly wage right we're gonna do bold again so bold hourly wage and then we'll quote we'll close this into space there we go and so what is this going to look like so for this one we need to boom boom do this item dot oh it's not this item no it's it's our gallery one dot selective it's not favorite color it is gallery selected dot hourly wage yeah on the video you're probably like shane pay attention i get confused it happens now if you notice though this shows 755 and remember you probably want that formatted to actually look like currency so you can still just use your normal text function around this so text gallery one selected boom boom boom and then dollar sign doom doom doom doom doom doom doom and then now hourly wage looks like seven dollars and fifty five cents because remember powerapps doesn't care what you do it just wants text it doesn't care how you get there whether you do a calculation a lookup a formula and if it doesn't care it just wants to give you what you want to give it here so please don't overthink this if you can make it say it you know no matter how you get the data there it doesn't care so that's why i'm trying to purposely show some different little pieces all right for the third section i don't want another one of these just wipe this stuff out whoop and so what do we want we're going to do we want to do an image so to do an image this is harder right so i have a whole video on this i'll make sure i put a link up there so you can go into more detail but i'm going to give you the faster version of this here but basically what image tag works it's gonna be image source equals and then right here would be the base 64. it can't be a url yes a url is valid in html land it's not valid for the conversion process it has to be the base 64 of the image so image source equals the base 64 goes right here and then you would just close this and if you wanted to have to control which we're going to need to we're going to say and if you want like style equals and then you can do something like width and then 200 pixels semicolon height 200 pixels hopefully i don't have any typos in there but we'll find out when we test in a minute 200 pixels oh single quote okay so then what we need right in this spot right here is the base64 of the image so to get the base64 what we're going to have to do is we need to process that through an image control so i'm going to have just have it when you press this button we're going to say set var face full face we'll call it full face bar full face and then you're gonna use the json function and you're going to pass to it the image control so notice over here on the left it is image one so that is the name of your image control so you're going to do image1.image so whatever picture is showing up there in this case nicole's pretty face whatever face is showing right here that is what is going to get processed in there okay and then you have to tell it the format so you start to type in json format and you need to use the include binary data and close it like this this is going to create a variable that is going to load the base64 of that image which is what you need so you don't really have to over think it opening one more closed parenthesis but by pressing this let's do it for chewy again nope not chewy because he's that let's do greg i'll do greg's face so now that var full face has what you need so you can go back over here and you're gonna say hey image source and then right here you need to oh image source equals and make sure you don't have any goofy spacing here so amber sand like so and so then between these two amber sands we're going to have var full face now when you load the face in there it will make your html text control slow so do the um the image portion at the end because it makes it harder to work with this control when you've got that in there because powerapps is trying to preview it all the time and then you'll notice that powerapps here doesn't preview it but what we're going to see is that when we get to the other side it will show up so there you go we've done the powerapps side of this thing okay so that means now we need to switch over to flow so we go to flow we're going to create a new flow say okay and it's going to it could be an instant cloud flow but really what i'm going to do is hit skip here because what we need is the trigger to be power apps so select power apps now there's a v1 and v2 trigger here either one would work fine um just whichever one you work like the steps are slightly different so we're going to use v2 so if you're following along use v2 if you're comfortable use whatever one you want v2 and so what are your inputs we need one input we need that html so i'm going to say add an input text and we're just gonna call this pdf body okay so then we have three steps i told you already right new step first step this step has to happen in one drive for business so file has to be inside of onedrive for business this step right here tell it where you want to create it i'm going to have a folder called pdfs it doesn't matter but this does always get created in whoever presses the buttons um onedrive for business shane can i do it somewhere else no it happens in onedrive for business stop arguing with me you can't change it this is where it happens so i'm gonna put it in that folder for the file name you could pass the file name over from powerapps i'm not going to bother but you could you could dynamically compute the file name do whatever you want i'm just going to call this hello.html right because right now we're just creating an html file for the file contents then pdf body is what's going to go into here okay so this is your first step you can't do this step differently this step has to happen here second step also has to happen in one drive and this is called convert file so convert file preview and it's been in preview for like 10 years it's just i don't know it's going to stay there forever don't overthink it but i'm going to go here i'm going to select i'm going to find that same pdf folder because that's where i want to put them you don't have to put them here i'm just doing this and then all right now i'm doing that wrong i'm sorry i lied for this you're going to use the dynamic content from create file i forgot so this is the id of the file that just got generated right here that's all it wants is that id boop and then the target type is pdf um you know there are other things in here i've never messed with any of those i've always just done pdf but what's important is this step is not changing this file it is just reading this file and saying what would this file look like if it was a pdf very pretty of course and so it has that kind of written on its hand it's ready to go but it hasn't been used okay these two steps have to happen like this the third step technically you can do whatever you want now so if you want to create the file on sharepoint into azure blob if you want to just attach this file to an email send it to some web resource i don't care right we're going to just create it here in onedrive again so we're just going to create file again but this third step you can absolutely do whatever however whatever you want at this point so i'm just going to do this i'm going to do this and i'm going to go back to that same pdf for so i was saying a second ago and then for the file name i got to make sure i name it pdf right so we're going to call this hello pdf and then for the file content it is not your asking powerapps right that's html you need pdf so from the convert file action it is this file content one two three that's it we'll call this pdf video so let's give this photo a name we'll say save saving took way longer i got tired of going okay now that it's saved we're gonna go over to our power app and we need to add a button to deal with that right so we grab our button there it is and so on the button what you can do here is you select the button you go to actions and then power automate and so then we're going to say add a now we can either create a new flow or we can search and so we're going to search for what i call it video pdf and so it's not here um right is that what i named it i forget already pdf video let's just type in exactly that all right so it's not there so then what you can do and this is a new interface this interface just showed up today for me hit the ellipses here we can say re refresh this should go get all the new ones again and then now if we say pdf video yay it's there this adds this is a data source that adds the flow as a data source into your app like powerapps is the case of the slow mondays and there you go and so then now we go to this button we're going to say hey you i want you to pdf video so whatever your flow name is dot run and then it says all right what do you want for the pdf body you want this html text control which i believe is called html text two so html text right there's my previous one text two and it's not it's not that it's dot html text okay so that is what i'll say is run this flow by sending it whatever is in here and so what we want we see it looks good we'll say play we'll press this button all right that looks done we'll go back over here and i guess let's go straight to the folder that was jeff from earlier and so if we do a refresh we should see hopefully hello.html so the html file got created and then the pdf file got created that's all we really care about we'll click on that and look at that there is greg's ugly face blue is blue everything is formatted out so even though his picture doesn't show here it shows over there because because powerapps likes to aggravate you okay and that's that's what um you know we did on the other screen right the other screen all i did here was i kind of you know i made it much nicer looking i added the pop-up added some little pieces but then the day it was the same process and i the flow was just the one thing now if you want remember you can always go out to training.powerapps911.com and subscribe to the curated library the youtube library whatever we call it these days the library out there and you can download this full working app if you want this exact thing but the core principle of how do i create a pdf from sharepoint list data that is in here right you've now seen how to walk through this now there's a couple of questions i think that you probably have at this point um so here's some of the common questions common errors that i ever get asked about can i use this to make a landscape pdf no the free conversion process only does portrait up and down pdfs if you want to do anything that the free converter doesn't do right everything we've done thus far has been free there are third-party products that do that for you um for us it's it's a company right like i don't officially recommend anyone but the two that i most commonly use are in kodian and cloud immersive um so that's one thing to consider right is you might have to go third party if you need to do fancy things but not all fancy things right for example if you wanted to take this image and put it in the middle then you'd put this in a table and then you'd center the image control inside the table the same if you wanted to put the image over here on the right you put this whole top section in a table and then this would be one column and then the image would be over here in another column right so if you start finding yourself wanting to manipulate where and how things go on the screen use tables um you know the other thing you might be thinking is like well how far down the rabbit hole can go right this is pretty boring and ugly i get that i have um you know the biggest one we ever did for a customer took about 40 hours to bank of eight so 40 hours of just writing html but what it was we had to replicate a government form one for one and so i had to like literally like sit there and figure out how to make all these things i made dynamic uh shapes inside there to like show the work that they had done so you submit that to the requests i put signatures in there and all these things right so you can go really really far with this um if you want whereas you can also probably more commonly do for people are things like invoices or purchase order requests or you know inspection reports so different types of things like that another thing that will sometimes get you is the conversion process only works up to about two megs so if your files are too big like especially if you have a lot of images it's real quick to run up against that two meg limit in those cases we go to a third party type of tool and that's typically the answer there i do have some other tricks up my sleeve there i just haven't made videos on them yet around other ways to get around that but for today i would tell you if you're like hey i need to have 30 images in my inspection pdf you're probably looking at one of those third-party providers yeah all right i think that's kind of the most common stuff right hopefully this helps you guys create a pdf um you have questions comments you want to see me go deeper put it down below you know we've done some really deep content in some of our different uh live training classes where we've wanted to really nerdy stuff but you know shading borders colors nested tables all of that stuff you know really complicated designs that's all really possible you just have to know how to write the html and remember that just because you know for example right powerapps doesn't show the image it's like but remember that the html you know there's three different rules right there's the html that works in the powerapps tool there's the html conversion rules and there's html outlook rules and they're all a little bit different so sometimes you have to solve the problem differently right colors shading spacing formatting that type of stuff table like you know there's seven ways to make a table look different and only one of them works in the conversion process so you just have to kind of keep trying stuff until you find the right balance all right that is enough for today so with that i'm going to say thanks and have a great day hey me again before you go click on the subscribe button right join the list of hundred thousand plus people that have subscribed already or if you need any help right check us out at powerapps91 we do big projects little projects we do training we do everything and we can help you or if you want to see more videos you probably do then just click on the playlist above cool thanks and have a great day

Channel: Shane Young

Views: 60,824

Keywords: Shane Young, powerapps911, PowerApps, Power Apps, sharepoint list to pdf, powerapps sharepoint list to pdf, create pdf power automate, powerapps create pdf, powerapps form to pdf, powerapps sharepoint create pdf, convert sharepoint list item to pdf with power automate, power automate pdf, power automate pdf creation, power automate pdf generation, powerapps pdf, powerapps pdf generator, powerapps pdf generator using microsoft flow pdf converter, power apps create pdf

Id: pFlwYy8ijiA

Length: 29min 22sec (1762 seconds)

Published: Tue Apr 19 2022