So What’s This Feature All About?
How To Use the Generate New Page from Database Feature
Follow us on
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 to shipping this feature in this blog, and also talk about how you can use this feature on the Appsmith framework.
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:
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 the contents of the table by configuring it.
Following is the screenshot of the entire generated UI.
Now, we’ll talk about how to use this 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:
If you’re an existing user sign in to your account or you can sign-up here for free.
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.
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.
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.
Next, under the active data sources click on the GENERATE NEW PAGE option.
You’ll see the following options:
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.
Voilà! With just one click the entire application is generated. Hope you love this new feature.
We love feedback, and we want to know your thoughts. Write to us with your ideas, and opinions, or even send us brickbats at firstname.lastname@example.org.
If you want to write a blog for us, send me an email and I’ll make it happen: email@example.com.
What’s better than some space? More space. We’ve cleared out the clutter and developed a brand new full-fledged code editor to make the coding experience on Appsmith smooth like butter. Our Github rep...
Building an app on Appsmith is great fun. Why? Because it takes minutes to build a clean and consistent UI, and less than a few hours to make data connections. We might be tooting our own horn, but w...