This tutorial will take less than 5 minutes, and at the end, you will have successfully built a complete CRUD application.
We will use the Sample data, which includes a few tables with various data types to look at.
- Create a new account at https://account.budibase.app/register (onboarding takes a few seconds).
- Once registered, you will be able to login.
- Step through the first app wizard, selecting the Budibase Sample data.
Most of the columns, for example First Name, Last Name and Email, are Text data types, which is the most common.
The values of some fields are highlighted in a coloured pill. This indicates the value to be either a Multi-select value such as the Employee Level in the Employees table, or a Relationships link such as Assigned in the Jobs table.
As we have some data, we can now start building out the front-end of our app. This is done in the Design section, which can be navigated to via the tab at the top of the page.
The left hand panel includes four core areas for building out your apps:
When building apps you will mostly be focused on the Screen and Component views.
To get started quickly, click on
Add screen. Next select
List view to create new CRUD (Create, Read, Update, Delete) screens for each of your tables.
When creating screens you will be asked to provide an access level, but this can always be changed later.
You can read more about screen access levels, but in this tutorial we will stick to the default of Basic access.
Done a new screen will be generated for each table selected.
With the screens created we can view and edit the components for each. An easy way to navigate to the components panel is to click on the table within the design view.
With the table block selected, you will be able to edit its settings via the Settings Panel. Here you can change the Title, Data, Configure columns, Sorting, Filtering, and more! These settings are explained on the Table block page.
In Budibase there is a category of components known as Blocks, which are collections of pre-built components designed to make building your apps easier and faster.
A list of them can be found in the Blocks section of the components view.
Sometimes you will find yourself needing to make a fine-grain tweak that cannot be done through the settings panel alone.
If you wanted to edit the form fields in the side panel of a Table block, for example, you will need to click the Eject button to pop open the block.
During development you may wish to test out your app so far. Click the
Preview button in the top-right to open the app in a modal. The app preview will always open the screen selected within the builder.
You will also notice that navigation links were automatically added to the nav bar when we created the autogenerated screens.
To view the app with a different permission level, change the
View as basic user option.
When you are happy with your app, click
Publish to make your app live in production.
If you click the name of your unpublished app you can change the app name, icon, and URL. When published, this edit icon will be replaced with an open app link instead.
When an app is published, green text will show you when your app was last published. In addition you will have a few other options available:
|Unpublish||Remove your app entirely from production|
|Revert||Sync your production app into dev (overwriting any changes)|
|Publish||Sync your dev app into production|
|Embed||Get the iframe code for Embedding your app|
|Open link||Click on the title of your app to open your production app in a new tab|
More information can be found in the Automations page.
The settings tab includes a variety of options for your app. These include:
In addition you can
Delete app. After confirmation, this will unpublish and permanently delete your app.
At this point you can see the speed and convenience at which Budibase allows you to get your users interacting with data.
There is however much more to explore, and a broad range of possibilities. If you wish to add logic and interactivity to your apps, these docs pages may be a good place to check out:
The Budibase community
Updated 3 months ago