Printing/Saving PDFs with Signatures and Images (No Premium Power Apps)

hey everyone my name is Andrew Hess and today I wanted to go over how to work on those PDF templates again about 2 years ago I let's see two years ago I started creating videos on using HTML for our power apps and I was just thinking all that HTML that we're writing all that HTML that we're doing we can make beautiful PDFs out of them and let's create some PDFs using those HTML [Music] skills the first thing we want to do in power apps is turn on that PDF feature we're going to go to settings and I believe it's an upcoming and this may change in the future let's see is it an experimental right here PDF function we want to make sure to turn this PDF function on all right so I'm going to turn that PDF function on and on this screen right now all I have is like a basic gallery and I threw some data in there from SharePoint so it's just a gallery reading from SharePoint the first thing I'm going to do is I'm going to create a new screen but the screen is going to be of this portrait print when I print a PDF I like it to be the portrait size not the landscape size so I'm going to do the portrait print all right so we have a nice uh screen here it gives me that good look that I like I'm going to get rid of this print button I really don't want the print button that's not something I want I want to create my own PDF function the first thing I'm going to do is I'm going to insert this HTML control html text it is of classic type and what I want to do is I'm going to create a button on my first screen so a button and all this button is going to do is navigate me to my second screen so navigate screen two and you know you can do a transition if you want um normally I go with fade so this button this one is going to print PDF but it's actually going to take us to the next screen so when we click on it it takes us to the next screen we have our HTML here okay so the first thing I'm going to do in HTML is I'm going to create a table so let's just keep this simple and you know start off simple table border equals 1 width equals 100% all right so we have a table let's just start super simple now let me open this up for us so we can make sure we can see I'm going to build out my top header bar of my HTML table so I have a few columns in there and I'm just going to say th and that just means table header so the first one is Task name and I'm just going to say th and the the next one is th project name slth so I'm just doing table headers across owner impact with the th first th probability and finally score now let's see if we can take a look at that so far so I'm just going to go ahead and close it right now let's take a look at it let's pull this down so you notice I have a nice uh table here it looks like we have one problem let's figure out what's going on there so it looks like I'm missing a bracket I'm going to leave that in here you know these are things that you're going to have to work out I'm missing a bracket right there so as soon as I add that bracket I kind of fixed everything up now we can see that I have my table and it's matching my gallery on the first screen so this is literally the same Gallery except I said task task name now what we want to do is we want to Loop through the values inside the table so I'm going to do my next ERS sand and I I love to keep it neat like that all I'm going to say is concatenate uh what do I want to concat the gallery the gallery the gallery one of all items and what do we want to concatenate by we want to concatenate by the TR and TD and then now now just my column name so let's see title let's see I forgot my double quotes let's put my double quotes in here title so we want to concatenate by the title and then I'm going to close my TD so let's see close TD and let's kind of take a look at that so far we forgot the andersan just take a look at that so far oh that looks great right so now we're going to start on the next um next column all right and that's going to be project name all right it's kind of building out there again all I'm going to do is copy paste this here copy paste with my % and the next column is owner we got to do our Anand owner do display name all right it's looking good to me and I'm going to copy paste this with the Anand this time and the next one is impact and let's see we need our TD andand and the next one was probability and the last one finally is score and then we just want to finally close off our TD record there we go so now we have this nice beautiful table of all of our items that were in the gallery now let's say we had a ton of items in there right so we can easily just lower the font size and make it even smaller you know with the PDF function one of the downsides is you can only really print one page as soon as you try and print two pages uh it kind of messes up so right now with the PDF function today 2024 it's April you can only print one page but look at that that's going to look beautiful when we print right and when I say print I mean we're just going to print a PDF and save it into SharePoint I prefer to save my documents into SharePoint just because there's version history there's all kinds of things that SharePoint can do for you with documents so now in order to print to SharePoint and save the PDF file I normally create a power automate to do this so I'm going to insert a button I'm going to put that here now for the area that I want to print to PDF I normally create a container so I'm going to insert a container just a normal container a normal container here I'm going to fill up the space and I'm going to take my HTML text and I'm going to put it inside my container okay so my HTML text is is inside my container I can give it all the space if I want to we have a nice container and this button is going to save save PDF maybe we want to change the first screen um print PDF that's fine save PDF so now I'm going to run power automate off of this so I'm going to come over here to the left side I'm going to create a new flow now right now if you create a power automate uh through power apps it is all classic so this may change in the future right now I am in classic power automate it's not giving me that new look and feel but I'm fine with it now one of the questions I had was you know how do you use V2 V2 is very simple you just add the inputs that you want to pull in so for me there's two inputs that I want to pull in and the two inputs that I want to pull in is my file name so it's a text we're going to say it's file name and then the next one is actually the file content and then next what I want to do is I want to create the file now you can create the file in one drive let's um I always do SharePoint that's just me but I'm going to create file but there's other options that you can do so just create file in SharePoint where do we want to put it I'm going to go to my SharePoint list that I've been using and that is the task list and I believe we're going to put it in the document just the regular shared documents now the file name the file name is going to be our name and then make sure to put in PDF you need that PDF uh ending there in order for it to recognize that it's a PDF file content is just file content that's all there is to it so I'm just going to save we probably wanted to rename our flow so let me go back into there this is a common mistake that I make a lot of times is in the top left you can rename your flow and it makes it easier to call upon it and and let's say print to PDF so renaming your flow it is helpful here because we're going to use that exact um flow name in our power app okay so now on the on select of our save PDF button on the on select we're going to call our flow and that's why we renamed it print to PDF and it kind of gives you the intellisense we're going to do run and this is the name of our document so so we can call it anything we want we can give it a title but we're just going to say my document today and then we're going to say and we'll we'll put a space in here and now now the reason I put the date in there is because it gives it a unique ID if I wanted to overwrite the document every time I would not put now in there and I just overwrite the document so now that we have that o I went so fast the intellisense helped me out I'm just going to do comma and it kind of gave me the next line which is file now I'm just going to space this out here because I like to be able to see it how I prefer to see it that's file a squiggly and the name and this is this name is not important we're not going to use this we're not going to use.pdf and then comma content bytes so we are going to use this this is very important this is the next column here content bytes and you have to capitalize that b the content byes is PDF of what what do we want to print the container container one that's what we made the container here and then we're just going to have an ending squiggly ending squiggly and a ending parenthesis and that's our entire flow and on select command so now when I press play and click save to PDF it's now running that flow we can go to SharePoint check out the document Library there is a new document here right here you can see the date you can see the date and the unique ID with the now and it kind of formats the date in there so when we open that up and we have our nice PDF we now have a beautiful form in there with all our gallery items so we've kind of you know added that into our PDF let's make this even better all right so another question that I had from one of you is you know how do you add a signature let's just do this simply let's just add a signature to our container so we want to pin input I'm going to insert a pin input it's kind of big up here we'll minimize this here let's make sure it's our container too all right so we have a pin input let's just drop an image in here so image or a media image let's just drop it right in here and what is it going to be equal to it's going to be equal to our pin input so this is our pin input one. image all it is is just the image so if we sign our name we sign our name now we can just print straight up now we have the signature in our PDF you would think oh that's so difficult how difficult is it to just print straight to PDF so let's go to our SharePoint document Library so my new document right here my new one just open it right up have my PDF give it a few seconds to load now we have a signature in our PDF already I literally just got someone's signature so imagine if you did this on someone's phone and they just use their finger to sign it they can sign this straight from their phone and you can print it out in a PDF today so that was another question that came up was you know how are you pulling a signature and to me too easy it's way too easy to pull into a a signature into your PDF so since we have a a signature in it it's just as easy to pull in a image so let's see of type media image there's no issue with just dragging and dropping an image in here now you could have an image in your library and then pull it into your document and what's really nice that happened within the last uh I would say a couple weeks so what's new for me is actually power apps now added in this little purple bar know it is big and bulky but it's fine I'll deal with it but what's really cool is when you edit you have stock images so when we pull in stock images you have to think as a company right do you have the right to use this image and the great thing is is that this is a subset of the creative Content Library that means that as a Microsoft 365 subscriber you have access to use these images they are stock images and it is legal to use these images so I'm just going to pick the flower insert pull the flower right in now all I have to do is save as PDF and I have a new PDF let's go back to SharePoint we'll go to my document Library refresh I have my new document here and it should have my image my signature and also the table but let's go one more there's one really cool thing that I saw and we're going to do edit and we're going to do stock images again but what I really like is the cutout people so let's say we had a cutout person but now what do we do on top of that on top of that we can pull in a line item right so let's say insert text label we'll pull in a text label and we'll just say our gallery. selected Gallery one. selected. title so now we have and you really can't see that white background there or at least I can't on my screen but what's really neat is is now I can click save save PDF and now we have that person holding the document in there and I'm sure you can make it even better than what I did in a few seconds we're going to refresh and when we open our PDF uh it should be loading now we actually have the girl holding our Gallery line item that we selected isn't that really neat uh that we selected and we highlighted it and now it's print to PDF and then we can just print this and we have it saved in our SharePoint Library so if we go back this is now saved in my SharePoint Library so I'm sure you can kind of make this perfect if you wanted to like we could make this the exact try and make it the exact you know folder here we could add a a border on it try and get it to be exact make this actually a little bit thicker border and we could center this so now it looks like she's holding that line item isn't that really neat I hope this was helpful think about all the possibilities I know all of you can come up with better ideas than me uh the stock images is a really neat feature we can actually print the stock images straight to uh a PDF we can save it in SharePoint we have our nice table uh think about all the things that we can do with HTML if you can do it with HTML and power apps you can print it to a PDF in HTML no issue there you have your signature maybe you wanted uh her to hold the signature you know there's all kinds of so let's let's do that let's just uh now this person is holding your signature you've now signed this document uh just think about all the things you could do so you can make all kinds of templates with power apps power automate you can get signatures it's a little too easy to get a signature and pull it into a PDF and all of this the great thing is it can be done with no premium licenses no premium licenses you can print out a wonderful PDF just like this so thank you all for watching my name is Andrew hes I'll see you next week

Channel: Andrew Hess - MySPQuestions

Views: 2,697

Keywords: Power APps PDFs, power apps, powerapps, power platform, low code no code, word templates, power apps templtes, power apps templates, save documents power apps, myspquestions, PDFs with Signatures, PDFs with Images, using HTML with Power Apps, Document Templates, Microsoft Word Templates, M365, O365, no premium license, Signature in Power Apps, Images in Power Apps, Stock Images in Power Apps, New Power Apps feature, how to power apps, power apps tutorial

Id: wrY6AbNzsiY

Length: 17min 36sec (1056 seconds)

Published: Mon Apr 01 2024