The REST datasource is a powerful integration in Budibase that allows you to connect to data over HTTP.

Creating a new REST datasource

To create a new REST datasource use

• Data>Sources>Add>Rest>Continue

Configuration

Add additional configuration to your datasource in the form of queries, default headers, authentication and variables. Use the Save button when you have completed your changes.

Name

By default the REST datasource will have a name like REST or REST-1, you can change this to something recognisable if desired.

Queries

A query is an individual request in the rest datasource. Either create one from scratch or import an existing. For more details see:

Headers

Default headers that will be added to every query in the datasource.

Authentication

Configure authentication strategies that can be added to queries in the datasource. For more details see:

Variables

Create static or dynamic variables that can be used in queries in the datasource. For more details see:

Additional Operations

Use the navigator to perform additional operations on queries

• Delete

  • Delete the query

• Duplicate

  • Create a copy of the query

Below you can see a list of available datasources. The way you connect to and use them differs a bit so in the next we sections we will explore them in more detail.

Most companies already have big databases that they want to pull data out of and use in their internal applications. Let's take a look at how we can connect to one.

Connecting to the database server

We will start by creating a new datasource. Click the + button next to the sources heading in the sidebar on the left. Enter a name for your connection and select the SQL source of your choice. In the example below we'll be using Postgres.

Once created you will be presented with a new screen. where you will have to enter your connection information. Enter the relevant information; host, port, database name as well auth information. Once you're done. Hit Save. If successful you will get a notification confirming that your datasource has been updated.

Fetching tables

To fetch the tables from your database click the Fetch tables from databasebutton. You will be presented with list of all the tables. Before veturing forth, update the display columns so that they make sense by clicking the button.

Creating relationships

To help Budibase understand your database you will need to create the relationships. In our example we have products that are related to our tasks via many-to-many relationship. Let's take a look at how something like that would look:

Through/join tables are only for many-to-many relationships in SQL.

If you have a direct mapping of 1:N with a foreign key you do not need a through table if you have a foreign key. To set up a relationship select One and link to the other table. Select the foreign key.

Writing your own Query

There are situations where you need more than a simple CRUD interface. In order to around that we also have the ability to write our own SQL queries. To get started, hit the Add query button. On the next page you will have to enter a name for the query as well as select the function you want to perform and last but certainly not least, enter your actual actual SQL.

After writing your query, hit the run query button. If successful you will be presented with a JSON schema. Click the Schema button and select the appropriate data types for the different fields. When you are satisfied with the query, hit Save Query.

Users in Budibase are global. To add, remove or edit users, have a look at the User Management page.

Creating or editing user roles

The Users Table in the data section is where you manage access, create and edit roles. These are then applied in the User Management page.

Adding user meta data

You can also add columns that are specific to your application here. This data will only be available in this app.

This datasource is the one that is native to Budibase. Any data you add here is stored directly on your Budibase instance.

Creating a table

Creating the table itself is pretty straight forward. Go ahead and enter a name.

Next up you have a number of "Auto Columns" you can pick and choose from. These columns will tell Budibase to add some extra information when new records are added or updated.

For example, selecting Created by and Updated by will add data to your records who created or updated the record is. Selecting Created at and Updated at will show you when a record was created and updated. The Auto ID option will add an auto incrementing ID column to your records so you can keep track of them more easily.

There's also a Generate screens in Design section option. Selecting this will auto generate screens in the front-end. We will talk more about this when we get to the Design section.

Importing Data

If you already have some data in the form of a CSV you can upload one here. Let's take a look at that. If you want to play around with a sample you can go ahead and use the one that has been added below.

When you have uploaded your CSV you will be presented with a number of new options. One for each column. It will look something like this:

Before you create your table you need to select what types each column should have. At the moment you can select between Text, Number, Date, Option and Boolean. It's very important that you select the correct thing here as the type is what determines much of what you can do with it later on in the Design section.

As only you know what your data looks like you will have to pick what makes sense here. Text is generally used for things like descriptions, long-form content, IDs containing letters among other things.

Number is a type that you should use when working with numbers; sales numbers, number of items in some inventory, revenue, profit, etc.

Date is for things like date of sale, shipping dates and so on.

Options can be used when you want a user to be able to pick between a number of different options. For example. In the Sales CSV that we imported above there's a Sales channelcolumn. It has two options: online and offline. When a user wants to add a new sale, this will allow them to pick between these two options rathern than type it in manually - much less error prone.

Picking something that does not make sense will result in a warning next to the column.

Adding or Editing Columns

Once you have imported or created a table you see it added to sidebar on the left under Sources. If you want to add or edit new column types you can do so by clicking the Create column button or by hovering on one of the already existing columns and clicking on the small edit button that appears.

Datatypes

When creating a table from scratch (not importing) you have access to some extra datatypes such as attachment, Long form text, Relationship, Formula and Auto Column. We explore these in more detail on the Data types page.

Adding data

Adding data is simple. click the Create rowbutton and you will be presented with a modal. Fill in all the data and hit save. If you set up your column types correctly when you created or imported your table you will now see the correct controls here. A date picker, option picker, etc.

Under construction.

Variables are a useful way to reuse data across REST queries. Variables come in two forms; static and dynamic.

Static Variables

Static variables store data that does not change. These can range from constants used in the metadata of the request to information about the request itself that can be used in the URL such as API version or hostname.

Variables nested inside other variables will not be evaluated.

Dynamic Variables

Dynamic variables provide a way to chain data between queries.

• Response data from one query can be used to create a dynamic variable

  • Header

  • Body field

• The result of the variable will be cached for a short period of time

• A variable will be re-evaluated if a query using it fails, in which case the query will retry once

• A query will fail if a variable cannot be evaluated

Header Variables

Use the ... menu alongside response headers to select Create dynamic variable

Give the variable a name.

• The name must be unique

• The name will be used to bind this variable in your query. e.g cookie can be used as {{cookie}}

The variable will appear in the Dynamic Variables tab

Body Variables

Use the ... menu alongside schema items to select Create dynamic variable

Give the variable a name as above

The variable will appear in the Dynamic Variables tab

Editing Dynamic Variables

In the above example we can see the user_id variable is bound to {{ data.0.[user] }} which is an object. To access nested data in the response body we can update the variable expression to reference the nested fields using dot notation e.g. {{ data.0.[user._id] }} .

Alternatively a query transformer can be used to update the schema so that the desired field is exposed in the schema directly.

Dynamic variables can also be created manually using the Add variable button.

• Access header data using {{ info.headers.[header-name] }}

• Access body data using {{ data.0.[body-field] }}

Using Variables

Once a variable has been defined it can be used in the exact same was as a binding.

• For example a variable named my-id can be referenced in the headers, params or body of a query using {{my-id}}

Authentication configs are specified at the datasource level and can be selected from queries within the datasource. Adding authentication to a datasource allows queries to run well known authentication strategies and can reduce the amount of configuration needed when multiple queries share the same authentication.

Datasource Configuration

A REST datasource can contain multiple authentication configs of well known types.

• Multiple configs of the same type can exist

• Configs must have a unique name

The appropriate information is added to the request when authentication is selected.

• Basic Auth

  • Adds the Base64 encoded username and password to the Authorization header

• Bearer Token

  • Adds the token to the Authorization headed as Bearer token

Query Configuration

From within a query use the Auth dropdown to select the desired authentication config to be added to the query.

The REST query import feature allows you to import one or more queries at a time.

Import Formats

The supported formats for import are:

• Swagger 2.0 / OpenAPI 2.0 (yaml or json)

• CURL

Import Sources

URL

Enter the link to your API documentation.

File

Upload a file containing your API documentation.

Text

Enter the documentation string directly.

When the import completes the new queries will be displayed in the datasource

Import into a new datasource

To import queries into a new datasource use

• Data>Sources>Add>Rest>Import

Import into an existing datasource

To import queries into a new datasource use

• Data>Sources>Select REST source>Queries>Import

Creating a new request

First, create a REST datasource if you do not have one already. For more details, see:

Use the Add query button to open the query editor.

Name

Give your query a recognizable name that will appear in the datasource navigator. For example, a query that retrieves a list of applications could be called applications.

URL

Enter the URL of the API endpoint you are using. The URL is the requested resource including the protocol, domain name, and path.

Method

Select the HTTP method used by the API endpoint you are using.

• GET retrieves data from an API.

• POST sends new data to an API.

• PATCH and PUT update existing data.

• DELETE removes existing data.

Access level

Select the access level required by the logged-in end-user. If the user visits a page where a query is executed and the access level is beyond the scope of the user's access the query will not run.

Params

URL parameters can be configured in the params tab.

• Parameters are appended to the end of the request URL, following ? and listed in key value pairs, separated by & using the following syntax: ?status=all&other=value

• Parameters can be hardcoded or they can use bindings or variables.

Bindings

Use bindings to supply additional information to the query at runtime. Using the params example from above we can replace the hardcoded value of all with a binding named status that has a default value of all. Now we can change the value of status by supplying it from within an application using the query.

For more information on using REST bindings see:

Headers

Use headers to supply key-value pairs accepted by your API.

• Switch the Active toggle to off to prevent the headers from being sent while keeping it's configuration.

• Headers can be hardcoded or they can use bindings or variables.

Body

Use a request body to send information to an API endpoint.

• The Content-Type header will automatically be set when using:

  • raw(JSON) / application/json

  • raw(XML) / application/xml

  • raw(Text) / text/plain

• If you manually select a Content-Type header, that value will be overridden by the body type

• The body can be hardcoded or it can use bindings or variables.

Transformer

Transformers can be used to augment the format of the returned data.

For more information on using query transformers see:

Authentication

Preset authentication strategies configured at the REST datasource level can be used to authenticate queries.

For more information on using REST authentication see:

Sending the request

When your query is crafted you can use the Send button to preview the results of your query. When your query has been successfully executed you may save the query using Save Query

Using response data

When a query has run successfully the response data can be actioned on to better fit the usage in your application.

Modifying the schema

The response schema may be updated by:

• Adding or removing fields

• Changing the data type used when displaying the result in tables

Creating dynamic variables

The response schema and headers can be used to create dynamic variables

For more information on static and dynamic variables see:

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.

The data section is where you add and manage your data. Budibase apps rely on data and it is strongly advised to create your data structure before designing your web application. Your data structure will involve tables, columns, rows, and views - these are the building blocks that hold and present your data in a structured manner.

Getting started

When adding a data source in Budibase you can either create Budibase "native" sources or connect to external ones.

To add a source, simply hit the "+" button in the top left next to the "Sources" headline.

You will be presented with a modal that shows you all the different source types you can use. In the next few pages we will take a closer look at a few of these.

You are free to mix and match sources as you like. Create an internal table, pull in some data from a Postgres database and/or connect to a REST API.

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.

Use bindings to supply additional information to a query at runtime. In this example we have

• An API endpoint that accepts a status field to filter a list of applications

• A query named applications

• An application that supplies data to the bindings of the query

Creating a binding

We can create a binding named status with a default value of all.

Using a binding

Using handlebars the binding can be referenced throughout the query in the following places:

• URL

• Params

• Headers

• Body

• Transformer

Params example

The binding can be used as the value of a param of the same name. While the name can be shared it is not required.

Headers example

The binding can be used as the value of a header of the same name. As above the binding and header name may or may not be shared.

Body example

The binding can be used in any part of the request body. e.g. as the value of a json field.

Supplying data to a binding

In our application we have the following structure:

Form: Status Form

The form that will hold the value of our selected status. This is the top level component so that the value can be accessed by components nested underneath.

• Type: Create

  • While this form does not create anything, this option is required to indicate that the input schema (the bindings) should be used rather than the schema returned by the query.

  • Update may also be used to the same effect.

• Schema: applications

  • The input schema of our REST query

Options Picker: Picker

We use an options picker in the form to provide our possible status values.

• Field: status

• Adds the selection to the form under the name status

• Options source: Custom

  • Custom options are specified using the Define Options drawer

Data Provider: Applications provider

We use a data provider to run the REST query

• Data: applications

  • The REST query

To link the query bindings to the form we use the bindings drawer

The value of the binding is {{ Status form.Fields.status }} which represents the status field in our form.

Conclusion

We are now able to:

• Specify a binding used in a REST query

• Specify where the value of that binding will be used using handlebars

• Create an application that supplies data to the binding and runs the query

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 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 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.

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 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 . 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 for more.

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

Using the number data type

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

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.

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.

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 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 to which this column relates to, and the name of the relationship column in the other as well. The example coming up should explain why it is necessary to name the column in the other .

5. At this point, you will now have a relationship formed between the two ! If you create a in one of the , then go to the other and create a you should see the first 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 and you might be wondering how to actually use them. This is for a different topic and has been covered in the .

Coming up

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

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

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:

Video demonstration

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

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 to store data for our countries.

Next, we need to create 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

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:

Muy bien! 🇪🇸

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

Frontend

• 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.

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

Using the true/false data type

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

Budibase's Group feature allows you to group your rows together based on the column of your choosing.

How to create a new Calculation

To create a new Group:

• Click the Group button

• Select the Column you would like to Group by.

• Click save

Views are virtual tables. I understand this may seem confusing, but it is the best description, and hopefully you'll understand why after reading the following docs.

When you create a View within Budibase, it presents you with all the data from its linked Table. This provides you with canvas to manipulate your data without changing the data within the original table. This is crucial, as it protects your original data. It also allows you to create:

When designing your UI, you can reference data from your Views. So, if you have a table of sales people and their total sales, you can create a View and a Calculation which gives you the total sales of all sales people. You can then reference the data from this View in the design section of Budibase, and display the answer to the calculation.

How to create a new view

To create a new table, click the create new view button, and give it a name.

By default, a view will display all the data in your table. You should add a filter and/or a calculation to change data is displayed.

One of the core features of views is the ability to filter rows according to particular criteria. When a Row is filtered, it is not deleted—it's just hidden from the particular View you're using and remains within the table (Views are virtual tables!).

Try adding filters when:

• You need to focus on rows that meet certain conditions (e.g. Classes between May and June, and taught by Albert Einstein).

• You need to display certain information, to certain people (e.g Each sales person can only view their own commission).

How to create a new Filter

To create a new Filter:

• Click the Filter button

• Click Add Filter

• Select the Column you would like to filter

• Select a filter function

• Type your query

• Click Save

Filter Functions

1. Equals

2. Less than

3. Less than or equal to

4. More than

5. More than or equal to

6. Contains

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.

Within Budibase, calculations are predefinned formulas. Instead of writing the formulaes, you can simply select from the list of predefined options.

How to create a new Calculation

To create a new Calculation:

• Click the Calculate button

• Add your data

• Click save

Formulas

Sum

Avg

In this section we will cover how to use Budibase data transformers, which can be used as part of data source queries. It is often a requirement when retrieving data from various sources to transform to fit your apps use case - from simply extracting properties from deeper JSON objects to enriching your data with more information transformers can be used for a wide variety of applications.

To create a transformer first you need to create an external data source and a query, steps for this can be found in the data sources section. In the example below we will be transforming some data from the Open Brewery Database - we will be creating an app which has tallies of the number of breweries by US state.

When you first create a query you'll see the transformer code editor in its own section, as seen below.

This in its basic form will return the data exactly the way it is retrieved from the data source, it is recommended to get your query up and running correctly first before altering your transformer, this will allow you to look at the initial schema of the data returned. In our example so far we have:

1. Setup a REST data source, with our URL set to https://api.openbrewerydb.org

2. Created a query and set the path to "breweries"

3. Ran the query to see the schema

The schema for this query appears as below:

Using this information we can now write the transformer function that will be used. Initially we just want to write a function which will:

1. Work through the array of breweries that is returned by the API, in the format shown above

2. Extract the state and add it to a total count of states that have been seen

3. Return a new structure which contains only the state name and the count of breweries within

You can see the basic transformer we have written to do this below.

Here we have taken the data, written a for loop that iterates through a fills up an object with counts for each state (using the state's name as the key into the object) and finally we've mapped these totals to our output structure, an object with a state and count property. You can see from this that we can drastically change the format of the data; using JavaScript you can change the data in a multitude of ways.

For the last part we want to add data that simply isn't a part of the query, enriching application logic that we've provided as part of the transformer. We are going to add a URL which points to an image of the states flag for each of the state entries, to do this we will create a URL dynamically to http://flags.ox3.in/ - a repository of SVG flags. You can see the final function which does this below.

This may look a little complicated, but all we have done is added a map of the state names to state codes, then at the end when we produce the final data we lookup the state name in the map and build a URL which has the code in it. You can see in our results section we now have a "flag" property, which can be used in the design section with something like an image or card component. We've thrown together a quick example of how this can all come together in your design, using only a data provider, repeater and card component bound to the "state", "count" and "flag" properties our transformer produced.

Hopefully this has helped to demonstrate how transformers can be used to get the data you need for your application, happy coding!