The number data type stores numbers. A number column is a good choice if you want to store data like age, values, scores, IDs. The number column type is important when you need to do calculations within your data. Within the Number data type, you can provide min and max values. This allows you to add additional validation to your data type.

Creating a number column

The process for creating a number column takes a few seconds.

1. First, click the Create New Column button

2. Give your column a name - we used Score in the video above.

3. Choose Number as your data type

4. Give it a min of 1, and a max of 5

5. Click Save Column

6. Add data to your new column by adding rows

Using the number data type

In the Design section, you can pull in information from your number column, using the Repeater component and binding.

Important considerations

• A number column can only include numbers.

• It cannot include punctuation marks, letters.

• Telephone numbers need to be stored as a text/string data type because they often begin with a 0 and if they were stored as an integer then the leading zero would be discounted.

The text data type stores text, including numbers - also known as a string. A text column is a good choice if you want to store data like names, addresses, or simple custom data. It is a popular data type and one you are more than likely going to use.

Creating a text column

The process for creating a text column takes a few seconds.

1. First, click the Create New Column button

2. Give your text column a name - we used Name in the video above.

3. Due to the popularity of the text data type, it is shown by default; so there's no need to change it.

4. Click Save Column

5. Add data to your new column by adding rows

Using the text data type

In the Design section, you can pull in information from your Text column, using the Repeater component and binding.

When creating a column in Budibase a data type must be specified for the column. This section will cover the different data types, the use cases for them and how they're configured.

Below is a list of currently available data types for your web apps:

1. Text - the most basic data type, this is as you would expect, text in any format. The length of the text can be validated with the "max length" option.

2. Options - Similar to a text but in this case a set of options can be specified, when a user is creating/updating a row field will appear as the options that have been specified in the form of a dropdown.

3. Number - another very basic data type, this can hold a decimal number and the range can be specified with the "min" and "max" value options.

4. True/False - for use when a "yes/no" like option is required, when a user is creating/updating a row this filed will appear as a checkbox.

5. Date/Time - a data type for recording dates and times, these will always be recorded in the form of an ISO 8601 date string. When a user is creating/updating a row this field will appear as a date picker. The upper and lower limits for this time can be validated using the "earliest" and "latest" options when creating the column.

6. Attachment - used for storing files, like images or documents, an attachment field can store many different files at the same time, a single row can contain as many files as are related to it. When creating/updating a field of this type a file drop zone will be used.

7. Relationship - One of the more complex concepts, this allows making a link between different rows in two different tables. Row to row relationships can be compared to something like a join statement in SQL, in that they are ideal for creating many-to-many relationships. When creating/updating a row this field will appear as a multi-selection that allows selecting any number of rows.

8. Formula - The formula type lets you do calculations on different fields. You have access to most of the built-in Handlebars helpers here. Check out the Formula page for more.

True/False is a data type that has one of two possible values (usually denoted as true/false, yes/no, Boolean). Within your UI, this is usually displayed in the form of a checkbox.

Creating a true/false column

The process for creating a true/false column takes a few seconds.

1. First, click the Create New Column button

2. Give your column a name - we used Completed in the video above.

3. Choose True/False as your data type

4. Click Save Column

5. Add data to your new column by adding rows

Using the true/false data type

In the Design section, you can pull in information from your true/false column, using the Repeater component and binding.

The date/time data type stores dates. This is important when using components, or displaying information that relies on time/dates. A calendar component, for example, will utilize the date field. With Budibase, you can also provide an earliest and latest date, within your date/time data type. This allows you to add additional validation so dates added have to fall after, before, or in between the earlier and latest dates. The date's within Budibase comply with ISO8601 formating - 2020-09-24T13:12:04.622Z. Thankfully, we have a date picker that removes the need for data entry and makes life easier.

Creating a date/time column

The process for creating a date column takes a few seconds.

1. First, click the Create New Column button

2. Give your column a name - we used Date Started in the video above.

3. Choose date/time as your data type

4. Add an earliest or latest date - we added an earliest date

5. Click Save Column

6. Add data to your new column by adding rows

Using the date/time data type

In the Design section, you can pull in information from your date/time column, using the Repeater component and binding.

The options data type stores options in the form of strings/text that are available for selection. When adding options, you must take a new line for each option.

Creating an option column

The process for creating an option column takes a few seconds.

1. First, click the Create New Column button

2. Give your column a name - we used Department in the video above.

3. Choose options as your data type

4. Add your options - we added IT, Sales, HR in the video above

5. Click Save Column

6. Add data to your new column by adding rows

Using the date/time data type

In the Design section, you can pull in information from your options column, using the Repeater component and binding.

Almost every web application needs to manage static files in some way.

These could be images, text files, audio files and more. With budibase, you can upload your static files to your budibase applications with ease. We are going to cover how to upload and display your files both inside the budibase builder and in your web applications themselves.

Let's get started.

The Attachment Field Type

In budibase, static files are stored under the Attachment field type. Attachments can be any static file - images, CSV files and even code. To create an attachment field type, add a new column to a new or existing table and select the Attachment type. An attachment field can have as many attachments in it as you like, but the maximum file upload size per file is 20MB.

Uploading Attachments

When you create a new row in your table by clicking the "Create New Row" button above the backend data table, you will be presented with a dropzone component for your attachment field that you can use to upload files.

Once you have selected your files, image files are processed in the background and resized. Other files are just stored as is, without any kind of resizing or transformation applied. These files will remain on your machine until you deploy - at which point they will be uploaded to the budibase hosting cloud.

Your attachments will be displayed like any regular field - inside grids and tables, forms and more budibase components.

To see attachments in action, take a look at the following example section. We will build a small app for storing country data using budibase attachments.

In this example, we will be creating a simple web application that will be used to store information about different countries around the world. Some of the information we are going to include in our application:

• Country Name

• Country Population

• Country Flag

• Travel Guide

Creating Countries Table and Columns

Let's begin by creating a table to store data for our countries.

Next, we need to create columns in our Countries table. Let's look at the information we need to include about each country and decide which data types are the best to use for our columns.

• Country Name: Country names are just letters, so a Text type is a good fit here.

• Country Population: We should use a Number type for this.

• Country Flag: This will require an image file - here is where Attachment types come in.

• Travel Guide: We can store PDF travel guides for each country here. Let's use another Attachment type.

Watch the video below to find out how to set up your table as detailed above.

Creating Rows and Uploading Data

Now that we have set up our columns, we can start to add some rows to our Countries table. You will now notice that on row creation, you will be presented with dropzone components inside the row creation popover for both of our attachment types - Flag and Travel Guides.

Let's create an row for Spain. Follow along with the video below to find out how.

Here are the files used in the video below if you don't have your own:

• Spanish Flag Image

• Spanish Travel Guide

Muy bien! 🇪🇸

Let's see what's been automatically created for us in the frontend of our app.

Frontend

Navigate over to the "Frontend" tab in the builder. You will notice that some screens have been created for us when we created our Countries table.

• Countries - New: A screen with a form that can be used to create a brand new country.

• Countries - List: A screen with a table containing all the countries in your countries table.

• Countries - Detail: A screen used to represent a single country. When you click the View button in the Countries List table, you will be navigated to the detail page for that country.

Let's preview our application and interact with our attachments! Click the preview button on the top right of the builder. You will be navigated to your app in your default browser. Log in with the credentials that you set up when you initially created your app and you will see the homepage of your new app. Navigate to the automatically created "Countries" link in your navbar - you should see your countries listed in a table:

Let's dive into some of the different ways we can interact with attachments in our application.

Edit Country Attachments

Let's edit our Spain row to add another travel guide. This involves navigating to the detail view for Spain and adding another PDF file.

Delete Country Attachments

You can delete an attachment from the Country table or the Country Detail Screen. Let's delete one of our travel guides from the table view, and the other one from the detail view.

This section covers one of the more complex topics of your Budibase web app, the ability to create relationships between different rows. It is important to note that when a relation between two rows is formed these two particular rows become joined, rather than any particular fields in the rows being joined. The relationship is bi-directional, in that when it is created each row will have a relation to the other one. A row is also allowed to relate to many rows, meaning that many to many relationships can be created in your web app (if required).

Creating a relationship column

The process of creating a relationship column allowing rows in two different tables to be linked is quite simple.

1. First, create/pick two tables that the relationship should be formed between.

2. Make sure that in both tables there is a column defined which can be used for display purposes, when creating this column make sure to set it with the Display column toggle.

3. Click the Create new column button in either of the two tables and select the Relationship data type from the dropdown.

4. Here you will need to select two options, the table to which this column relates to, and the name of the relationship column in the other table as well. The example coming up should explain why it is necessary to name the column in the other table.

5. At this point, you will now have a relationship formed between the two tables! If you create a row in one of the tables, then go to the other table and create a row you should see the first row that was created as an option in the relationship multi-select.

Using relationships

This section covers how to create and update relationships in relation to the tables and you might be wondering how to actually use them. This is for a different topic and has been covered in the Design - relationships section.

Coming up

In the next section, we will cover an example of relationships, how to build them, and the various types that can be modeled.

Just like with the other data types, start by creating a new column. Select Formula and you will be presented with a textbox. Use Handlebars to construct the expression you are interested in and hit the Save Column button.

If you want some assistance when writing your expression you can click the lightning bolt icon to the right of the formula field. This will open a modal where you can select the fields and handlebars expressions you want directly.

The JSON data type is available for internal tables. JSON fields have a schema, which can be configured when creating or editing the column. Having the correct schema is important as the builder and client library use this to know what bindings are available and what form fields are available. Extra data that is not in the schema can be stored, but no bindings will exist for it.

The JSON field schema can be edited by either a form, or by providing an example JSON payload. If you are using deep JSON structures (e.g. multiple levels of objects or arrays) then you will need to use the JSON schema editor, as the form editor only goes one level deep.

Schema editor button when creating or editing a JSON column:

Form JSON schema editor:

JSON example schema editor:

JSON field schema is merged with table schema in client apps, and basically treated as new top level columns. This means you can filter on nested values, or display them inside tables, as if they were normal fields in your table. Here's an example of a table showing all columns inside the table containing the JSON field above:

In that screenshot, you can see that it has pulled out fields from within the JSON field and displayed them automatically. It also is showing the JSON fields as a whole (as it shows all columns by default) - but you can easily control what gets displayed by using the table setting:

You can filter using fields inside your JSON. Here's an example of filtering using the nested value Car.Make:

Data bindings

Data bindings will be automatically generated for all available fields inside your JSON, including nested fields (e.g. Car.Make). Data bindings will be generated until an array is hit, at which point no further bindings can be generated. You can read about how arrays are handled down below. Bindings are also provided for the JSON field as a whole and any array fields, both of which integrate very nicely with JS bindings.

Here's an example of all the data bindings provided for the JSON field above. My table is called People and my JSON column is called Data.

Arrays

Arrays inside JSON fields can be used as data sources. For this example, I've added a new property called Friends inside my JSON field, which is an array. Here's an example using a table block to display data of `Friends. The structure is a repeater block (to get the rows that contain the JSON fields) then a table block (to show the data inside the array inside the JSON field).

You can see from this screenshot that the schema correctly determines all available fields inside the array objects and is listing them in the table. If you have an array of primitives (e.g. an array of numbers, or strings) then a fake schema entry value is generated. You can then display data inside primitive arrays using Field.something.value.

You can nest arrays as deep as you like. If your JSON structure looked something like:

{
  "array1": [{
    "array2": [{
      "array3": ["a", "b", "c"]
    }]
  }]
}

Then you can use a repeater on Column.array1, then put a repeater block inside that and target array1.array2, then put another repeater block inside that and target array2.array3, and finally get out the values. You can chain this as long as you like and the schema will always be available.

JSON form field

There is a new form field component for JSON fields. It will render a text area that pretty prints the content as JSON. It also has forced validation to ensure that the input is valid JSON.

The new JSON field component:

Validation enforcing JSON syntax:

JSON form integration

Since nested JSON fields are considered normal fields, you can bind a form component to a nested JSON field. In my example, I have the field Car.Make. If I want to update this, I can simply add a text field and bind it to Car.Make, then save my whole row as normal. This will transparently update the value inside the JSON field with no extra configuration.

Binding a form component to a nested JSON field:

When generating form components automatically (via the "Update form fields" button on field groups) the builder will always insert an actual JSON field form component for the whole JSON field, rather than individual inputs for every nested property. You can always add/remove fields as you see fit if you want to be able to directly update some nested fields.

If you have a form targetting a subsection of your JSON field, then the best way to save your full row value is to write a small JS binding and make use of the new Form.Value binding (which is an object of the whole value of the form) to insert the value into your JSON field. This is only really needed when you are iterating over JSON arrays and want to update one of the array elements.

In this example, we will be creating a web app for tracking students, teachers, parking spots for teachers and classes in a school - specifically how they relate to each other.

Specifically, we are going to break these down into the three relationship types that can be modeled with Budibase. Below we will map out the relationships that we are going to create, first describing them then walking through how to build them.

One to one

The first relationship type we can model in Budibase is the most basic of types, linking two rows to each other. In this case, a Teacher is assigned a single parking spot and that parking spot can only be used by a single teacher.

One to many

The second relationship we can model in Budibase is one of the most common, linking a single row to many other rows. Here we can see that a class can only be taught by a single teacher however a teacher is capable of teaching many different classes.

Many to many

The last relationship we can model is arguably one of the most complexes but again very common in real-life systems. Here we can see that students are able to take many classes and each class can have many different students in it.

Building it in Budibase

To create this in Budibase all we need to do is:

1. Create the four tables, students, classes, teachers, and parking spots. In each of these, we will initially create a display text column and mark these as the Display column - for example, Name or Subject.

2. First, we will create the teacher to parking spot relationship, starting in the teacher table we create a relationship type column, call it ParkingSpot and set the table to parking spots - then name the column in the other table Teacher.

3. Second, we create the teacher to classes relationship, hopefully, at this point, it should be clear how this is done. Simply create a relationship from the teacher table to the class table, name the column Classes and in the other table call the column Teacher.

4. Lastly, we create the students to classes relationship, the same as before but set the relationship table to classes, call the column in the students table Classes and call the column in the other table Students.

As you can see by creating three relationship columns we were able to make a fairly complex web of relationships, which can now be easily managed when creating/updating rows in any of the tables.

Video demonstration

Based on the example above here is a video showing how easy it is to create in the Budibase Builder!