Add Collector Text with airSlate SignNow

Add collector text

and today's show we will learn about collections and power apps collections are a special type of power apps variables that allow you to kind of work with the whole data instead of just individual pieces of information I think they're pretty handy so I thought we'd learn about them but first here's our intro hi my name is Shane Young with bold zebras those guys and today's show is all about the collections variable in power-ups it's unlike the other ones we're used to setting one piece of information and kind of retrieving that whether it's in context or globally this particular variable lets us do a table of information so we can store bigger things you know my shopping cart out of it you might collect a whole bunch of data to let users kind of prune through it before you submit it send it off on email collections open up the ability for you guys to kind of create a bunch of different solutions so what I want to do in this video is just kind of start with the basics how do you use them how do they work so in subsequent videos we can do some more complex stuff if the other types of variables which are after don't worry look down below right there are links to the other video I made that covers global and contextual variables but this one's going to be about collections so let's just switch over to my desktop and soap our apps calm right I'm going to sign in and so after a few seconds there will and click on apps and then we will say create an app alright and so for two collections we're not going to work with any of datas or any connections in this video so we're going to just use a blank app and we'll make it the tablet layout so gives us a little more space alright after about five seconds that popped right up there so we're going to skip over the tutorial so you should watch it at some point if you haven't or not watch yet but kind of go through the process anyway you know what I mean and so let's build out and work with collections so the first thing we're gonna do is we're insert we're gonna stick some labels on here so one cert a couple labels I think collect some data to put in there and so this first one we'll call name right it's me real complicated stuff and then this one we want to do phone number and then actually we'll make a third label here because that will help us in the further example and we'll call this comments okay so there's those glaybels now remember it's a good practice go over here and label your labels ha right so this one should say label name label phone number label comments we're not going to go through all that but kind of keep that in mind if you're building this that's a good idea so the next thing I'm gonna do is collect information so I'm going to do text and text input and I'm gonna do three of these also one two three just like so boom grab the sky and so we'll put it right there I'll grab this one here and put it right there you don't put this one right here and then I also always kind of run in here real quick and get rid of all this default text it's great that's there because when you look out for the first time you don't know it's due but we know what to do so we're not needing a default text so you got ready to fault text and I am going to label these some we call this what do i underscore right so name and then for this one we'll do i underscore phone and you'll probably get the reason why in just a few minutes when we do the hard part and I notes cool cool and then of course in a second we're gonna need a button to do some stuff so we'll put a button here um and so with that we're gonna do is we make this button add the data to our collection right so we're gonna go over here I'm gonna say the collection Oh make your button a little bigger huh nice big button right we like up that finger so we'll make that easy alright so we've got a button and so here we go to use a collection all you have to do is start using it right you don't have to define it somewhere else you want to set it up ahead of time all you have to do is pass some data give it a name and make a collection and so to do that what you do is rebutted we're gonna go to the on select property and we're going to type in the function collect and so as you can see collect adds one or more items to the specified collection cool so we'll hit enter there and so collect so now this is where you get to name your collection so we'll call this contact info because I'm not very creative do a comma and then now we're going to do our little curly braces and so here what you're going to do for each column that you want to have so like we want to have a name column I'm gonna name the name column name so name : my set says create a column named name and then : says set its value to and in this example we're going to set it to what we're going to do it to i underscore name and then you want to do dot txt right because we don't want the field in there we want the value that's been typed in the field in there right so that's going to create a columns called name and whatever we put in the textbox for name is going to be in there so I'm gonna do a comma will do another same type of thing we'll do phone : and then for phone we're gonna put in i underscore phone it helped I typed it correctly and then dot text just like that he's a little tab complete to avoid clicking and then finally for comments will do comments and then same type of deal i underscore underscore I called it notes for whatever reason I'm crazy and then dot text but that's alright as the nice thing about labeling it was I labeled it so I was able to reference what it I really mean because I instead of it saying label one label to label three alright so then we'll put a that guy to close up so that's defined oliver information and then we'll do a print to close it out and let's try it out so if we go over here we'll hit play or in a little preview button so we'll type in chain and then my phone number so you can all call me and tell me how awesome I am and awesome and then we'll click Add to collection alright so nothing happened but I mean it did right behind the scenes it added all that information in the collection we just didn't have a way to manifest or show that so first way we can check it this will close a preview and so if you go to the View button and then click collections you can see that it will show you your collection the first five pieces of information and so you can see comments is also named a Shane phone is my number so it worked all right so we know how to put something in a collection and if we were to hit play again alright and so now I will say my dog's names will say chewy and he smells will say add to collection we don't have any indication that it actually worked when I click the button and it worked right you guys have faith I clicked so hit X so in order to better look at your data all right what you probably want to do is you probably want to use a gallery so we will say insert a gallery and for us we'll do a vertical one alright it kind of added to the page right on top of things that power wraps has a bad habit that and so then now we're gonna it alright so for data source hit the drop-down here and there's your collection so contact info shows up very cool you can choose a custom layouts we don't have an image or anything we're just going to do a title and subtitle great and then for title we'll set that to be the person's name and for subtitle we will do phone number so close that so get out of the way and so now if we do preview you can see that Shane and Chewy's records have shown up if we add another one for my wife right better very not get ourselves in trouble right is very pretty we don't want to don't wanna get in trouble as close to Valentine's Day I'll say add to collection and so it put her information in there as well right this is very core this is how collections work right if you've gotten this far you now have data in a collection and then you can use it for different different purposes and so now let's take a look at how we might manipulate that over right maybe let's make the next thing let's figure out how to get rid of that collection good idea so what I'm gonna do I'm gonna grab this button highlight it I'm gonna say ctrl C and then ctrl V so that copy the button will move it down and put it over here oh these buttons are too big you guys better do a better job of designing your solutions at either mine are ugly but mine are dysfunctional right you guys need to write stuff that users have a nice user experience so don't let me down so we'll change this one too clear the collection clear collection okay and so then now on the on select for this what we're gonna do is roll kit clear so the clear function just clears out the whole collection so if we put in as you can see it's suggested contact info for us so just like that that's all we I do clear contact info if we hit preview so now by a quitter collection by by data is gone right so I had Nicola back and when you're working this stuff it's always better to have at least one thing in there so you can kind of see and touch it if you don't I'm also pretty we can leave that then it makes it a little weirder for you working with so always leave yourself some data and there is your learning and testing okay so that was clear quite clear now you also probably noticed will delete this and put it back but there's also a command there a function called clear collect so clear collect what that does will clear out the collection and then start putting data back in there I don't use that one very often but the idea is it's just trying to cut it down so if you know you want to wipe it out and start replacing with data right away you want to do it one step quitter clicks can do that I don't use it very often I just do a clear and then if I need to you know have a collect button like I have there alright so we'll hit escape so it puts my correct clear contact info okay so that was how you clear out your whole collection but what if you just want to get rid of one item in your collection good question so what we're going to do for that is we're going to go over here to our card alright and so we're in our gallery and we're gonna say insert an icon and one cert the trash can boom see this is why it's nice to have some data can I kind of see where it goes outfits in so we're gonna grab this guy and we're gonna put it about right here probably should make it a little smaller so it kind of fits the style it's not exactly centered but you get the idea okay and so we're going to do for this particular trash can now is we're going to say on select we're not gonna select the parent what we're gonna do is we're going to take advantage one of the cool things about a gallery and that's called this item so if we type in this item that represents the current line right among the trash can that have highlighted there it's representing the Nicola item if I go down and click on the trash can below that I'd be representing the Shane item so we're going to say alright this item so that's how we would represent it but what we want to do is we want to use the remove function so remove and then you say what collection right so let's start over here so we'll do remove and so when we click remove you can see it's asking all right what collection we direct remove stuff from well contact info and then what item and so the way we specify the item is this item so we do just like that BAM Oh whammo so it's preview now so now we got this cute little trashcan and so if I click on Shane he's gone right if I click on Nicola she's gone so it's a bility for me to work with individual items right I'm putting four or five in there so I don't get rid of just that one and just that one not one now when we get rid of the whole thing so that's a great way for you guys when you want to give the users the ability to delete something in collection right one of the places this came up in the forum's recently was my wand upload a bunch of photos and then let the user go in and pick which ones they wanted to remove my little trash can icon what does the answer to that question alright okay so now we know how to get stuff in there oh we know how to get stuff out of there so now how could we work with this stuff so the last thing I want to kind of explore here for a minute is let's say that now once we put it in here when we notice that we can't see the comments for example right we want to have a more detailed view of this and so you might do that on a separate screen we're just going to do it down at the bottom so for right now we're gonna grab a label we put it down here we'll say item details and then we'll go the home screen here we'll make it nice and big right so we know that's important yeah well make it bold and then we'll grab it and kind of pull this over here okay so item details and so then down here at the bottom what we're going to do is we're going to insert a label so grab this label you know if I was really smart I'd probably just missed it so what we should do smartly I'm gonna pair to grab this label and we're going to a control copy of control C and then we're gonna go down here press control V and so then now I got name okay so there's name and then I'm going to insert a text input I'm gonna drag this down here boom okay and so in tax input for default we don't want text input obviously but what wouldn't you do is we need to specify the current item that they've clicked on so to do that you're going to specify the name your gallery so gallery one and then for gallery one there is a special property called selected so that is the one they've last selected selected and then we will show the name of what is selected okay so you already see Shane down there so let's go preview that real quick so let's say preview let's add another one for Nicola and so when I click on this little arrow it's going to make Nicola the selected one now it's gonna make Shane the selected one so it's changing the data that we see down here based on to show which one is was last selected here and that's gonna work even across screen so if we had made this button what we could have done if you look at this little button right here right so it selects the parent and then we could make this next step right navigate and then navigate to screen two if we had screen two and show the information over there right that's how the value default apps work but for right now we don't need any doing that because we're just happy with Oh selecting the parent there we go so then right what we're doing just repeat here so I'm gonna select both of these we're gonna hit ctrl C again we're gonna hit ctrl V again or drag these two guys down here and so then we'll put a text input here and then so for this text input the default value is going to be the same thing again almost right so gallery 1 dot selected dot phone so just like that we've got the phone number right this looks hideous like I can't even believe it I gotta fix it put this here drag you there okay that's better and then one more text input here drag this guy down here and maybe we'll make this one a little bigger hmm and so then what's the value here you should know this by now right it's gallery 1 dot selected Dodds comments boom Shane is very pretty it's written it must be true because anything on the internet is true you guys know that all right so that's pretty exciting stuff right there right now one of the things you might want to do though so right now it's a little awkward from a stand point I like this so it updated Nicola I'm going down here I can type right but there's no way for me to save that back and it's a little you can be a little off-putting for users right if I switched back to Shane and switch back to Nicola oh let's go back up here well when power apps isn't being annoying the data hasn't actually changed right it's add something else to collection click on that person I don't know what's being annoying the data didn't change in the collection I made the easier way to prove that to you just you don't think I'm crazy because PowerShell is being crazy at the moment go to collections you can see that the values are all still what we typed in here I don't know why this is not updating why don't you update who knows um anyway what you might want to do is you might want to take these three fields and maybe we want to let users edit them by default so what we might do is select all three of these boom boom boom and then we go to the home screen and we're going to say group and we're gonna group those three so now they're in a group and then what we can do is we can have a property so we could go over to group we have the group selected and then we're gonna go into display mode and you can see by default the display mode for the group is edit well if you back up at it and you change that to view then what happens well hey we're gonna quit collection it's driving me bonkers Nicola Shane but now if you look down here I can't type in here I can't edit these fields because I set the display mode for those fields to be disabled so the midnight what if they wanted to edit them good good question so let's do that was Chris that by the way a little bit let's add ourselves another icon get will edit icon will bring him down here alright and so then maybe on the Edit one what we're gonna do is rest say oh we want to do it well if set well set of variable so let's do set and then for the variable is edit and then we'll set the value to true just like that okay so if they click that and it becomes true and then what you would do is you would go back to your display mode here and so instead of display mode view we'd have an if statement right we'd say let's do weed out that to let's say if edit equals true I said edit equals true oh then what would we do we will set the display mode to edit if it's not true then we'll set the display mode to view I'll close that out so just something like that and so we hit play and so then now if we click this the Edit icon it that makes these editable now you'd want do a little bit better job right we'd walk sure you want this button to be a toggle maybe or we do want to have a button that said you know turn off edit mode or something like that but hopefully that conceptually gives you the the right idea right I don't want to go through all of that because one more thing I want to teach you it's a little more important and so the last thing I need to teach you is that well what if they took advantage of our edit button and they wanted to change the colas name that's a great question well after they're done we need to save the edit so what we're gonna do is I will create a just a simple button I could be an icon and be a button whatever you want I should have been a icon so we'll change this to be the Save button and so on the Save button what we're gonna do is we're going to take advantage of the last function I want to show you and that is called patch and so a patch patch applies the updates that specified row and changes it in the data source so if we say patch and so what is our data source its contact info what record do we want to update well we want to update the gallery selected right so gallery 1 dot selected just like that and then what type of updates we want to make and so what we'll do is we'll set the the name again - and then whatever this field is so hope I should know I've clicked away but so this is where the fact I didn't label this is not good so we'll do input name - here I'm gonna make this one input name or that name phone - these are terrible names by the way but now trying to make a good app I'm just trying to make teach you the concepts how it works on this right so now hit save okay so name and so what his name is going to be input underscore name - dot txt again and then we'll do that and then we'll say so that's was name then we had phone it's going to be i underscore phone - dot txt and then finally we're going to have a name phone and I believe those comments and so for comments it will be i underscore comments - dot txt like so boom and boom okay so then now if we're over here right we've got Nichola set and but we'll say Nicola edited ice we changed your name and so then we hit save you can see that it updated the value in the gallery right the same thing Shane up here will change my phone number to the local pizza pizza joint's phone number boom boom boom say save so then using patch we're able to edit the data right and patch works on your other data sources we're probably talk about that more in future videos but that's how it works with collections so they would close all that I think that gets us through everything I wanted to kind of go over with you right so now you know how to create a collection you know delete all the collects you know delete an individual item Ally collection and you know how to edit items in the collection so hopefully that covers everything you need to know and helps you out as always if you have any comments feedback on the video you want to make fun of me for making an ugly form I deserve it leave all that down below and let me know or if not you know reach out to me on Twitter or other places these type of videos come from questions on Twitter and through bold zebras and then of course when people hit me up on the power apps forum so what do you mean what comments there and will make your other videos alright 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 deborah's or really what you want is some more of these power rap videos which is probably what you want then the playlist is somewhere on the screen here alright thanks have a great day