Consent Text Field with airSlate SignNow

Digital consent form

in today's show we're gonna use power apps to build a consent form we're gonna do it all in one single screen but we're going to use it to introduce several new concepts use the pen input figure out how to email out pin input which turns out is pretty hard we're looking at sliders we're gonna conditional formatting pop-ups validations a bunch of if statements a lot of really cool concepts we're gonna introduce with a simple little one screen up but first before we do any of that here's our intro hi my name is Shane Young with bold zebras those guys in today's show is all about building a power apps consent form sounds pretty simple pretty straightforward actually but we're going to do is we're going to use that as a jumping off point to introduce some new concepts and the whole idea of this video actually came from viewers like you so if you have ideas definitely put them in the comments below right my friend George over in the UK he sent me an email said hey I got this idea by a consent form he has some questions around the pin input and how to get that in an email started digging in from there it turned out that it just sent me down the rabbit hole so far that I ended up making this video along the way it also won't say thanks to Vivek out of Florence Kentucky strangely enough he is providing me some of the answers in the forums kind of help push me in the right direction also I said strangely enough because turns out that Vivek being in Florence Kentucky I'm originally from Union Kentucky and it turns out that Gary this is really weird I actually did a work to the camp in Burlington Kentucky so I don't know it's a power the Internet right a bunch of power app nerds talking on the Internet it turns out that one point another we all live within a few miles of each other so kind of weird okay that's enough about me and them let's just switch over to my desktop and figure out what we got going on all right so over here my desktop I'm gonna put my browser and so here I've got my power apps for Mike this is the end product I wanted to start with the end to get you guys excited about what we're gonna be building and kind of get you you know seeing the process in knowing what the end results gonna be I thought I make it for a little better of a demo so let's do the preview button here and so I'm gonna fill out the form right so consent form so my name is Shane and don't make fun of my ugly design colors it is what it is I'm the type of my email so Shane Young at bold zebras calm now you notice like when I was typing if I leave the stop typing there says hey please check your email so one of the things we're going to introduce is how to do validation so we're going to use is match there and is match an email and if it's not we're gonna destroy the little warning message you also notice that my consent form is currently grayed out so until you've filled out all the information properly it's not gonna let you hit the consent button so while putting calm just like that I yeah when I send my copy the amount of myself I do not but that is a capability what is my age notice the age color stays red until we get to 18 right because anyone who's under 18 we decided they couldn't consent for themselves I just really want to show off how slider works that's why I did that but I think I'm more like 40 so put that in there then we use the the signing process here we don't put a smiley face with the pin input right this works a lot better on the mobile phone phone and this is what this was actually designed to be useful right was when a photographer was out and doing pictures he wanted to get people's consent to use the images so he would have this on his mobile device where they pen input would work a lot better than me trying to click with my mouse right so there's that and now that it's all done you can see the consent button lit up so we're able to consent we could use this refresh button this would wipe the whole form clear and if I decide I typed in a bunch of bad information we'll hit consent so then here we built a popover right so this is all still in the same screen we just created a form that lays over top and you can say I did not do a lot of design work here so it's kind of ugly but you know you get thank you for sharing you saw the dots go across the top that was the email going out and if we hit close it will take us back to our form all reset for the next person to consent it so pretty cool let's pause for one second I'll grab the email so you can see what that looks like and so here's the email and you can see right I didn't do anything too fancy but my consent form was a subject here's the body text and then here is the attachment with their signature in it so turns out getting the attachment signature that was one I really had to struggle through and so it was really got some help on how to do that that was a vivix help actually was you know here's how you get that into a thing so we're going to cover that in the video as we go now one of the things that the app doesn't do that I would probably do if I always going to be writing this for actual as I probably like logging this too and as your database or an excel file or somewhere like that but for the request I got was just to make it so we emailed a copy of this to the photographers that way you had an email record of all these so that's what we built pretty exciting there right I mean it's it's not great it's not pretty but you guys are better design than me so you could make it pretty but this is going to give us the foundation of teaching you a lot of new stuff so let's just jump over here to power apps let's sign in and we're just gonna go build this for ourselves alright so power apps loaded so I'm going here to apps and you can see the consent forms I've been playing with we're going to say create an app well again is that account and then so here it gives me some choices of which one of the templates I want to start with and we're going to just start with a completely blank app I'm gonna do it of foam layout I could also see an argument for doing this is a tablet layouts like your surface or something like that but I don't know phone layout I had enough room for what I wanted to do so I just changed the scenario to make it work with the phone so we'll say phone layout so this is going to get all the pieces and put them in place for us thankfully it only takes like half a second because all I did was create a some blank screen I will skip the tutorial for now that's why we're watching the video we don't need the powerups tutorial so skip okay so we have a blank screen here so let's start building our app and we're gonna try and build it as close to the other one as possible I'm certain I won't one-for-one recreate it but I'll do my best first say I'm gonna do this I'm gonna change this screen fill to be green yellow because it's kind of the color of my racing motorcycle used to be so I've always been a fan of that color then we're going to go up here to insert and we're going to insert some labels so once sir label and I'll put it right there and we're going to call this consent form boom we will go to the Home tab here we will say Center that text must bold that text and let's make that text more like a 40-point all right so a little better we're gonna scoot it up also so we don't run out of room one of the things we want to make sure we do those we go through years I'm also going to update all these so don't mess anything up some would call this label consent header that's probably too long of a name but I I do I've been doing label underscore consent header but it's really easy for people who are watching my videos a lot of people just do like LBL or something like that so whatever works for you it goes alright so there there we go we got a form we're done yeah it videos over no just kidding all right let's go here to insert and let's insert another label and we're gonna put this one right up against the bottom this one we're going to call this one name okay and then we'll go over here we're gonna change this the label name I promise it's so much more interesting as we go then we're gonna grab a input right so text a text input and we're gonna drop this one right here and we're just going to name this name okay very descriptive alright but those names are important because then when we do all these if formulas and all that is we kind of go long it's a lot easier if we can reference those by a name that makes sense instead of you know the weird names they get by default okay so that was easy no problem so let's grab another label and for this one we're going to do email like so and then we're going to do a text input for email but this one we're going to make a little more complicated so that'll be exciting so first things first let's get rid of the default text right we don't need any default text in there boom get ready to fault text in this guy oh if I can ever select it all there we go alright so no more default text oh we need to fix this also everyone call this email address and you want to do email address not just email usually I'm lazy I like to type shorter things but email is going to be part of one of the functions that we use later and so it would be confusing so using something like email or input underscore email something like that is going to make it easier for you to kind of keep it all straight and for power-ups not to get confused cuz we don't want that to happen and to that in let me grab this formula real quick that we want to use okay and so the first thing we're going to learn about is in this email field what I wanted to do right remember earlier when I typed in an incomplete email address we got the warning well the first step without for me is we're going to change the text color to red if they have an invalid email in here and so to do that we're gonna go over here rights we have selected the email and we're gonna hit the drop down and we're going to find color and so color right now is whatever color that is it's roughly a black but we're going to grab this we're going to replace this I'm gonna paste this in the statement we'll talk about what it is so what is this it says if so we're gonna do an if if is match so is match as a function that does a pattern matching so you can either set your own patterns or you can do something like that one that built-in once which is email so we're gonna say if is match email address text so this the text they just typed in here if is match email text matches the email pattern that's why we didn't want to use email for the name of this right because email is the name of that pattern then set the text to black if it's not black we're gonna set the text to read okay and then we can see that now so we hit play we can test this out if I start typing see the text automatically turn red but if I do I won't do fake email address what is Shane at bold zeros calm then the text stays black because that is a correct well for not an email so learning that is match function is great because we're going to use that and a little bit later to put the little warning message up there that says hey this email is not working or you know you put it about email address in here so pretty cool I thought it's pretty cool alright we'll clear that out so we got name we got email the next thing we wanted to do is grab a label here and we're gonna put in our good buddy age right so we'll do an age colon and then for this one we're going to change this to be label age open you guys let me not do the label three Haru it's almost like you can't talk to me because I'm making this video and you're watching it later I don't know alright label email okay so those are all labeled boom boom boom so that's age and then now we're going to do is run sort of control and we're going to use a slider control so I'm gonna grab this guy I'm gonna pull him down here is there was a slider control so the first time in any of my videos we've used it actually today was the first time I'd use one period shh don't tell anybody with a slider control you've had a some different flexibility so you can see the default values currently set to 50 we're gonna set it to zero so it'll be a default age you have the ability if you go if you scroll down over here you can do the min and Max right so min is zero and in this case we're gonna let max be a hundred so if you're over 100 sorry you can't fill out my consent form I'm sorry so that's one set of things you want to look at the other thing though I wanted to look at here was for me if we go over here that handle I want to set the handle color based on what if whether they were a acceptable range or not so less than 18 we're gonna set it to red if not we're just use a default of a red or a white so here we're gonna do au not handle active field we're gonna do a handle fill and so there's the color that's currently using and what we're gonna do is we're going to replace that with let me grab the color this formula right here and so what is this formula say says hey if the age is greater than or equal to 18 then set the fill color to white and if it's not set it to red so you can see right now while we're at two five six right and as we keep dry and we get it turns white so essentially when they're not able to consent so they're only they're less than 18 then we're able to make it red now you also might notice have a keen eye that right now it's red with a blue surround so if you change the value fill that's where that blue is coming from we're going to change that to just be age dot handle fill like that and so then now the whole thing is red and if it switches and it goes out grab it and it's all white so right we're just kind of leveraging that I just want those little things that can really annoy you right I probably spent five minutes trying to figure out like why is there's this blue ring how do I get rid of it those are things to power apps that are very fixable you just have to go and look for them and sometimes just have to you know try and change a bunch of values until you do it or you watch a video like this that shows you how okay so that gets us our H now the other thing I wanted to do there though is now now we have this all set I'm going to update this field that's all right so text is currently age and we're gonna make it easier for people know what AJ put in so we're gonna do the ampersand right which says hey do another field or do another add something else to this right and so what we're going to do is we're going to put in age like so and so the noun right when they slide so not only are we visually showing them but we can also see the written implementation that it's currently slid to 34 this makes it easier for people to use both most tricks like that all right so the next up we're gonna grab another label and so here we're just gonna put in some text right and this is gonna be whatever is you want them consent to so I'm gonna put you know up of course you can use my picture why wouldn't I want to be famous alright something very profound you'd probably want something a little more specific game legal but you know for me it works either way I was putting some text and so I'm gonna go over here I'm going to jump the the font up a little bit for that right so no fine print here we're making it bigger and then maybe we'll even do some justified so you can see how weird that might look so of course you can use my picture why wouldn't I want to be famous from a design point of view probably be kind of making it around just in the font size so it kind of filled the space more properly but my idea was to teach you the buttons you had available not how to do that so the now comes another fun new tool for so we're going here to insert and under text the bottom option is the pin input we're gonna grab him pull it down put it right in that corner what kind of slide it over here like so so there we have a pin input a couple of quick changes we want to make to that probably the first one of those we want to make is we want to go in here and we're gonna change the fill to be white so that way it looks like the rest of our fields that you had to put things into okay so just like that we also need to go back over here right I'm in slackens we're gonna do signature is what I put for that one and then what was label five that is our label consent text okay so that's all updated good job there there all right so what reforms did in there right we're looking like pretty good no we're doing so let's make a button we'll grab that blue button we'll drag it down here I will once again also change the fill no and if you're wondering right why do I make all this different kind of let's take all the defaults it's mostly just you can see how this stuff has changed and make you think about changing right you could absolutely just accept the default wouldn't been a problem but I just want you to be thinking about that so then for a button will change the text to consent and then right now our on select for this guy is going to just be blank because we're not ready to do it but where is my own select for my button it helped when you Malph that wouldn't there we go there's on select and so yeah on select is currently false which means nothing nothing's happening if you press that button no big deal we're going to get back to that um the other thing that we want to do last little piece element here is we're going to add an icon and what we're gonna do is I'm gonna add the reload icon so one of the pretty icons they give us out of the box if you don't like what they've got right could upload your own image I'm gonna take it make it a little bigger a little more finger friendly and with that then I'm going to change its color to black so it matches my pretty theme very nice very elegant button and right now you can make it just like a button that's what we're gonna do here so we're gonna just go here and there is a on select event for this one as well and so for this one we're going to do is we're going to reset the form so what we're going to do is we're going to use the reset function so reset and then we're going to reset a mondo moment order just so I don't miss any nice a reset name so you do that and then you do a semicolon that says hey let me do another command and so then we're gonna do another reset and for the then we're going to do email address right there and then we're going to do reset of the age and this is why we went to all the effort make sure we labeled things propria to reset the signature so right there alright so that is our way of resetting so if we go and we know that one works let's go test it out right so if I put in some text here some text here it's gonna yell at me set our age to 22 we'll do a little drawing action remember you can also do colors ooh let's do green it sounds like fun yay all of that and if we hit the reset button everything goes back to blank so on pretty cool pretty cool now you see that this guy went back to his default value of text input because for some reason I did not change his default value to nada so let's go over here and just delete all that else there's no more now what you might do here though with this field is you might add a tip so what you can do is you can do a hint text all right so we do hint text and you can say what is your name and so that way it's in there it kind of reminds them what to do but it's grayed out they don't have to delete it or anything like that so using hint tags gives you a way to put something in those fields that they don't have to delete a lot of people have the bad habit of just putting something in the regular text and then they have to delete it out before they can start putting in the right value so we might do the same thing for email right so email hint text and we make sure when the quotes and say what is your email address so just another one little things to make you form a little more usable the last control that we need to add to this page because we're going to use it now we'll go ahead and put it in so we have all the pieces I'm gonna grab a control and I'm going to grab a toggle we're gonna drag it down here and so then there is our toggle and what we'll do is we will change so there is going to be a false text and so for false we'll say no and then there will be a separate rooo text not true filled through text and for this one we'll say yes and then we will also then we'll take age right will kind of slide this over so it's a little smaller and we'll put in another label here and we'll call this get email so when the label get email doesn't really matter but something so we know it's a label and we'll drag it down here kind of make it smaller and because I've poorly designed my form I'm just coming to gets a email question right you'd probably want to make it a whole line so you can do I have all the space you would need now a lot of things I did notice when I first used this control is it's real easy for this control right the the label would actually go over it if you do that and the label is in front of the toggle then you can't actually toggle you won't be able to hit the button so make sure that you don't have anything overlapping your actual toggle so they're able to use it but just like that now they can do it will change our toggle to receive email and so later on we'll make the consent button if they've chosen that toggle whether or not they'll get a copy of the email so cool let's see let's hit play let's just make sure that the toggle button works it does you know you can also with the toggle I think the last say I'll make sure that default is because we don't want to spam people by default we'll say default is the false value all right so that gets us really close right we've now got a way to take a bunch of input from the user and so now let's do what was the the first hard question I got and that was how do we email all this information over so if you go down the comments right I have a previous video that covers how to use email but so the thing that we're going to do that's gonna be new here so will spend more time on his we're actually and look at how to email an attachment based on what you've got there so I'm gonna click on consent right and so on select it's currently set to false and so let's grab the formula paste it in alright so I've got it so we'll paste it right here now you mean as we notice that everything goes red why is that if you watch the previous video you know that I'm trying to send an office 365 Outlook email but I haven't connected to office 365 so I've got to do that first so I'm going to view data sources add a data source and then I'm going to choose outlook I did that in the previous video Milan cover how I set all that up the first time so if you need to see it go check out the other video but now that we've added that if we go back to our consent button so now it's like alright so office 365 send an email we're going to send it to Shane dot young at bold zebras this part right here i type right done this differently this should be my subject text and then we've got the body text and then we've got attachments so right attachments as well as optional things when you've sent an email but when you do an attachment you don't say attachments : table then you have to define the attachment right so name and we're gonna name our spin input JPEG you name whatever you want that's what I'm going to name the attachment I send it and then contents bytes so where's it gonna get it from while pin input 1 is not what I named it so I named it signature this is we're naming helps so content by its signature dot image so grab the signature image put it in a file called pin input dot JPEG and its own data type is nothing but we have to specify that and then we're actually going to delete the back side this we're not ready for that portion yet but so that right there is everything that we should need so it looks good now in the other video we talked about how to actually you know reference these but you know if we wanted to set the name right we could say body text equals that and we're set it to name dot text and so then now in our email it should it should say body text put a space in there like that so that's how you're gonna reference these fields as you build out your email so let's try out so I hit play wait hey I just realized I made a major boo-boo so I was went produce a video this morning you notice I'm wearing different clothes right it's a different day okay I ran out of time yesterday to finish the video and as I was going through I realized I forgot to tell you guys to save the form right autosave takes effect once you've saved it the first time then it's going to save it going forward but if you're like me yesterday I finished the video and then I went upstairs eat dinner I came back this morning it's like yeah your sessions expired and I've lost all my work so right now before you continue with the whole grand finale this video make sure you go over you hit file and then you say save and then you give it a name and then do that whole process right so if I do save as you'll see it so give it a name consent video - and then you can save your form write it so save and then you can go back to business and then it will auto save all your work oh it got me and it's driving me bonkers because I had to watch myself and remake the whole video the other thing that we forgot to do let's do two quick cleanup things one was we forgot to rename button once will call this will cause button consents not really a big deal because you don't ever reference these but just easier and then we'll call this button refresh cool alright so that's it sorry for the interruption get back to it and look you get a preview what I'm wearing in the next video so hopefully I'll see you there thanks so bold zebras calm all right none of this matters but we'll just check some boxes we'll sign something because we do want to see the pin input let's do some red some green right it's not Christmas but it could be depending on when you're watching it and so now let's hit consent we see the dots go across the top we'll give it a second okay so the form came back so we know it's out there in the the internet flying across so let me hang on one second I'll grab it out my email box and so there you go there's an email I got so it's got the pin input JPEG right there's my subject text body text and then Shane the name we put in the value so that's that step one I'm doing this consent form right the based on the raw requirements I got the first time that would 100% accomplish everything we need to and I think you know this has given this to a good good distance for a lot twenty minute video so we're gonna do is we a stop here for today and then we're going to make a second part so part two we're going to come back in here now we're going to add all the conditional formatting we're going to add the the pop-up and we're going to take this thing and add all those WYSIWYG features that make it a lot more fun a lot more usable right this is working this is doing what we needed to do but now we want to do validation you know greatest consent button out and so we've made sure everything's good and take a look at that so that'll be the next video hope you liked it if you've got any feedback any thoughts of warning the stuff was I did definitely leave it below and the good news also there's a link below to the other video and I promise that I won't actually publish this one until the other ones done so they'll get both publishes this roughly the same time so you won't be left wanting for too long right I'm not I'm not Steven Spielberg here no cliffhangers or anything for you cool cool all right well thanks and have a great day hey it's me again just a reminder if you don't mind quick the old subscribe button over here that always helps me out or if you want to work together you can always hit me up through the bold debra's or if really what you want is some more of these power out videos which is probably what you want then the playlist is somewhere on the screen here alright thanks have a great day