PowerApps Pen Input to SharePoint

in today's show we're gonna save the power app spin input to a SharePoint list we're also gonna save it to onedrive we're gonna save it off to a PDF file we're gonna send in an email we're gonna really talking about power apps and grabbing all those signatures all the fun things you can do with them for a long time we've had this control but it's been really dicey to get this stuff out finally I've come up with a pretty straightforward solution for all these scenarios so I'm going to share it with you but first here's our intro hi my name is Shane young with power apps nine one one those guys and today's show we're gonna dive into the power apps pin input all right some people use it for signatures I use it for a sweet little drawing write whatever you're using it for to capture the data one of the challenges has always been to get that out of there so today we're going to talk about saving those signatures off to a SharePoint list to onedrive we're going to embed them inside of an email we're going to embed them in a PDF so a lot of different ways to work with the signatures but the nice thing is is what it I figured out finally after all this time of struggling with this control is that there is this newer function called the JSON function it's actually going to let us convert the the pin input into a format that we can work with and so then we're just gonna fix that up and we're gonna use that over and over again so we're also going to bring flow into the mix because let's face it our friend Flo is probably best at doing a lot of these things but either way after tons and tons of research playing a little this play a little bit I've got this solved so let's just switch over to my desktop and take a look at how to do this pin input control so over here my desktop hey I don't pay attention I'm wearing a different shirt and B you don't pay attention screens different it might be another day because this as well as videos I just can't get to B right right not that I can't get the stuff to work but I couldn't figure out the right way to do it so this is my third try of teaching this all to you and hopefully it works this time so first thing I thought I would do is demo what was going on over here so here you can see I've got a nice little saved to onedrive right I sign my old thing here let's just add a little more to it just so you can see that I really did this with the pen input I know it's such professional artwork you can't imagine that I made it but I did so if we hadn't saved one drive what's gonna happens we're gonna take that we're gonna put it the JSON function we're gonna strip out some of the JSON send it to flow and if all works well go over here we'll say refresh and a few seconds ago there was a file added there's my red smiley face oh okay so that button works yeah meme so then I won't be able to save it to SharePoint so this is actually almost identical steps to saving to onedrive so we're gonna say saved SharePoint did you do there it goes we got my SharePoint site we'll do a refresh here and after a second we'll click on the file there's our little red smiley face - for - we're doing great I say the magician makes you sign your own card you know I'm not messing around you saw me to sign it so then I wanted to do is I want to take it a step further and so I know a lot of us like to create PDFs right so you want to have a customer sign off on their invoice on the job site or on the hours worked and so you want to be able to grab that electronically and put that into your PDF so if I click on embed in PDF what I did with this is we're gonna take it we're going to not strip the HD or the JSON down we're gonna embed the JSON into HTML we're gonna send the HTML to flow flows and do all of its work and then after a second I then get this email and if we open up on the pen inputs will click here will say hey preview the file boom there's our red smiley face so we're able to do a pin input into a PDF document right pdfs are great because now you've got a basically unchangeable history of what happened so you could store that pin input also so that PDF file i've sent in an email here to make it go easier but you could save that to sharepoint onedrive wherever it made sense for you to put that file but we've got the PDF file so there's that and then last but not least sometimes you want to just put it into the body of an email we do this with a lot of customers who want to send this type of stuff and this will make it the body email so they don't have to go through the process of opening a PDF they just want to see it so click the email signature and that goes and we go to my email yin boom look at that email this is the heading this is a pareo if I use the same HTML as the PDF because it was easier for me but there is our cute little red drawing in the body of an email so that's what we're gonna do today we're gonna learn how to do all things are you excited I'm excited so unless switch over here and talk about how this works so the very first thing we need to understand is the way that we get this stuff out right good you know we know my tricks right the first thing I would do is I'd inspect I don't they label in here and be like all right pinion put one there's pin in put one dot image what is it well you can see that it's not you know what quite McKee's you read it's not a it's not binary data it's not a file it's this blob manager thing right so basically power apps has that pen input in a file but it's cash behind the scenes you can't get to it I can't get to it so this not helpful this is what we were stuck with for the last couple years well what I found out so we're just kind of take this and shove it up here so we can see it is that there is actually now a function called JSON right and so JSON is some fancy developer ething who knows what it really means stands for JavaScript something I don't know hipster way of spelling jason without a z' anyway we don't care what this function can do though is you can pass it different data and it will turn it into a JSON format so you pass it a table with does different things you pass it text it does different things but if you pass it this image this blob it does something pretty handy is what we really care about here so I mostly take JSON pin input image and what I want to do is I want to include the binary data which is what tells it to turn that into something that I can use so this function right is going to run and create that I got to save that somewhere so I'm going to jump out in front here and say set and we're gonna call this VAR demo so I'm just going to take that new value that it's about to create from pressing this button put it in var demo so hold down the Alt key I'll press the button and so then now if I throw another label on the screen there's a label big and giant and if I said hey show me bar demo and then we're gonna make this scrollable so now if we hit play look at this so data : image slash ing semicolon base64 , and then all this garbage is the base64 encoding of that file also worth noting is it because proper JSON it's wrapped in quotes right there's a quote and there's a quote but I was like whoa I've seen that before I know that when I take an image and embed it in my PDFs right which we've done in some of those other videos that that's basically the representation when I want so when I saw this long light bulb came on that man it's really a chance to fear for us to do something so I said okay first things first I want to be able to save that file just straight to onedrive and I'm gonna save you guys all the pain and suffering of like what I had to work through but what I really figured out is that in flow over here right so let's go create ourselves a new flow where you bake I want a new I don't know I hate all these instants and stuff but they're you only new power apps and so we'll call this pi/4 pen input to onedrive right so pi to onedrive create that so there's our power apps trigger and so what we're going to do is we're gonna say hey I want to do a create file and onedrive and so what that's going to do is that is going to allow us to create a file we're going to turn all that binary data into what our friend onedrive needs so where do I want to store it well I'm not going to stored at the root I must store it in a folder called flow demo right there OOP we're going to name it we're going to name it a video JPEG no we're not so I was doing like video JPEG but then I got confused caching and stuff was making it hard me to see if my test results were working so instead what I'm going to do is I'm going to write an expression real quick so I clicked expressions over here on the right and so I'm going to say I want to concatenate and I'm going to take UTC now right so I'm going to take now and I want to concatenate with that and I realize that this thing's being dumb but I'll show you that's done there we go I'm quick out of there say ok we click back in so you see it so we're done combined the current date and time right UTC now and then we're just gonna append JPEG so that way all our file names will be in a date/time stamp at JP you can make the file names whatever you want but I did this to help me through the testing because I was doing lots and lots of testing they won't know which one I was grabbing so that'll do the file name for the file content okay well you know what we're gonna do this the broken way first I want you guys to see the mistake that you have from your gonna make so we can all kind of learn together so we're going quick on asking power apps and so that's going to grab the file content so we're going to say alright so PI to onedrive that all looks good we're gonna click Save and so after it felt a couple seconds it is going to save and so then now what we want to do is we can go back over here we're going to add another button and so we're just gonna put it over here beside this once that way we know what it is and so the first thing you're going to try is you're going to be like hey I want to send it all this data well all of this data doesn't work ok so what you really need to do is for a base64 what one Flo wants is Flo just once everything after this comma right so it wants to start with ivb ok so what we're going to do is we're going to use our string methods and I'm just gonna steal the code from right here so I don't have to type it all again so copy so I'm gonna go right here so let's paste it in we'll talk about it Boop so we're going to say alright set variable name var Jason and we're going to use the JSON output just like we did to store the value okay once we've got the value stored then we're going to set var Jason to be in this mid right I have a different video on string functions if you don't know your string functions yet but this says start at character 24 and then go to the end of the file minus 24 so this is the formula that will strip out all the quotes all the data binary stuff and it will get down to just the data that flow needs so you need to have this data okay so I'm going to copy that because now what do I need to do I'm going to take her button or so we're still in our button gonna say flows and in here we should have our pi/2 drive there it is we're gonna add that alright and so then what I'm going to do is I'm gonna go in front here - we're gonna paste that in so then now we've got write our set the bar Jason set the bar Jason and so what are we going to pass the flow we're just gonna pass our friend of our Jason and I could do that in more compact right if you combine all that into one one motion but I was trying to break it down to step so you guys can kind of follow along a little better but so this should work right PI to onedrive run VAR Jason so we're going to click our button I'm hold down the alt button press the button there it goes so it went and if we go out here and we do another refresh so a few seconds ago this got created when I'm click on the file and this is where she didn't get hmm looks like the file is broken why is the file broken the reason for that right this is important this is why I'm showing you broken because you're gonna have this happen so this is what your flow looks like right but in reality your flow needs another expression here to convert the file format but hold that thought hold that thought and we get really nerdy for two seconds okay let me be nerdy for a second then we'll go back to being nice and easy if you click alright here you can view peak code so right now you can see that the file content right for the body is right here okay so that's how it knows what to send over to onedrive with me okay this is important so that it doesn't work that way failure so now we're going to hit X and so what we're going to do is we're going to say hey I need an expression and I'm just gonna start to type in binary and so there is a base 64 because we saw over in the JSON that's how the file is encoded so we're gonna take base64 and convert it to binary because that's what onedrive needs like that and then we're going to quick dynamic content and put the create file content in there and click OK say so now it is base64 binary trader body blah blah blah if we peek code now you'll see over here on your body we've got that right line 9 is the same representation cool ok done we're gonna click Save and don't worry this nerdy stuff you don't really have to understand it but this is how you troubleshoot I want to make sure that those of you did one understood you understood how to troubleshoot these problems so we go over here and so now we're going to press the button again write it so all hits button Boop we'll go back over to our flow or onedrive folder hit refresh and a few seconds ago there's our file cool ok with me so that's that's the way that you need to write your flow to make it work so that was what you want to learn but I want you to see a weird behavior so notice right we're here we're saved we're good ok you're like hey this is it this is the flow Shane just taught me this works leave ok we're out we're gonna go back in and say edit again create file what our expression is gone you're like oh my goodness it's not gonna work anymore because it deleted my expression somehow what did I do wrong you did nothing wrong flows just being a meanie face click the ellipsis keep the code I get long 9 our function is still there so this was driving me bonkers I could not figure out why sometimes it would work and sometimes it wouldn't when I had the same stuff and what I finally realized is it for whatever reason once you put this base64 expression in there you save it it keeps it but when you come back it doesn't show you that you're using that expression so right I could send you this screenshot back build this this works this doesn't work unless the underlying expression is saved in there so as long as you just follow the steps and saved it you won't have any problems but I was confused for a couple days about all this so I thought I'd save you guys that pain ok so that is how we do this so so we're in great shape we have recreated the same thing for our dear friends saving the file to onedrive if you want to stay with to SharePoint it's exactly the same exact code alright so we could just come over here we just edit this flow well it will make this one so do save it to SharePoint so we can just say crate in your step and will say create file SharePoint and so then what do we have here create file and SharePoint thank you so then we're going to want to save it well you guys know me I want to save it off to my power ops video what folder I'm going to save it into a picture library right there Boop file name I'm going to use that same crazy function I'm kind of becoming a fan of this function for being honest with each other so you know I just I made it up for this video I'm kind of like I could see myself using this one all the time now if I can get it to work there we go UTC now and then dot JPEG in single quotes remember power apps as double quotes for string flow is single quotes so that makes our dynamic file a name and then file six for the file content we don't even have to mess around anymore we know that it's that same exact thing right base64 to binary and so then what goes in there the dynamic content of from power apps so we're gonna grab all that right there OOP so same exact formula that we use for create file so say save and so then now if we go back over here and here we'll hit play we'll add a new little drawing and here we'll put a little heart right here OOP there we go it's a terrible heart we're gonna press the button and so then over here if we refresh onedrive few seconds ago boom okay file the heart go to SharePoint will refresh SharePoint a few seconds ago steal my heart it worked alright so and now keep in mind right we did these in the same flow because I'm lazy it's basically what it boiled down to what I really trying to reinforce with you is that the code that we use around parsing the the variable it's the same code in the same functions everything is the same whether you're saving a one driver SharePoint so that's why assuming one flow for this example not necessary it's just the way I did it so then now let's switch key a little bit so now we want to talk about embedding it into a PDF so to embed it into a PDF right we have to generate HTML so I went ahead and wrote HTML at a time right so run boom-boom-boom-boom-boom right so all of this is just HTML and then we're gonna use the image tag so open image source equals and then you're going to just put in the straight call to the JSON function because the way write HTML wants valid JSON the JSON function returns valid JSON so you literally just stick this in there and that will encode your file there's no extra thinking there's no extra pieces you don't have to remove either quotes or any thick sup like we did in the previous steps it's just straight up here is the JSON that you want so you put that in there and that will generate this and so then what I did was I wrote a flow called pen input to PDF so if we go over here and we've talked about I think I've done two or three videos now on creating PDF so we're not gonna go do it step by step but pen input to PDF alright let's edit it and let's talk about how it works so power apps is your trigger we're going to create a file in a flow demo folder called pin and put out a HTML and it is straight up the create file content no fixing up no conversions no expressions no nothing just you need to pass valid HTML over here and remember right here that's what we're doing from this quote to this quote that is all valid HTML so I'm passing valid HTML straight over to flow flow is going to use that without doing a thing to it just gonna write it into a file called HTML because it has to be an HTML file then we're going to convert that file to a PDF right this is the ID of the file that just got created when converted to PDF and then I just went ahead and send it as an email right so I did it like this because I just wanted to get the PDF over to me there was no reason you know but if you wanted to save it to SharePoint you would just save the PDF file straight to SharePoint you want to say to onedrive just save it straight over there right you would just you to do this if you want to save it to sharepoint right say create file will save it the sharepoint Socrate file and sharepoint snows flow catches up there you go alright so you just do this you back right what is the site address it is my power apps videos right there where do i want to put that we will put that in my share My Documents folder there you go file name is demo video PDF and then the file contents is going to be from the convert file it's going to be the file content output from that and so then now I press the button it's going to send a copy the PDF it's going to save it over here in our dear friend SharePoint and then you know what you like I don't want anyone driving hated onedrive new step delete one oh yeah delete onedrive three file hopefully I get myself in trouble kind of going off script right now but you guys are worth it so from the create file onedrive step right here oh there's the ID of the file that we created so save so then that way so now power apps is going to trigger it we're going to create a file in onedrive we're going to convert that to PDF we're gonna email the conversion in an email we're gonna save it the SharePoint and then we're going to delete the file onedrive so it's like we were never there awesome let's see if it works alright so back over here so that's our code we're running again and if you're struggling with HTML right over here w3schools comm I don't get anything from telling you this but this is where I go to remember how to write HTML so great little website not as great as my youtube channel but pretty pretty good there you go so we'll hit play oh let's see well make the heart a little better oh that might have made it worse whatever press the button for embedding PDF doo-doo-doo-doo so then over in my email I should have a new email to myself there it is there it is and it will preview the file oh there's my terribly looking like almost through the state of Ohio kind of I don't know it doesn't get hard at all anymore so there's that nothing it ever did and if we go over here to share point and we got a documents there should be a file would we call it like demo video or something like that mmm video demo why can I never remember what I named these things told you when I went off the handle guys gonna mess up alright we all can flow what we call you flow demo video PDF you guys probably saw me scroll by and laughed at me that's alright you gonna laugh alright it's not there let's go see why I'm go right here they not hit save I didn't hit save did I let's say save leave this page that way or no I saved it I don't know I had sit saved that one fail us do you want failed do I put it in wrong place there you go PA documents demo video PDF that's what happens you try and go off-script now we did see that it failed it looks like it failed at getting the the file back to delete it so let's see if it deleted the actual file or not that's kind of what I'm curious about so over here opinion they put HTML looks like it might still be there okay so it didn't delete the file edit my flow real quick delete file I don't know I'm we're not going to troubleshoot that's not the whole point but that that's what it should have done right that should have been how I deleted the file it's probably the wheat file by path or something silly like that I needed to do whatever I'm not worried about it you guys know how to delete files in flow okay hang on he drove me crazy I couldn't figure out why it wasn't working now can see the difference when the video I showed you guys I added the action for one drive to eat fire rice when in here I typed in to eat file one Drive and I used the delete file for one Drive where did I create the file I created the file in onedrive for business right they should make these icons much different so the read file from onedrive is a different data source delete file from onedrive for business which is what I did right here same exact action same steps it worked without a charm or without fault oh it worked yeah anyway just wanted to point that out it was driving me bonkers so I figured it out it's because you guys didn't tell me I used the wrong one drive when I clicked on delete file alright back to the video the whole point of this was to get you guys through this idea that I wanted to be able to embed in PDF which we did and then we saved it to SharePoint as well as email it to ourselves just as a little bonus content to make me stress a little bit because I was doing something off script alright then the last thing here email a signature well this is even easier so what I did here was I took that same exact HTML that we just had right so still the JSON coded because when you send an office 365 email with send email v2 the body is automatically HTML so I stubbed all of this HTML valid HTML that we've proven works into a variable called VAR HTML image and then I said office 365 send email v2 to me subject for what I mean it's subject and then I just stuck that in for the body and then that was how when we press this button right hold on they don't key press this button there's that terrible red dot that I made so we know this is a new one so whoa I don't know about you guys but this was a pretty big deal to me right I this is one of the things getting these pin inputs out and having multiple ways to do it has been kind of one of the crux is that control for a long time so you know we've done some other things you can also without any of this like you could save it straight to Azure blob storage you can attach it into a making an email attachment but getting it into the body of things like this was a lot of new stuff and a lot of it has to do this JSON function which is right here you know there's a whole bunch of really cool stuff about the JSON function here it does a lot of really nerdy technical stuff that I don't understand but if JSON is a thing for you this function is pretty powerful in all the different ways that it can kind of shape and do and it ready behaves differently based on data you hand it it's a pretty cool function so make sure you give it a good go but I think that's enough for today that was I a lot of work that's kind of stressful video Oh hopefully this helps you guys with all the fun things here one of the things I would tell you guys is you know only reason I did this today was I was working on so its power apps nine one one's about to release a standalone SharePoint class for power apps people right so or power apps class for SharePoint people so it's going to show the two different ways that you can build things and SharePoint from power apps we're going to talk about or we're going to have already done it but there's going to be one or like customizing with power bi and power apps all that making SharePoint better so it'll be a module for that and there's a separate module building a blank app from blank and using SharePoint a data source and kind of all the thoughts around that so about 4 hours of content it's a pretty cool little class if you're interested in that you can look at power apps nine-one-one comm slash training or you can just email me directly maybe I'll hook you up with a way to get in the class a little bit cheaper but we're we're gonna roll that out here in just a couple of days I'm pretty excited for that I also learned a couple of new things when writing the class and so we'll get you guys some videos on that here and then probably next week as well so with all that said I'm just gonna say thanks and have a great day hey it's me again if you got a second click the subscribe button that always keeps me making more videos or if you want to work together need some help getting your power apps going hit me up with power apps nine-one-one always happy to work together or finally if you're always looking for more videos that's probably what it is check out the power apps playlist over here and you know enjoy that alright thanks and have a great day

Channel: Shane Young

Views: 36,504

Rating: 5 out of 5

Keywords: PowerApps Pen Input to SharePoint, PowerApps pen input, powerapps pen input to sharepoint list, powerapps pen input to sharepoint, powerapps pen input image, powerapps, power apps, shane young powerapps, powerapps911, powerapp tutorial, powerapps JSON function, pen input control, pen input pdf, pen input html, pen input email, powerapps signature, powerapps signature to sharepoint, sharepoint, signature, JSON function, powerapps signature to pdf, office 365, powerapps examples

Id: RFZfvTuDmP0

Length: 28min 3sec (1683 seconds)

Published: Wed Oct 02 2019