Developing Microsoft PowerApps - Exporting to PDF

how YouTube and welcome back to Chino does stuff it's fabulous to have you here today we're going to be continuing our journey with marks of power-ups and looking at PDF creation creating PDFs is something that I get asked about over and over again not probably built 100 or I have literally built hundreds of apps for business owners and business units and I get asked this over and over again can we be can we export to PDF or can we export some kind of output to PDF this is something that's really important something that you're going to need to roll into your parrot for absolutely sure at some point someone's gonna ask you for it you're gonna need to know how to do it let's get started let's get going and let's get on with today's show so today we want to I wanted to like I said in my intro I want to show you how to export some data to PDF so I think what we'll do is we'll put a PDF button on this screen and we will PDF this data that's coming from this record now there's going to be a really simple example and I'm not going to go through a lot of not going to take a lot of time formatting and that kind of stuff so really it's just going to be very basic but once you have those basics down you should be able to add or your own flourish and and and put your own formatting in there using HTML and just standard HTML and make these exports to PDF look really good alright so let's get cracking on this the first thing I want to do and again like I mentioned in the intro the PDF conversion stuff actually we need to bring we can't do it all in power-ups we actually have to do some of that in flow now flow will it it's only really one degree off having this functionality directly in perhaps it just means we've got to build a flow and then we call that flow fom power-ups and the power ups and flow so tightly integrated all that data exchange and and that is just handled really smoothly so hopefully you get a good grasp about when we go through and set this up so the first thing like I said the first thing we need to do is set up a flow I've got a couple examples here already that I've been playing around with but let's create a new one and we're just going to choose a blank now the first thing I want to do this is the by the way this is the flow interface so you can see I'm on I'm on the flow website to create a flow here so we're not in power-ups are actually in the flow creator so first thing we look for is power-ups so this is my trigger so what I'm basically saying is I want to integrate this flow with my powerup and that's where the trigger is going to come from so I'm gonna call this flow from my power app and it's going to start that those flow actions alright so the next step I want to do is I want to create some variables now what I'm going to use these variables for is effectively passing data from my power up to flows so then it can action on it and I'm gonna need two variables one variable will be the HTML data that or the HTML string that I'm going to send from power I'm gonna generate in power-ups from the data from my gallery data I'm gonna pass this to flow and flow is gonna create a PDF and then and then going to save to SharePoint so I'm gonna save that PDF to a SharePoint and library so except the first variable so if you want to initialize a variable we will call this and still call it pick a name for it that makes sense and this like I said this is gonna be my HTML data that I'm going to generate my PDF from and the value here so when I click on the value field I can see that I can I can see it doesn't really know where I'm gonna get that data from but if I click on show more let me just see if I can get that back if I get click on see more it has a it has it like a good guess of what I'm where I may want to get that data from so I want to get that data from power ups I'm saying to get this variable I'm gonna ask power apps for it okay so I want another variable it's like I said oh I've got 2 parameters and this is also gonna be initialized variable this one I'm going to call file name strength and I'm going to ask power-ups for that one as well alright there are two variables alright the next thing I want to do is actually create the file so we need to do that in one drive because one drive is the only place where we have the functions to create the PDF at the moment don't I'm not entirely sure why they're only available in one drive but we need to use one drive even if we're just using it temporarily to generate our PDF and then of course once the PDF is generated we're gonna say that to SharePoint so let's go create file and I'm going to choose I've already created a demo folder in my onedrive and the file name okay so I'm ahead of myself a little bit here one thing I also want to do because I'm going to be passing this string I'm going to need another variable so all I want to do here is I want to take on a course var full file name this is something I discovered just with experimenting with this full file now Emma and it's gonna be a string and in here I want to run a expression and I want to use cout cat now this is see this is a syntax any two years only to use this variable function now powerups does something really annoying at this point it starts popping up help windows it gets in the way and it means you basically can't see what you're typing but if you just ignore it and you're confident you know what you're typing it it'll work see what I mean it starts popping up the help window so in this variable we want to actually put open quotes and we want to take that variable filename VAR okay so we're reference that fallen and so we're using the concat because we want to create we want to add something to the end of that filename string and in here we want to put dot HTML because we want when we're creating the file we actually want to create it with an extension now this is one thing I've worked out while playing around with this if you don't put that file extension on the end it doesn't actually it arrows out and it won't create the files and make sure you you add an extension to that file name now we've got our full file name here so now our file name is going to be var full file name full file name and the file contents now again Paris isn't is unsure what we what it we want to put in here but if we go see more we know we want that contents we want to be the HTML we're passing from our power up all right so that's the file created the next step we want to do is we want to convert that to a PDF again that's a one drive function and the function we want here or the the year the function under one drive we want is convert file using path now in here we want to select the path so what with what we're doing there if we roll over this we'll see a little pop up here saying I'm gonna create I'm gonna generate that PDF using the create file in the create file workflow item and the path the the exact path to the file that's returned back from this create file action so that just we can grab that automatically through the dynamic content on this convert file using path so again we just select path for that and the target is PDF so that's all we need to do there but what this is actually done is this PDF is still stored in memory it's not actually we haven't saved it anywhere yet so the next step we need to take this PDF that's in memory and we need to save that out to SharePoint so let's create a new step and you know we could also be saving this back to onedrive but I'm just going to choose SharePoint because this is probably a better for a real world scenario like it's most likely that you're going to want to have this in SharePoint somewhere so that way it's accessible it's you know you may push it into a project site or you may push it into an application site where you're the site that your application is already sitting or like hosted in well where you're linking from your your credits and supporting document libraries and so forth and that this is where you'll save or your PDF attachments you may even use SharePoint as a temporary location and then and then you just link to that and when the user opens that link or you navigate to that link and then the user has the option to save the PDF to their hard drive or to another location so the option we want here is create file in SharePoint now here's a it it's looking for a SharePoint site address and document library and we're going to give it a file name and some file contents as well so first up I'm just going to grab my my demo document like my demo SharePoint site that I've been using this whole time just pasting okay so this is we just need to say use a custom one we haven't used that one before and that's fine except that now in the folder path if I hit the little little folder file I'm going to chuck this just for this demo I'm gonna chapters in shared documents library but you may choose a special document library for your application that's fine as long as it's under that site it'll be visible now in here for the file name we actually want to take so this convert file using path option has returned two values back to us now these two values are the ones we're going to use here because we want the file name of the PDF that's been created and this is available see how under our dynamic content it's saying well under the convert file using path option we've got a file content that has been returned and we've also got a filename that has been created so we want under file name we want to choose file name and under file content we want to choose file content and let's save that actually I have given that a really terrible name but let's just call us something else let's call this make PDF and score three so the next thing we need to do is wire that into our into our power up so far about power let's open up that option alright we've got this screen so let's just drop a button down it's a little bigger it's gonna call this export to PDF now in the actions choose the actions up on the top menu and we wanted you to flow this time so I gave they're really terrible name unfortunately so let's if this will probably refresh after a while so that's okay so let's just click on that we'll add that this should come up with the correct name here just for some reason this list takes a while to refresh so if you have rename if you did save your flow is just a default name and then you go back and you have a look and you go well what's this junk this will refresh after a while so you may after you've closed down your power up and then you get back in you'll see that that has refreshed but you can see once it's selected it has chosen the correct name here for the flow call so on our button export to PDF we've got on select we're gonna make PDF run so if we click in here we can see our workflows it is wanting to parameters because remember we we put in our workflow - asks two variables that are asking power ups for their values so if we go back to our flow go up here we can see our first one is our HTML and our second one is our filename these are we in order go back a run our first one is our HTML right so we've gotten ahead of ourselves a little but we still need to create some HTML to to push in here so let's go and do that and the way I like doing this I played around with different ways but one of the a kind of really nice way to do this is create a new screen that's where idled on and I'm just going to call this PDF and in here I'm gonna drop this control not that one and he dropped this control called HTML text so this is going to show us HTML now I've got a little dem just got something I can cut copy and paste in here to make this a little quicker okay so if you know anything about HTML and you're really going to have to know a little bit but to do this you see this is a standard HTML document that I've pasted in here and you can get this from you can get examples of this and they you know this boil play you can download or you can google this and you can get an example of this anyway so this particular one let's we won't need this style yeah we're not gonna need any of that this is gonna be pretty straightforward and we won't need a table so what I'm gonna do and I'm hoping like I said I hope most people here know a little bit of a HTML so we could see this is a string and we can actually concatenate strings together here so what we want to do is from screen two we want to select well this is our h2 tag so let's just put title and then create a div under it and if you know your HTML you you must be getting a little excited at this point because you're thinking well we're just gonna be pushing HTML to the PDF we could do a lot of really cool fun funky formatting here and you know I've had a little bit of a play around with it and yeah you can you can format this really you can get the formatting really nicely really looking nice okay so let's let's break this string this week we're effectively what we're doing here we're connecting two strings together and in here I want to put on a reference my title field dot text so this is just our title field fun screen too [Music] yeah because I'm kind of lazy I'm gonna just paste that in again next one is description and if you know anything about JavaScript this is like very similar to how we would do this in JavaScript where we're just connecting these strings together using ampersand now in here we want we have description field and that's this description text again perfect might show let's also show very created by [Music] and create a date it's that other field the oldest text fields all right I think I think that'll do so like like I said this is really super simple let's call this PDF export so that's just our HTML field that HTML control we dropped onto the page all right so if we go back to screen 2 and in our button here we want two variables remember first one is our HTML second variable is our file name first parameter will be our our PDF so we select and select our PDF export HTML field dot and the property is HTML text which is the property on that particular field a little bit different from the standard text field so we're selecting HTML text second one is our file name so in here we want to I'm gonna just call it export let's call it record number so that's it's the first part of our string and I'm going to attach to that gallery 1 so that's our gallery whatever we've selected which is a data we're looking at it on screen too and I'm going to choose the unique ID so this is the first part of the filename that I'm sending to Flo it's actually let's just get rid of these spaces as well let's hit export to PDF kind of nervous now let's have a look refresh and bang we've got our PDF created from that record if we open that up we can see our PDF has been generated so the other thing I'd like to show you and we're gonna use exactly the same flow here but we're gonna get a little tricky with our export because I also want to do an export to PDF on this view now this is just a touch more trickier let's insert a body it's cause the PDF so with this button we want we want the user to be able to hit this and export this entire list to to PDF not just an individual record so we'll need to go over to our our a PDF screen and we're going to insert another because this is a different export we're gonna insert another HTML this one let's copy my definition so in here here's our PDF our HTML document again but this time I have a I have to find a HTML table and this is really the easiest way to display grids is just use a HTML table but like I said you can get way more interesting you can create way more interesting HTML than just a HTML table to create nice grids on the page alright so with the with the HTML table we want to create rows of data now what we want to do here is we want to use so let's like with the other example let's let's break the string and in here we want to use a concat function so what can cat does it takes a table of data or tabular eyes the data and it will can cut them together into one big string or one big output so we can mix and match data from our gallery so we can point we can we can assign can point the our gallery to Kinkaid and we can mix and match that data with the HTML data dead HTML strings and we can generate correct output so that our table within these two table tags we get the correct HTML rendered in this screen so let's give that a go so our first field he is gonna be our first parameter here is gonna be gallery 1 but we want to you we want all items from gallery 1 now our first field we want to show is well first one first thing we want to do is we want a TR TR tag and TD tag is that is standard HTML table formatting TR is the row and a TD is a a cell in a table so the first soul we want to show we want to show the title [Music] the title field now with every HTML we need to close the tag so we're just closing the TD tag and we want another cell [Music] okay so we want another open TD so we're creating the second sell across and we will have twice that and we want L description so we're picking columns from a gallery now let's say wait closing that Tiki again and then we want to open the TD and let's select let's select the created boy splaining created by is a per as a profile for the profile field so that's why I've had to add what property I want out of display are created by it's not just a text value that's returned back by the column column like these two are created by it's a special column in SharePoint that is User Profile field so that's why I need to specify further all right so credit by and let's just add one more cell and we want they're created [Music] now we need to close off that HTML so it's it's a /td is closing off that particular TD tag and then we want to slash TR which closes off the row and that is our concur so we took that all together right so we have Alcon katia that will go through every line in the gallery all items and create a row HTML for each each line in their gallery you can see we've got generated HTML and this isn't not really well formatted here but I'm just going to leave that the way it is because it's really for this example it's fine okay so let's let's go back to screen1 let's actually let's just call this field PDF export sport - okay so on the screen one let's take our button and on select we want to call make PDF three and here when you want to pass it the first parameter remember is our HTML so we want PDF export to it just like with our other PDF button export to HTML she HTML text second one is gonna be our parameter let's just call it PDF let's go ahead - board we're gonna join that with gallery 1 and whatever we selected and the unique ID so we'll always have a unique ID at the end of that file closed brackets let's run man give that a go hit export to PDF to go over to our document library said refresh alright we've seen another PDF there so far so good let's open that up fantastic and we've got a although looks like I messed up by HTML there but it's still better to render it okay but as you can see we've got a really nice formatted PDF that is a grid view from our gallery this could be from SharePoint this is this is from a SharePoint list this could be from sequel this data could be from an Excel spreadsheet any any tabular source any repeating data source and we've done that conversion through PDF through our flow workflow okay so that is PDF in empower apps hopefully you liked that video if you did hit the like button and subscribe because subscribing tells me you're really liking what I'm doing and you want to see more of course if you have any kind of feedback please leave a comment in the comment section because all of that stuff helps me and gives me encouragement I thank you so much for watching YouTube I'll see you in the next video [Music] you

Channel: Chino Does Stuff

Views: 80,042

Keywords: Microsoft PowerApps, PowerApps, PowerApps PDF, PDF exporting PowerApps, Exporting to PDF, o365, Microsoft Flow, Flow PDF, Flow and One Drive, Exporting to PDF in PowerApps, SharePoint Online, Office365, SharePoint, Export to PDF in PowerApps, Export to PDF from Microsoft Flow, PowerApps Tutorial, PowerApps Help, PowerAppsTutorial, PowerAppsHelp

Id: IhE0-HumNNo

Length: 33min 46sec (2026 seconds)

Published: Sun Dec 09 2018