Quickstart

Using our internal database to hit the ground running

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.


Getting started

  1. Create a new account at https://account.budibase.app/register (onboarding takes a few seconds).
  2. Once registered, you will be able to login.
  3. Step through the first app wizard, selecting the Budibase Sample data.

Data

Most of the columns, for example First Name, Last Name and Email, are Text data types, which is the most common.

Other types include Number, Date/Time, and more!

The values of some fields are highlighted in a grey 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.

Data section with Sample Data

Data section with Sample Data

๐Ÿ‘

External datasource

If you want to connect to external datasources, have a look at our Datasources section for a list of available connectors.
Further information can be found in the Introduction to Data page.


Design

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.

Navigating to the Design section

Navigating to the Design section

The left hand panel includes four core areas for building out your apps:

  1. Screens
  2. Components
  3. Theme
  4. Navigation

When building apps you will mostly be focused on the Screen and Component views.

The core areas of the Design section

The core areas of the Design section

Autogenerated screens

To get started quickly, click on Add screen. Next select Autogenerated screens to create new CRUD (Create, Read, Update, Delete) screens for each of your tables.

These autogenerated CRUD screens will make use of the Table block and Side panels for fast, all-in-one data interaction.

Adding autogenerated screens

Adding autogenerated screens

Creating an auto screen for each table

Creating an auto screen for each table

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.

Selecting new screen access level

Selecting new screen access level

Upon click Done a new screen will be generated for each table selected.

Autogenerated screens

Autogenerated screens

Components

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.

Hovering the mouse over the table block

Hovering the mouse over the table block

Clicking on the table block to quickly navigate to the components panel

Clicking on the table block to quickly navigate to the components panel

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.

You can also click Add component to add another component to your screen. You can view a list of available core Components and learn more about Data in design.

Blocks

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 tab of the components view.

Available Budibase blocks

Available Budibase blocks

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.

Ejected table block resulting in a detailed component tree

Ejected table block resulting in a detailed component tree


Preview and Publish

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 new browser tab. The app will always open the Home screen.

Preview and Publish buttons

Preview and Publish buttons

App preview showing a 'Detail' side panel

App preview showing a 'Detail' side panel

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, toggle the View as basic user option.

A public user does not have permission to view the app by default

A public user does not have permission to view the app by default

When you are happy with your app, click Publish to make your app live in production.

Publishing an app

Publishing an app

App published!

App published!

When your app is published, you will have the choice of clicking Done which will close the modal and keep you in the Design section, or you can View App on the public URL.


Automate

Automations are not needed for all use-cases, however they offer powerful workflow options such as Cron jobs and Webhooks integrations.

More information can be found in the Automations page.


ย Further exploration

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

If you have any questions or want to browse what other people have been building, please reach out on GitHub Discussions or join our Discord server.