0:00 (upbeat music) 0:02 - Hi there everybody. 0:03 My name is Angelik Laboy Torres 0:04 I'm a developer advocate here at Retool. 0:07 And today we're gonna be covering forms and user inputs. 0:10 We're actually gonna actually be working 0:11 at the forums or gonna be connecting it to data 0:14 and we're gonna be setting up validations. 0:16 All the things that are essential 0:17 in order to do the user capturing effectively in Retool. 0:22 Now, before we dive in, 0:23 I would like to say as to why forms are essential 0:25 in this platform. 0:27 Particularly, I would say that they're the best ways 0:29 capture user input, this could be anything from like updating 0:33 new information or, you know, like creating a whole new record, 0:38 or just simply just like collecting user information. 0:42 Now, for me personally, they are really the bridge between the 0:45 interface and the data sets. With that, 0:47 let's start it. 0:49 So as you can see right now, we're in the retool IDE and there's 0:52 really two ways, two ways of building forms. 0:55 You can either do them automatically. 0:57 So to get started with that, we're going to go on the 0:59 Add UI tab and then I'm going to do form and then drag and drop it over here. 1:04 And then they can see there's either or two. 1:05 There's the add components or the generate from data set. 1:08 We're going to click on generate from data set. 1:11 And then you can see it's so many different types of resources. 1:13 These are the ones that you've already set up and you might be familiar with. 1:16 So let's go over here. 1:19 If you click on create new, this is on the navigation bar of our resources. 1:22 You have all these different types of logos where your data can be existing in. 1:26 And this could be like Databricks. 1:28 This could be like BigQuery. 1:30 Amazon, Cassandra, Google Sheets, Postgres, MongoDB, FireDB, there's so many... Or Firebase. 1:41 So with that, that is actually, if you have already set it up, then you can have access 1:45 to that. 1:46 But for this example, I'm just going to use something more simple. 1:48 So I'm going to do a Retool Database, and I'm actually going to be using this table. 1:53 You might have seen it already, but it is the one with the top users. 1:57 First name, last name, email, phone number, company, 2:00 pretty simple, okay. 2:02 So let's do that, just do top users. 2:08 And I can actually arrange them however, 2:10 like I'm gonna actually disable the ID, 2:13 I don't need this, I'm gonna drag it to the bottom, 2:16 and I do first name, last name, email, company, 2:18 and phone number, that seems totally fine. 2:21 Same thing with the input type, 2:22 you can actually change them to any of these 2:24 if they seem more adequate. 2:27 They try to do their matching as perfectly as possible. 2:30 Gonna click Generate Form, 2:32 and voila! It has already generated a query. 2:34 Which is pretty dope, if I fill this out, 2:36 it can be like, 2:38 Angel, 2:39 I can do 2:40 Laboy, 2:42 Laboy, 2:45 @gmail.com, 2:46 my company name is Retool, 2:48 and I can do all this, 2:50 and that's done, 2:52 that's done. 2:53 Okay, perfect. 2:55 And I can click submit. 2:57 Voila, it went away. 3:00 I mean, it did a simple like resource query 3:02 as you could see over here and an inserted record 3:05 and the object was the information that. 3:08 How do we know if it worked? 3:10 Because you can see it right there live in real time 3:14 by checking back to your database 3:16 or you can set up a table. 3:17 We'll, talk about that in a second. 3:19 Okay. 3:20 So now let's actually do a manual form. 3:24 For that reason, I'm actually just gonna delete this. 3:27 We don't need this anymore. 3:29 Okay, so anyway, right, you might have seen it, 3:33 it said add components. 3:34 So we're gonna click on add components 3:36 and do them one individually. 3:38 These are all the different types of input 3:39 that you have access to. 3:40 Like you have text input, you have number input, 3:43 and let's do select actually. 3:46 Select. 3:47 And then you go in and like change them, 3:49 change the label to them. 3:51 I could do like product, 3:54 back name. 3:56 I can extend this and do pricing. 4:00 Be sure that you select that specific type of label. 4:02 So pricing, I can extend this. 4:06 This is gonna be category. 4:10 Okay, which one is this one? 4:12 Well, we're actually gonna be interacting 4:14 with this table over here. 4:16 This has... You might have seen it from previous videos. 4:19 It has product name, price, category, SKU code. 4:23 Okay, so what are we gonna do? 4:26 Let's actually set up a query. 4:29 This query is actually gonna have the information 4:31 from the table be brought up. 4:33 Where why? 4:34 Well, you're gonna know in a second. 4:36 Okay, select all from products. 4:40 There we go. 4:41 Save and running. 4:43 Cool. 4:43 and let's say product info. 4:49 There you have it, cool. 4:50 Okay, the reason why that is important is 4:53 because first of all, let's drag in a table. 4:56 Let's see how this information is updating in real time. 4:58 It has already matched it up to the query. 5:01 Perfect, this is amazing. 5:03 Okay, so we see all the categories, 5:06 even the well, it's all good. 5:09 Perfect, I can even hide this, select this table. 5:15 There you go. 5:17 I can hide it instead. 5:18 There you go. 5:19 Perfect. 5:20 Okay. 5:21 So what do we want to do? 5:22 We want to make this category the options that are provided, not be manual. 5:25 We want to map them. 5:27 How do we map them? 5:28 Well, let's do it with the query that we just did, the product info. 5:31 Perfect. 5:31 Not product name. 5:32 Let's do category. 5:35 Awesome. 5:36 So categories is working and pricing is working and everything. 5:38 Cool. 5:40 Then let's do a sending away. 5:42 same way that we had the inserting. Let's do that. So let's do it through GUI. I did a research 5:48 query, Retool Database. Let's do products. Awesome. And then let's do update a record or 5:55 create a new one if it doesn't exist. We're going to ask, how do we know that this is working? Well, 6:00 we need to filter it out. We're going to filter it out by the name. So this is going to be, 6:04 this is called text input. Be sure to label your stuff correctly. This is just for the exercise 6:10 right now and let's do key value pairs. So let's do product name with the text input value. 6:18 Let's do pricing with price. This is supposed to be a number input and that value. 6:26 And then lastly let's do category and then the category is fine. Let's do 6:33 What is this? I select one dot data. Hammer and let's go $20 and then let's do tool. 6:42 And let's connect this. Let's connect the event handler to that query that we just made. 6:49 Query one. That is perfect. Submit, control query, query, trigger. Perfect. So when I click this 6:57 Submitted it. There you go. Perfect. Okay hammer. We have it over here. SQU code. It's okay. We need it right now 7:05 Now what do we want to do? We want whenever this form gets updated now 7:08 We want the table to update that information as well. Well, what do we do? 7:12 We go over here and you might have seen this in the event handlers section and one of the previous videos 7:18 So let's go over in the query like category itself the event handlers and then the success 7:24 So what we want to do is actually plus and we want to control query the product info 7:29 That it works because we're already asking for all the information from the get go 7:34 So in this case if not like query run successfully then it would refresh that information in the tape 7:42 So let's test this out save this 7:45 I'm gonna submit a new information. I'm gonna do 7:50 car 7:51 I'm gonna do I 7:53 Don't know how much a car would be and let's do a toy. This is a very expensive toy 7:58 Let's do submit. 8:00 There you go 8:01 Boom and it actually updated both of them, which is I mean this is pretty awesome at the end of the day 8:05 And again, you can keep updating all your forms whenever you do them manually 8:10 Like you can add them by clicking on the plus icon and you have them stuff like adding a new button adding in a new 8:17 number input, a text input, a select, a container, like it's up to you and really your imagination. 8:23 How do you want to collect this information? 8:26 Again, keep in mind all those labels that you want to be updating. 8:29 So now how do we set up validation rules? 8:31 Well, we go over here, once we click on the type of input that we're getting that information 8:36 from and the inspector window, we go into validation rules. 8:40 We click there and we add a minimum or a maximum. 8:43 Okay, the minimum is $0. 8:46 The maximum is gonna be that amount of money. 8:50 So there's gonna be an issue. 8:52 Otherwise, if I go above that, let's say that I go, 8:57 up, it just reset it back. 8:59 Can't beat that. 9:00 Okay, cool. 9:00 Let's do negative one. 9:02 I can't even do negatives. 9:03 Let's do, let's set the minimum to 10 then. 9:05 And then I set this up to two or one. 9:09 What? 9:09 Well, the minimum goes back. 9:11 This is pretty cool. 9:11 You're setting up like different standards 9:13 for what it is to allow that the person can input in there. 9:16 Cool, the next thing is like, you know, allowing a null. 9:20 No, like don't do that. 9:23 Or yes, doing up to you. 9:26 And then also you can create custom rules 9:28 and say is required, okay? 9:30 I wanna make it required. 9:31 And that's where you get the check off over here. 9:34 Let's do the same thing. 9:35 Let's do this one as a requirement. 9:39 Here you go, check it out. 9:41 Let's also set it up as something that is required. 9:46 There you go. 9:47 Perfect. 9:49 And then that's it. 9:51 Okay, so that brings us to the end of the video. 9:53 Thank you so much for watching. 9:54 I know that was a lot, but we really learned how to build forms, how to validate inputs 9:59 and how to connect it to your database. 10:01 And whether it is, you know, using a form that is generated from a data set or from 10:07 of source that you have or something that you want to build manually, these tools specifically 10:11 are there to capture all of the necessary user data. 10:15 So thank you and I'll see you next time. 10:17 [MUSIC]
