Creating forms

Let's say we're working with sales, and we need to build a tool to let sales add new customers into our database. We already have the database schema set up, so we just need to build a simple form to accept data. With Retool's JSON Schema Form, we can do that in just 3 minutes.

1. Build a form to collect customer information

Let's start by creating a JSONSchemaForm component from the right hand side:

Cool! It might look complicated already because it has a bunch of inputs already, but all of those controls are auto-generated from a simple schema. The schema is a JSON object that we can change to generate any kind of form that we want. You can take a look at what the default template schema looks like on the right hand side:

We could write a new schema to fit our database by hand, but why not let Retool do that for you? See the link that says Generate schema from a SQL database table? Let's click on that.

Now, select your SQL database and table from the dropdowns and then click Use generated schema

Great! You should now see your form change and have controls for editing each column in the table. You can make further modifications to the schema Retool generated to make certain fields required, or to restrict some values to values from a dropdown.

2. Creating a new customer in the database

We've already connected a database with write permissions to Retool (if you haven't take a look at Writing to SQL to see how it works!). Let's connect the form we've just created to a new query.

That'll create a new query for us automatically. We'll select the ecommerce database (that's the resource with write access to our database. To make the query insert data into our customer table, change the action to Insert a record and the table to customer. In the changeset section - we'll just fill out the form just like below.

That's it! Now, when you fill out some information in the form and hit "Submit" a new customer will be inserted into your database.

Updated 7 months ago

Creating forms

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.