Generate a CRUD app from any database with one click!

Generate a CRUD app from any database with one click!

Most apps on the internet are actually CRUD applications. What this means is that any basic app does the following functions: Create, Read, Update, and Delete (CRUD). In fact, if you look at Twitter, it’s a simple CRUD app where users can create tweets, read tweets, update tweets (like re-tweets) and delete tweets! CRUD apps are used on a daily basis by several businesses and organizations to maintain their day-to-day workflows. For example, in an enterprise organization, HR departments would be using a CRUD application to manage staff and keep track of existing employees.

Well, at Appsmith, we know how important CRUD applications are for internal operations. Why should something so critical to an organization's success be difficult to make? Well, we took matters into our hands and we made it super easy to make one. What if we said that you can now make the entire CRUD application with all the UI, logic, and complete control in just one click? Yes. You read that right!

We’re super excited to announce our new feature called the “Generate New Page from Database” With this, you can build CRUD applications within no time. We’ll discuss a bit more about our approach in shipping this feature in this blog, and also talk about how you can use this feature on the Appsmith framework.

So What’s This Feature All About?

The idea of the “Generate New Page” feature is rather simple, we wanted to ship a feature that would help developers save time in building UI and writing queries for basic CRUD applications. Now, all that users have to do is just open the canvas for a new application, connect a data source and then click on the “Generate New Page” option. And here’s what this will do:

Gif.gif

First, it will create four new queries for you from the selected data source that will do the following:

  • CREATE new data (rows) into the table
  • Read all the data from the selected table
  • Update a particular row item in the table
  • Delete the selected row item in the table

These straightforward CRUD operations will be automatically generated for users!

As for the UI, this feature will automatically create a new table and fill all the data in the table using the read query. However, users can customize the rows based on specific use-cases after the application is generated.

Next, when users click on the ‘Create Row’ button, it will open a modal to insert new rows into the table. This option will use the ‘Create’ query.

To update the data in a particular row, users can use the Update Row container on the right, where they will be able to update any row data by selecting from the table and using the form. This will be using the ‘Update’ query.

Finally, inside the table, the last column will be populated with buttons which when clicked will delete the entire selected row by using the ‘Delete’ query.

What a breeze! Not just that, the table comes with powerful features where users can search, filter or sort contents of the table by configuring it.

Following is the screenshot of the entire generated UI.

UI.png

Now, we’ll talk about how to use this feature!

How To Use the Generate New Page from Database Feature

In order to be able to use this feature, the first step is to connect a new data source on the Appsmith application.

If you’re new to Appsmith follow the steps below:

  1. If you’re an existing user sign in to your account or you can sign-up here for free.
  2. After you sign in you’ll be redirected to the Appsmith dashboard where you can create a new application by clicking on the Create New button.
  3. This will create a new Appsmith application, now to connect a data source click on the + icon next to the Datasource option on the left navigation bar.
  4. You can choose from a wide range of options here, in case if you want to test it you can use the mock-users database.
  5. Next, under the active data sources click on the GENERATE NEW PAGE option.

You’ll see the following options:

Options.png

Now, you can select the table and add a searchable column. As soon you click on the Generate Page, you’ll see the UI where all the CRUD operations can be performed.

Hola, and with just one click the entire application is generated. Hope you love this new feature.


Follow us on Twitter and Linkedin to stay up to date with more news and announcements!

We love feedback, and we want to know your thoughts. Write to us with your ideas, opinions, or even send us brickbats on .

If you want to write a blog for us, send me an email and I’ll make it happen: .