[New in PowerApps] The new PDF() function is a gamechanger

high power efforts we've got a new experimental function in powerapps which is called PDF and data it creates PDFs inside your canvas apps and PDF creation is something everybody goes crazy about everybody likes because we needed to create invoices or certificates or anything and then we can directly mail it in Outlook without using power automate at all or we can use power automate to store it somewhere on SharePoint or do anything else with that file and this function is not very well documented at the moment so let's go over the basics how you go from this from our low code site to our PDF site right here let's get started after the intro foreign [Music] So today we're gonna do three and a half things and maybe first of all I'm gonna show you what you need to enable so you can use this new experimental function and then we will talk about the parameters you can use with this function and in the next step we will see how we can create Pixel Perfect um A4 page sizes and then we're gonna really briefly look at how we can use the created file not just to display them but to use them in Outlook or pass them to power automate first of all we need to head to the settings and then we go to upcoming features head over to experimental and there are somewhere should be the PDF function right at the bottom and we need to turn this on standard this is turned off so turn this on to follow this tutorial or you can simply download the whole app you are seeing right now it should probably be in a few days on the official PNP repo or on my GitHub info link is in description or up here first of all we're gonna start with a pretty simple example what you probably want to try out first print the whole screen and yeah store it in a PDF file and display it in a PDF viewer so what we want to do first is create a screen and put some elements on there and then just use the PDF function to create the PDF and view it in a PDF viewer control so let's go over the function and the parameters that are involved in there on my on select first I want to hide the controls the PDF viewer and the button because normally there are some controls you don't want in your PDF which are on your screen and this is the PDF function right here and we want to store it for the moment in a variable and we can use this variable afterwards as an input in the PDF viewer so this is the actual PDF function the only needed parameter is the Target and we are targeting the screen which everything is on you need to Target something that is on the current screen or the current screen so you can Target something on another screen and then we got some other parameters right here and right now as of today there is no real documentation for this PDF function but luckily we've got um hero he has the block mobier more power I will show I will show it on the screen really quickly so this is where I got all this information this is in Japanese but you can translate it and then it's yeah pretty well written article and we have the parameters right here I will go over right now on my screen so big shout out to Hero um I will link this block in in the description as well if you want to look at the original source of this so the most important parameters are the orientation do you want portrait or landscape size and then which paper size you want I chose A4 because in Germany basically everything comes in A4 I don't really know how it is in the US um this is the margin the margin on the sides so I chose 20px for all sides you can specify it for each side on its own and this is the expand containers so this is necessary if you have something with a scroll bar and want to display it on multiple pages and we're going to do that in a few minutes and another really important setting is the DPI the dots per inch how many pixels should be printed in one inch and we commented it out because standard is 96 but you can choose another value right here but 96 works pretty well and then afterwards we just unhide the controls so what happens when I press on here controls vanish because they are coupled to this variable and then it actually takes quite a while and it's not finished yet I cannot click anything right now because um yeah using pictures and now we are kind of finished yeah using pictures uh results depending on the pictures in a little bit bigger file sizes than you would be used from a PDF more about that in the next minutes what works and what doesn't work so this whole thing is fitted to the width of the screen and then we have white space underneath because the screen is not big enough um yeah but that's basically how the PDF function works and let's head over to next screen where I show you how to do this a little bit better yeah the next next step we will look at what we can use this function on as well and we will use it on a container so let's look at the function once again the only things that we changed is we didn't choose the screen but the container you see right here and we changed the margin to zero pixels for the moment so I can show you the math involved in whole of that to get your Pixel Perfect um A4 size so let's hit the create PDF button again this has the ratios of a A4 page um but it's actually too small to fit the whole page so if you make it bigger I programmed it so the ratio keeps the same and then we will actually use the whole page but now we are about a pixel 2 big right here so this type let's make it one pixel smaller and then it should fit a page perfectly yeah we got this small white lines on the side but yeah you probably won't choose this color as your background you probably want a white background so this um yeah wouldn't be a deal at this moment so um let's talk about what happened right here we will leave this minus one pixel right here so um let's get into the math involved I have a calculation right here let's display it make it a little bit bigger and a four page is eight and a quarter inches wide and we I said we use the standard DPI of 96 so 8.25 times 96 calculates to 792 pixels so when we choose to use a width with less than 792 pixels then it doesn't get fitted to this A4 page and we can see this really well if we use something close to 792 then we only have a small border right here and if we choose 792 or more then it uses the whole width of the paper right here of the page right here so actually of course you can do this with every page size just use Google to find out the width of the whole thing and then multiply it with the dpis you use and then you get the pixels you need to set the width to to get this whole thing working and when we use something larger then it gets again fitted to the page but you see the text is now a little bit smaller because this whole thing is um is bigger but this is the math involved and the A4 A3 A5 formats and so on you can calculate the height from the width when you multiply it with the square root of 2 and this is what we're doing right here to get the perfect height the whole time and let's replicate the problem again that it jumps to the next page so you see now it's I think it's kind of a rounding error when it's a little bit too much then the last pixel is on the uh on the next side and it will create a new page so we have to experiment a bit to get the right values and to be on the safe side for just one page just subtract one pixel and we are safe we are good to go and now you can of course design this whole thing just like you want and create your perfect one-page PDF for like I said in the beginning a certificate or an invoice and if you want a nice preview but your your screen is too too small I've used 1 200 pixels at the height which is more like normal full HD resolution um you can of course do another thing and decrease the DPI from 96 to something like 50 and then you don't need the whole um more than a thousand pixels to get a full A4 page so we can be uh smaller right here and this works not quite we need to make it a little bit bigger so okay this seems to work so when you want to use your standard um your standard like 950 000 pixels is what I use for desktop apps normally you want to use this size just decrease the DPI and then you can do smaller containers to have everything working on on one page and not overlapping the page so you have a good preview so let's go over the ideas from the intro right now and you will find this screen in the demo app as well the other two are not included in the demo app um yeah let's make this big for a second and in preview mode so the left one is an SVG image and the right one is a PNG image of course it's the same image but different image formats and yeah one thing I just found out I want to tell you right here is um the SVG image didn't uh didn't make it into the PDF so yeah test really well what you are trying to do and another thing that I found out is bold texts will not be both in the PDF anymore but what does work is using the pen input to create a signature so probably if you have done something I think this is for a invoice for a plumber you can sign at the spot at your customer let your customers sign anything on a tablet do um do some signature right here of course this works a lot better on a tablet you see this preview it already works and then we have the app dated PDF right here so let's look at the PDF function I'm using here basically the same as before but we are using a margin of 20 pixels so my container calculates not to um 7 and 92 but we are subtracting and 20 pixels for the left side and the right side and then we are at 752 and the height is resulting not in 1122 but 1082 pixels you can copy those values together with the margin and get a pretty good result I think um so single page PDFs checked actually pretty easy to do so let's take a look at some more advanced stuff let's take a look at what we can do with galleries right here so this is a gallery right here again we are using a width of 752 pixels and I height of um 1082 pixels again and a template size of 1082 pixels so each Gallery entry or each each card of the gallery will result in exactly one page again with the 20 pixel margin so let's scroll to the through the PDF we have different sections we will go over that in a second and this is the last page let's generate it or actually set the pages in The so the pages to four so we have the start page and then we have two filler pages and then we will have the last page and this is the result again the problem this is not bold anymore and then we have two filler pages that have a completely different layout and then this is the last page with another layout so it could be something like um this is the invoice these are terms and conditions and the last pages I wish you a Merry Christmas or something something else how did I achieve this look the gallery itself only has a sequence as a data source so um it's the number of pages that I used in this slider and this results in a table with just the numbers one through four then I set up three containers which exactly match um the pixels of my gallery template and the first container the first section is set to this item value equals one the visibility the middle section is set to a visibility of a value crater on end one and smaller than the number of pages and the last one of course is set to visible when it's reached the number of pages for the last page this works pretty well but is a little bit harder to set up because you can only work in the first one because as you know in a gallery of course you can only click in the first template and here is of course the first one visible so um I give you another hint what seems to work I said in the first page the SVG picture didn't work I don't know if if no SVG pictures work but what does work is when you put a custom SVG code which I probably as you know really really like to do I've got a whole playlist revoked around creating your own SVG pictures in in powerapps I will link it on the top and in the description below so when we are using custom SVG code right here then this seems to work and seems to display in the resulting PDF right here to my last example page about creating the PDFs where I think I came out with a pretty clever solution to do it a little bit easier than construct all the sections in a gallery so what we are doing right now is we are using a vertical container in this case we have a really creative use for it I think what we are doing right now is we are setting the vertical overflow to scroll so we get this scroll bar and not only see the the first page right here but set it to scroll and then we can scroll through and then we have our first section this is our second section which is a gallery and then again the last section we are using again the same pixels as B4 let's open up this container right here and the first section is a normal container inside so not the vertical container a normal container inside the web container like I said 752 width and 1082 height for the first section and for the last section can scroll to the last section really quick and then we can yeah create uh build our pages right here and change everything and don't have to work around them because they are all in a gallery but we can use a gallery in the middle and the gallery has again exactly the same measurements like 752 1082 pixels click here generate PDF exactly the same settings as V4 and then we will get our PDF right here and we get multiple Pages which are not Pixel Perfect yeah probably we need to tweak a little bit um then really test it out with substricting adding half pixel or something because here as you can see so one pixel overlaps to the first page of this background template fill of of the gallery and then we have if you look really closely yeah we have a pure pixel right here and then again a lime green yellow pixel right here um of course you wouldn't use this this colors this way so you can probably get away with it with it being one pixel off and you won't notice notice it you will probably don't want to use this to create 100 Pages I've tried it and my powerapps crashed and it takes considerably longer if I'm creating 10 pages so probably like 10 pages Max um you have to try so again you can download the app and just copy this pattern to create your own Pixel Perfect or nearly Pixel Perfect multi page PDF so let's get to the last part really quickly so what happens right here we again have this container right here with multiple pages so I've used a similar setup as before when we hit here we get a dialog and then we can directly send this file to your email address let's look at the on select really quickly and again we are creating the PDF and storing it in a variable and then we are not displaying it in a PDF viewer but we are using the Office 365 Outlook connector to send an email just and send it to the current user so you can use this app plug and play and you can send this email to yourself with the to the logged in user subject is just here so PDF body is just a PDF test and set the importance to normal and this is the important part right here we want to send one attachment our PDF which is called your dot PDF we need to put this in as a table so we use the table function outside of it we can actually create multiple files as well so we need it to do it like this you can call the second one second PDF now we can use another one and then hit the button and a few seconds later we will receive an email with two PDFs with the first one being this here and yeah I noticed this in my Adobe Acrobat relay an error popped up um saying that there's some kind of error on this page not specified but I yeah didn't experience any problems in viewing it I don't know still in experimental features so probably Microsoft will do something about this and this is our PDF of course it just looks like in the PDF viewer this is our second PDF and this was our other test PDF let's take a look at this again we just have to specify the attachments as a table and the record in this table has one field that is called content bias your PDF function result goes in here and then another field that is called a name and then you can choose a name and one more idea right here and let's try another scenario um let's try using this in a flow also really easy to set up let's use the new Power automate pane right here we will create a new flow and create it from a plank and then of course we don't want to use the standard power automate trigger but we want to use the um version 2 of that so we can specify a file as an input create file in OneDrive for business I will use my root path by a name is test.pdf and the file content is the PDF file of course let's save this and then input a quick button right here call this save to one drive and yeah we will copy this button here if you are asking yourself the whole time why this looks so so beautiful but the reason is that I'm using a component Library created by Louisa and me which uh which tries to use Google's material design principles and many videos about this topic will will follow say three one five so on the on Select Property of the button we will use our flow and there we want to specify the file the file again is a record so we have two curly braces the first one because it's an optional property for the flow and the second one because the file itself is a record again has the name property it just doesn't matter what you put in here because it won't use the name at all and the second property again is content bytes and here of course goes our um our PDF again [Music] and close to curly braces and we have an error because right here content bytes is not written correctly so this should work and here you can see we have a new file that is called test PDF let's open it and here we have our file in OneDrive so that was a lot of stuff um we learned how to set up your perfect single page PDFs your multiple page PDFs and in the end we learned how to send it via Outlook via email and without using a flow or to pass the PDF file to a flow and do everything you will like with it so everything actually not too hard we covered some stuff that doesn't really work at the moment but probably it will change in the next week keep in mind this is still an experimental feature so use it with caution in productive apps this is it for today my name's Robin see you next time [Music] foreign

Channel: R2Power - Lern PowerApps

Views: 30,199

Keywords: Power Apps PDF, PowerApps PDF, Power Apps PDF function, PowerApps PDF function, Power Apps create PDF, PowerApps create PDF, PowerApps Beginner, PowerApps lernen, office365 kurs, Rosengrün, Robin Rosengrün, r2power, r2pi, Lern Power Apps, Power Apps Kurs

Id: qylQgT0dS0Y

Length: 28min 49sec (1729 seconds)

Published: Mon Oct 24 2022