🔙 [BLOG]

Appsmith is an open-source, low-code solution for building internal applications. And Baserow, an open-source no-code solution to replace traditional databases or shared Excel files, an alternative to Airtable.

Let’s see below how to create a lead creation form in Appsmith, with validation rules, conditional displays, and also saving the data in Baserow.

1/ Appsmith

Formulaire

Creating a form is done with the mouse and is easy. Several types of fields are available, and the possible formatting is advanced, with notions of columns, colors, conditional displays, etc.

Note two display modes: Either the page is in “auto-layout” and will adapt to the display screen, and the elements do not have fixed display coordinates, but are stacked or are juxtaposed. Either the display is free with a grid and the widgets are placed there.

Among the advanced widgets available, note cards, sliders… and it is possible to create new ones, we will see that later.

Styles

Conditional display

To make the form easier to fill out and not frightening with its length, it is best to display it in pieces. However, we are not going to validate each piece each time, and let the user move forward/backward as he wishes.

To do this, we will use stacked containers, and buttons to move from one to the other.

Each button can use one of the predefined actions, but also launch a completely specific JavaScript action.

We can observe that each object on the page is accessible by its name, and we will appreciate the auto-completion accessible in the small editing block

JavaScript generator with AI (beta)

In line with the possibility of adding JavaScript to manipulate objects on the page, Appsmith has developed a functionality that allows you to write what you want and obtain the JavaScript code that does it. It is then up to the user to adapt and validate it.

Regular expressions

For the more advanced, the validation of a field can be done using a regular expression (and you will find all the desired examples on the internet, such as validation of a French telephone, validation of a non-gmail/yahoo email address, . ..)

Github

By the way, a feature that we really liked, the complete connection to Github to commit your modifications. That is to say that modifications to the interface, made with the mouse by dragging and dropping, are translated into configuration files, which can be versioned and managed in branches in github! Also allowing the import/export of projects between Appsmith, localhost and SaaS instances in our case.

Appsmith allows you to commit a project to GitHub, the essential basis for real version management and teamwork

Publishing the application

Publication is very simple, the application is deployable, accessible via a URL. You can make it public, without identification, or ask for identification, or even use a user base.

Be careful, however, if you want to use the application in an iframe, you will have to respect the security rules on domain names/subdomains, or else browsers will block it. And therefore use the SaaS version with domain name, or host it yourself on a compatible subdomain.

Et voila, you have finished your application – here a simple form, but it can be more complex, with several pages, tables, lists, a user connection… Several templates are available so you don’t start from scratch.

>>> Now let’s see the Baserow part for data management and storage