Power Apps Pen Input save to SharePoint & PDF (Signature)

hello everyone this is raza durrani in today's video i will cover the pen input control in powerapps we will explore the key properties for the pen and put control see how we can capture signatures from the parent put control store those signatures in a data source like sharepoint and generate pdf from powerapps data and include those digital signatures as well so let's get started with the video but first my introduction [Music] first let's explore the properties of the pen input control to insert the pen input control go to insert input and select pen input i'm going to position this across the full width of the screen if i go ahead and preview my app the mode of the pen input control is currently in draw mode so i can start drawing things there is also an erase mode and if i select this i can start erasing i can even go ahead and reset the pen input control i'll switch back to draw mode i also have an option here to define the width so if i increase this and if i start drawing as you can see the width has increased i'll reset this and the final option here is to select the color of the pen input control so let's say i change my color to blue as i start drawing it will have the color blue now for the pen input control if i head over to properties the mode is the default mode of the pen input control and by default it's draw i can change this to erase and you will see how it has switched over to the erase option show controls is basically providing the option to the user to see the controls at the bottom by default it's turned on you can even turn this off so the user does not see those options can also define the default font size the color is currently green and that's what's set right here i can even go and change this and set a default color to begin with so let's say if i pick blue you will observe that if i preview my app the color has changed to blue so these are the basic properties of the pen input control now common use case of the pen input control is for signatures and there are scenarios wherein we would want to check if the user has actually gone ahead and signed inside the pen input control basically the user has gone ahead and added some drawing inside the pen and put control so in order for us to check if the pen input control is empty or not i will first go ahead and add a simple label control and the text of this label control is what i will change depending upon whether the pen input control is empty or not so the first step is for the pen input control if i head over to advanced and go to on select right here i can go ahead and create a variable i'm going to call this var pen data and here is where i can put the data from that pen input control so i will use self dot image the pen input control outputs an image property that we can leverage so i'm going to store that in a variable next for the text property of my label control i'll go and add a simple if condition so if that variable that i created which is where pen data is equal to the pen input control my case the name of the controller is pen input one dot image so if these match in that case i will go ahead and put the message pen data is not blank else i will go ahead and put the message pen data is blank now let's go ahead and preview the app right now it's empty so it says that the pen data is blank the moment i go in and start drawing something it says that the pen data is not blank if i go ahead and reset the control it'll go back to pen data is blank now you'll be curious to know what's there in that image property so let me go ahead and add another label here and in this i will just go ahead and place the pen input dot image now i'll add another label here and this one would be that variable that i created which was where pen data now if i go ahead and preview the app the value in these labels is pointing to a url which is basically an internal memory in the app where this image is being maintained now when i keep resetting observe how the url of the first label is changing that's the current value in my pen input control the second value is that variable that i set when the user starts drawing something on select so basically as the user starts drawing that value is again being fetched plus i'm saving it in that variable that's why when i compare if these match that means this is not blank when i clear this these do not match and that's why i come to know that the pen input control is actually blank if you would like to place the drawing of that pen and put control into an image so i'll go to insert media insert an image i'll just place the image right here and for the image property of the image control i can straight away go ahead and use pen input dot image i will preview the app as i start drawing you will see the drawing and the pen input control is showcased right here in that image now that we've seen the basics of the pen input control and its properties let's see how we can leverage the pen input control for saving data into sharepoint now right here i have a simple table that is showcasing data from a sharepoint list and i have a form here related to that same sharepoint list the sharepoint list has two simple columns title and a multi-line text column signature now in the app when i create the form control power apps will create these two data cards for me now for the signature data card i would like to replace this with the pen input control so for that first step i will unlock the data card i will increase the height i will delete the existing text box control which will result in errors which we will fix and then i will go ahead and insert the pen input control i will position this and place this right here now once i have my pen input control positioned i have renamed this control to input signature now let's look at the errors so if i click on the error and go to edit in formula bar there's an error with the y property of the data card that's because i deleted that control and i replaced it with the pen input control so all i have to do is replace that data card control name with the pen input control name so that error is gone and then i have another error related to the update property of my data card this property is the main property that updates the value in the column in the data source so i've gone ahead and cleared the update property now for the update property i need to go ahead and set the value of the data which is the image property of my signature control but if i go ahead and use the following formula which is my pen input control which is called input signature dot image this will give me that url of that image that is held locally in memory in powerapps for this user session but that's not what i want i want the actual binary data of that image and to get that i need to use the json function now if i directly use the json function here it will result in an error so what i need to do is when the user goes and hits that submit button right before submitting the form i will go ahead and create a variable so i'm creating a variable i'm calling this where blob and for the value of this variable i'll use the json function for the data i'll use the pen input control name dot image and then for the format i will use include binary data now this formula right here will grab the actual binary data and place it in this variable called weblob and this is happening right before i'm submitting the form now i can copy this variable go to my data card and for the update property i will just place that variable so the actual binary is what will be set in this data card and when the user hits save that value will go in my back end data source so let's go ahead and try and create a new item so i'll preview the app click new enter a title sign click save and now if i go to my backend sharepoint list here is the entry for reza and here is the binary data of that image control although this data is in binary format it adds these double quotes at the start and at the end however the actual binary information of the image is held right here in this multi-line text column now if i head back to my app right now i am viewing the data my form is in view mode how do i show the value of that data right here now my pen input control should only show up if the form is in new mode or edit mode so for the pen input control i will go to the visible property and set the visibility of the pen input control as follows form dot mode is not equal to form mode dot view so if the form is not in view mode only then show the pen input control so if i preview the app currently the form is in view mode so i don't see that control but there is data and i would like to show that data so for that i will use the image control i will add that into this data card for the image property of this image control we will leverage this item dot signature now this will give me the information from the signature column but the problem is those double quotes so what i have to do here is just add a simple formula called substitute this item.signature i need to change the double quotes so to replace the double quotes you'll have to add double quotes four times it's kind of escaping that character and then adding double quote and i would like to substitute this with an empty string the moment i do this if i now preview my app you will see the signature right here if i select the other user i can see the other user's signature so when i select it will show me the actual signature value now this image should only be visible when the form is in view mode so i'll plug in the formula for the visibility of this image to only show up when the form is in view mode so if i preview the app now and let's say i try and edit this i get the signature control again i've gone ahead changed the signature i'll click save and this time you will see that the image has got updated so that's how you can leverage the multi-line text column and store the binary data in there and then grab that information and showcase it on the form as a data card using the image control and next let's see how we can use the data captured from the image control pass that over to flow so flow can go ahead and create a pdf file and embed that image into that pdf file now as part of my previous video i showed how you can export data to pdf and i use this inspection app i will use the same app but this time i've also added signature to it so let's see how this works i'm going to select the home inspection item and this shows me all the information of the home inspection i can also see the images now right here on the top i have the option of exporting this to pdf when i select this i'm basically opening a dialog box here wherein i have the pen input control and i'm asking the user to sign this so basically it's a sign off on the inspection now observe how i have disabled the submit button because i'm using that same technique i showed earlier to check to see if the pen input control is empty or not so i've gone ahead and signed and now i will click on submit and the moment i click submit a flow will be triggered the data will be dynamically passed over to the flow along with the signature data the flow will generate the html add the signature as well as an image into that html send me a pdf document in an email and it will also add that pdf file as an attachment to my sharepoint list item first let's go to outlook here is the email that came in here is the inspection report for home inspection if i select this it's going to show me all the data here and right here is that signature that i placed in that pen input control next if i head back to my app and select that same record again and this time if i click on pdf observe how it has redirected me to a different screen and this is showcasing that pdf which has the signature right here in powerapps in something known as a pdf viewer control that's that same document right here if i head over to the backend sharepoint list here is my home inspection item if i head over to attachments right here at the bottom is inspection report.pdf and this is that same signed pdf document that got generated so how did the flow go about doing all of this so the flow gets triggered from powerapps and there are two key parameters that i'm passing from powerapps to flow the first one is the id of the item and i use that to grab the properties of the item the attachments basically the images i grab all that information and generate that html the second parameter that i'm passing from powerapps is my signature data and the signature data that i'm passing i'm using that same technique which is json i'm passing json off the pen input control dot image and i'm including the binary data and that i'm grabbing right here next in the html that i generate i place the signature right here and the source property of the image that i'm creating as part of the html i've used an expression and this expression is nothing but that same function that i used in power apps to show the data of the binary information that is held in my multi-line text column wherein i was substituting the double quotes with an empty string i'm doing exactly the same thing here as an expression in flow i'm replacing the value that i'm getting from the signature parameter i'm replacing double quotes with an empty string that's all i'm doing right here once i have that i create the html file and onedrive convert it to pdf go and add it as an attachment to that same list item and then go ahead and send an email out to the user which has the attachment right here when i click on this pdf icon i check to see if one of the attachments already has the pdf if there is no pdf then i show the dialog for the user to go ahead and sign if one of the attachments has the extension pdf i'm navigating the user to a different screen so in this case if i preview the app i already have an attachment which has the extension pdf so if i select this this navigates me to another screen and in this screen all i have done is used the pdf viewer control and to get this control just go to insert media and right here there's a pdf viewer control and for this control all i need to do is give the reference to that attachment item and in my case that reference is coming from a variable so list item attachments if you get the context of one of those attachments in my case it's the pdf document if you just do dot value it's what i've done right here this will give me all the information that the pdf viewer needs to render that document right here and the pdf viewer is pretty neat you can actually search within the pdf right here so if i search for photos notice how it goes ahead and searches for the text within the pdf document it also lets me know how many pages i have as part of the pdf can go up and down i can zoom in i can zoom out really neat i've also given a link here to download so if i click this all i'm doing is just launching that item so the user sees that pdf document right here and they can go ahead and save this or print this and the way i'm grabbing that pdf attachment from my list of attachments in my list item is when the user selects an item in this gallery this is the formula that gets me that pdf item i use the lookup function this item.attachments and i check to see if the display name of any of the attachments ends with dot pdf and lookup will give me one record if it exists so all i'm doing here is just grabbing the pdf file and putting it in this variable now i'll preview the app and select a different inspection item let's say i pick the lawn inspection if i select this i do not have a pdf attached as part of the list item attachments i only have images so now if i click on pdf this will launch that dialog so i can go ahead and sign and when i click on submit this is where i am calling that flow i'm passing the id of the item and here is where i am passing the binary data of that pen input controls image property by using the json function so if i preview this click submit this will go ahead trigger the flow the flow will dynamically create that pdf file attach it to my sharepoint list item if i go to my email i will receive the email here for the lawn inspection if i select this i can see all my data here's my signature here are all the images and if i go back to powerapps and this time select the lawn inspection and click on pdf the pdf viewer will now load that specific pdf document from my list of attachments right here if you enjoyed this video then do like comment and subscribe to my youtube channel and thank you so much for watching

Channel: Reza Dorrani

Views: 9,051

Rating: 5 out of 5

Keywords: powerapps pen input to sharepoint, powerapps pen input, powerapps pen input to sharepoint list, powerapps pen input image, powerapps, power apps, pen input control, pen input pdf, powerapps signature, powerapps signature to sharepoint, sharepoint, signature, powerapps signature to pdf, power apps pen input, powerapps tutorial, powerapps pen input signature, powerapps signature to document, powerapps signature capture, power apps digital signature, powerapps pdf viewer

Id: EACk5jlQ_jU

Length: 22min 11sec (1331 seconds)

Published: Tue May 18 2021

Reddit Comments

[u/AdelVent]

Great work as always! Cheers!