Description Transcript
Learn how to build forms in Retool to capture and validate user input, connect to Retool Database, and trigger queries that keep your apps dynamic and user-friendly.
Join Developer Advocate Angelik Laboy Torres and see how forms in Retool let you capture clean data from users. Add input components, validation rules, and event handlers that connect your UI to your database instantly.
Retool Forms Step-by-Step: Inputs, Validation, and Event Handlers
00:00 What Are Forms & Why Are They Essential for User Input?
00:49 Method 1: Generate a Form from a Database
01:46 Connecting to a Retool Database Data Source
02:34 Testing the Auto-Generated Form & Submit Query
03:20 Method 2: Manual Form Building with Components
03:38 Adding Input Components (Text, Number, Dropdown)
04:49 Adding a Table Component to View Live Data
05:21 Data Binding: Connecting a Query to a Dropdown's Options
05:40 Configuring a Submit Query to Create or Update Records
06:41 Using Event Handlers to Trigger the Submit Query
07:06 Automatically Refreshing the Table After Submission
08:26 How to Set Up Form Validation (Min/Max)
09:11 Setting "Required" Field Validation Rules
09:50 Recap: What We Learned
Read more 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]
