The repeater component is used to loop over your data. Every child of your repeater will thus be repeated for every row in the data provider that you have selected.

To get started with it, add it as a child to a data provider and in the settings, select the data provider. You can then add your components and get started. An example structure can be seen below:

Use the Card component to display data from your tables to your users in a structured, repetitive manner. Cards contain content and in some cases images and actions about a single subject. There is currently two types of Card component; vertical and horizontal.

How to add a new Card

To add a new Card to your designs:

• Click the card button

• Select the card type you would like to add

How to display data from your tables as Cards

• Click the layout dropdown, and select the Repeater component

• Link your Repeater component to the Table which contains the data you would like to display

• Click the Card component dropdown, and select a Card type

• In the Card's Setup panel, bind your data from your Tables to your Card component using the ✎ icon.

How to style your Card

There are 2 types of Cards within Budibase. Each Card has its own unique settings. The Card component can also accept some style updates from the Design panel i.e Background - Gradient: Heavy Rain:

Vertical

The Vertical Card is structured in a vertical manner - items are stacked on top of each other.

The Vertical Card component comes with the following settings:

Horizontal

The Horizontal Card is structured in a horizontal manner - items are stacked alongside each other.

The Horizontal Card component comes with the following settings:

A screen in Budibase corresponds to a single page. They are either auto-generated (when you create an internal table/csv import) or you can create them manually. To do so hit the + button in the corner, next to the Screens title.

You can pick from a ready-made template that corresponds to your internal data tables or create from scratch. Enter the relevant details as well as pick what access level you want for the screen. Hit the Create Screen button. You will now have a blank canvas that you can add components to.

Budibase uses layouts that wrap your screens. This is where you put components that you want to display across different screens. Basically a shortcut for you, so you don't have to re-build the same thing over and over.

All Budibase applications start off with two Layouts: Navigation and Empty. On the right-hand side you can see all the options that are available to you. The difference between the two starting layouts is that the navigation is turned off in the Emptylayout. Other options you will find here is the Links, where you can configure the navigation links, text options and some other goodies.

The Section component can only be used as a top-level component. It's main use is to split up your content into multiple columns. This is a great component to use when building something like a dashboard.

The section takes an unlimited number of children; the first one will be placed in the first column and the second in the second column and so on. If you add more children than there are sections it will wrap-around and start from the first column again.

You can change number of columns by changing the Type setting. There are currently four different layouts: Main with Sidebar, Sidebar with Main, Two Columns and Three columns.

A Container is a Div with pre-defined styles. They are the building blocks of your application and critical for responsive design. Containers are used to structure your application and to contain other elements in a structured way. An analogy that may help your understanding is to think of Containers as picture frames hanging on a gallery wall (your application).

Budibase's Design section is often described as the frontend builder within Budibase. This is where you create and build your user interface.

Overview of the Design Section

The Design can be daunting when you see it for the first time, but in reality there isn't that much too it. Let's take a look at an example and go through the different parts of it.

On the left side you have your list of screens and components. You can also switch back and forth between Screens and Layouts. Layouts are components that wrap your screens. In the example above, if we take a look at the center of the screen, the layout in this case would be the logo, title and navigation. In subsequent pages we'll dive deeper into how to change and update the layouts.

In the middle we have the app preview window as well as the component picker (the top row with buttons). This shows you the current state of your application. Add new components by clicking on them at the top. You can also modify some of the settings from here using the toolbar.

The right side has all the settings for your component. They differ from component to component but generally this is where you will configure things such as data, margin and padding, states of varous kinds as well as conditionts and actions.

Use the Table component to display data from your tables to users. With the Table component, your users can create, read, update, and delete data within the Table component, which will automatically update the data in your Tables.

How to add a new Table

To add a new form to your designs:

• Click the table button

• Within the settings panel, connect your Table component to a table in your data section.

Use the Text component to display Text. The Text component is versatile and can be styled using the Design panel. The Text component comes in two types: Heading and Paragraph. They both share the same settings. Both Text components can be bound to data in your Tables when used with the Repeater component.

How to add Text

To add Text to your designs:

• Click the text button

• Select the Text type you would like to add

How to add Text from your Tables

To add Text from your tables to your designs:

• Add a Repeater component

• In the Repeater's Setup panel, select the Table you would like to pull your data from

• Add a text component

• Select the Text type you would like to add

• Navigate to the Setup panel (on the right) and find the 'Text' textbox

• Click the ✎ button beside the textbox.

• On the left-hand side of the Binding popup, you will find a list of your columns from the table you previously selected. Click the column you would like to pull data from.

How to style Text

Within the Design panel, you will find the Typography section. You can style your text using the available properties.

Use the button component to encourage users to take actions, and make choices, with a single click or tap. The Button component requires text and an action.

How to add a Button:

To add a Button to your designs:

• Click the Button button

How to style your Button

The Button component is versatile and can accept updates from all of the design properties. Once you have finished the initial design, you should enhance your button with a Hover and Active class →.

Adding actions to your Button

Within the setup panel, you can give your Button actions →.

Components are the building blocks of Budibase. They are used to construct your user interface. At budibase we use the Spectrum design system created by Adobe. This gives you a great out-of-the-box experience where things just work. As a plus you also get themes by default.

There are a number of components in Budibase. They can be found along the top of the preview window in the Design section.

Using components

When you have added a component you will be able to see the options that you can tweak on the right side under the Settings bar. Some components also have a toolbar that will appear above it in the preview window.

Available components

Here's a list of links to the current components that are available:

• Section

• Container

• Data Provider

• Repeater

• Forms

• Table

• Chart

• Card

• Text

• Button

• Icon

• Image

• Embed

The data provider component is one of the most important components in Budibase. It exposes data to your children. Whenever you want to use data from your backend or from external sources you need this component.

In addition to controlling which data source that should be available to your children it also lets you sort and filter your data. For example, let's say that we have a list of invoices in a table. To only show relevant data to the user we simply filter it on the status isPaid.

Once you have added your data provider you need to select which Data source you want to use. It's as simple as clicking the Data setting button.

Structure

Something that is worth thinking about when working with the Data Provider component is that the component structure is important. Only the children of your provider will have access to the data.

There are a number of different ways in which you can use the Data Provider; Charts, Tables and/or Repeaters.

If you choose to use a Chart or Table you can simply add them as a child and select the provider in the settings. However, if you want to build something a bit more custom, maybe you want a list of cards, then you will need the Repeater component. You can learn more about the Repeater here. Here's an example of a list of fictive invoices:

Use the Link component to offer your users a way to navigate to other destinations. The Link component is built on top of the component. Just like the Text component, you can leverage the available styling properties with the Design panel.

How to add a Link:

To add a Link to your designs:

• Click the Link button

• Add text to your link

• Either select an option from the URL dropdown or add a URL

How to style your Link

The Link button accepts the majority of properties within the Design panel. A common style update to the Link component is to remove the underline. To do this, click Design , then open the Typography settings, reset the Decoration to None . This may already be on None. If it is, reselect None and it should work.

This component is using the fantastic Font Awesome icon font, a project by Dave Gandy. Altogether Font Awesome provides more than 1500 symbols and glyphs for web-related actions. These icons are great, because they enable you to easily change color, size, and more via the Design panel. They are scalable vector graphics, which means that they look great on high-resolution displays.

How to add an Icon:

To add an Icon to your designs:

• Click the Icon button

• Within the Setup panel, click the Icon button and select and Icon from the list.

How to style your Icon

The Icon component can accept multiple styling updates from the design panel, including size, color, and margin.

Forms are the primary building blocks of any data heavy applications. With Budibase you can build rich, themeable forms to create and edit your data.

Overview

Forms are built up from 3 main component types - a form component, field group components and field components. It's important to understand the best component layouts for forms, so you can take advantage of features like embedding any other content inside forms, or using data bindings to link up your form to other components.

Embedding Non-Form Content

Forms can contain any content - not just field groups and fields - so you can easily nest any other components alongside your form components. The best way to achieve this neatly is to always put groups of fields inside a field group component, then you can simply include any other components inside your form, beside the field groups.

Validation

Forms automatically validate their fields if a form schema has been set, and they'll show validation errors. Forms provide a button action to validate the form programmatically, which you'll probably want to trigger when using the data from the form. This action will trigger the form validation, show any errors, and stop executing any further actions if the form is invalid. The recommended way to use this is for your first button action to be validating the form, and the second action to be performing your task - for example saving a row. This ensures only valid forms will be submitted.

Form Building Blocks

Video Guides

The Embed component is used to embed content into your web application. This content is provided by an external application or other sources of interactive content such as a browser plug-in. Types of content can range from SVGs, PDFs, Maps, to web pages.

How to add the Embed component:

To add the Embed component to your designs:

• Click the Embed button

• Enter your Embed's URL in the Setup panel

Use the Chart component to display data from your tables to your users in a visually pleasing manner. The chart components pull in two types of values from your Tables; an X value and a Y value. The data within the column linked to the Y-axis must be a 'Number' (data type).

How to add a new Chart

To add a new chart to your designs:

• Click the chart button

• Select the chart type you would like to add

How to style your Chart

There are 4 types of charts within Budibase and they all have different settings and data requirements:

Donut Chart

The Donut Chart (also known as Doughnut chart) is a variation on a Pie chart except it has a round hole in the center which makes it look like a donut, hence the name.

The Donut Chart component comes with the following settings:

Bar Chart

The classic Bar Chart uses either horizontal or vertical bars (column chart) to show discrete, numerical comparisons across categories. One axis of the chart shows the specific categories being compared and the other axis represents a value scale.

The Bar Chart component comes with the following settings:

Line Chart

A line chart (also known as a line plot or line graph) is a chart that uses lines to connect individual data points that display quantitative values over a specified time interval. The Line Chart component comes with the following settings:

Grouped Bar Chart

Each field component represents a single field in the form. There are different component for every data type - e.g. a text field, an options picker or a checkbox.

Field Settings

All fields have a field and a label setting. The field is the name of the field, or property of the schema. This can be free typed or, if a schema exists on the form, selected from a list. There are unique components for every type of data, and if your form has a schema then you'll only be able to choose field names which fit the particular type of component that is selected. The label setting is the label that will be displayed beside or above your field. Most fields also have a placeholder setting to control the text displayed when the field is empty.

Some field components for certain data types may have other settings, but in most cases this table is an exhaustive list.

Custom Fields

Whether your form has a schema or not, you can always add custom fields that don't exist in the schema by free typing the name of the field. Data bindings will always reflect the names of all the fields in your form - so even if you don't have a schema on your form, you'll be able to bind to any of your fields.

Budibase is focused on building data-centric web apps and tools - to be able to do this you need a way to manipulate data. To do this Budibase has the ability to bind data into any design or automation element through the use of Handlebars syntax.

For much more detailed documentation on all the handlebars helpers budibase provides, you can find the entire suite of budibase handlebars helpers here in the README of this repository:

https://github.com/Budibase/handlebars-helpers

There are a number of places that bindings can be utilised throughout the Budibase Builder such as:

1. External data source queries - when building a query it is possible to utilise Handlebars syntax to specify where parameters should be inserted, e.g. SELECT * FROM users WHERE username = {{ value }}

2. The value of components in design - the values of most components in the design can be populated with bindings; anywhere that a value in the components setting has a lightning bolt next to it a binding can be inserted. Clicking the binding button (the bolt) will open the binding drawer.

3. Automation steps - automations have the ability to make use of data from previous steps, this can be found in the binding panel; opened in the same manner as with the design bindings.

When making use of bindings it is possible to manipulate the data using the Budibase Handlebars helpers, these allow performing calculations, carrying out some basic logical comparisons and some array/string functions. The full list of options available is as follows:

1. Arrays - the ability to sort, slice, get an item at a specific index, etc.

2. Comparison - simple logic such a greater than, equal to, less than, contains, etc.

3. Dates - the ability to format dates as you desire, using syntax like "DD-MM-YYYY" - there is only one helper for this and it can be used as such: {{ date tableName.dateProperty "DD-MM-YYYY" }} you can also use now instead of a table/data source data property if desired.

4. Math - math functions like adding, subtracting, averaging, etc.

5. Number - these helpers allow formatting numbers, for example setting precision, setting to an exponential, adding commas, etc.

6. String - the ability to manipulate strings, such as splitting them (useful with the array helpers), appending, capitalisation, etc.

7. URL - the ability to encode/decode URI and escape URLs.

Below is a video showing some of the capabilities of Budibase bindings in the design panel - showing how to add a repeater to make use of table data and then displaying some date values as well as carrying out some complex string manipulation.

Tips and tricks

It is important to remember than Handlebars does allow quite complex statements, which can make use of comparative logic (especially with our comparison helpers). Below we've detailed a few tips which should help you get started with bindings and Handlebars syntax.

Chaining helpers

Handlebars allows chaining helpers together to create quite complex statements - for example if I had the string "Username: Michael" and I wanted to just get the name I could do the following:

{{ last ( split "Username: Joe" ": " ) }}

In the example we split the string by the colon and space in the middle, then get the last element of the array produced by the split helper. Chaining helpers simply requires wrapping each layer of helpers with parentheses, although it is important to remember parameter order, for example if we had the string "My name is Joe Bloggs" and we wanted to get the string "Joe Bloggs" we would do the following:

{{ join ( after ( split "My name is Joe Bloggs" " " ) 3 ) " " }}

Take note with this statement of where the "join" and "after" last parameters are positioned, here we are splitting the string into an array by the spaces, then selecting the elements in the array after index 3, then finally re-joining the string with a space again.

Iteration

A powerful feature which can be utilised with Handlebars is the ability to iterate over an object or array. This can be extremely useful when paired up with data sources, for example if you had a DynamoDB table which contains JSON you might want to do the following:

{{#forIn Query 1.object.json}}
  property: {{@key}} - value: {{.}}
{{/forIn}}

This would print out the key and value of each property in the JSON object retrieved from the query - notice the use of the {{ @key }} and {{ . }} these are specific to the forIn helper. It is important to note that the iteration functions do require the input to be of the correct type, forIn requires an Object and forEach requires an array - the forEach helper also requires that each element of the array contains an object so that the properties of the object can be referenced, for example:

{{#forEach Query 1.array}}
  username: {{ username }}
{{forEach}}

In the example above it is assumed that the Query 1.array property is an array consisting of objects that contain username property.

Conditionals and comparisons

Handlebars is capable of carrying out logic when running a block, this is a core component that can be used to produce more conditional outputs. An example of this might be pulling information from an external data source, which has information about a customers total spending, we might do something like:

{{#if ( gte Query 1.Customer.spending 1000 )}}
  Thanks {{Query 1.Customer.name}}! We value your patronage.
{{else}}
  Hi {{Query 1.Customer.name}}!
{{/if}}

As you can see from this example we can wrap an statement in an #if block which allows us to produce a specific output when a condition is met. We have also made use of the gte helper which checks if the first property is greater than or equal to the second property. Chaining together a few different helpers and then finishing with a comparison can allow us to perform some very specific logic. We can also make use of regex to perform conditional logic, as such:

{{#if ( test "hello there" (toRegex "there"))}}
  Over there!
{{/if}}

We can use the test helper to run a regex expression against a string, this regex can come from the toRegex helper or it can be directly input as a string; or even a property of a table, query or automation step!

Field groups are components which group fields together. They allow your fields to be neatly aligned with each other, and let you style you fields with consistent label positions.

Field Group Settings

Field groups are simple group components, so they don't have many settings.

Label Positioning

Each field component has a label associated with it, showing the name of the field. Field groups let you align your labels for multiple fields, to keep them looking neat and consistent. There are 3 different options for label positions - left aligned, right aligned and above your field.

Generating Fields Automatically

Field groups have a powerful function which can save you a lot of time when working on forms - they let you reset them, which automatically populates them with all the fields in your form schema. This means you can generate a full form in one click, or you can add in missing fields if you change your schema.

When you select a field group component in the builder, you'll be able to press "Reset Fields" in the settings panel to perform this function.

The Form component is the top level component of forms. All field groups and fields must be placed inside a form, and they won't work outside it.

Form Settings

Forms only have a few simple settings.

Form Schemas

Forms have a Schema setting which is optional. The schema for a form can be a table, view, relationship, query or "custom". A custom schema means that there is no backing data source schema.

Choosing a form schema has the following advantages:

• When adding fields, field names can be chosen from a dropdown rather than being typed

• Field validation is automatically added to match the schema

• If you want to create rows in a table using your form data, you'll need to choose the correct schema for the table you'll be saving your data to

• Fields will be able to automatically prevent you entering an illegal field name for a certain data type

• Form components can be automatically generated to match the schema

The image component is used to display images.

How to add a single Image:

To add an Image to your designs:

• Click the Image button

• Enter your image URL into the SRC input

How to add multiple Images from your Tables:

To add multiple Images from your Tables to your designs:

• Add a Repeater component

• In the Repeater's Setup panel, select the Table you would like to pull your data from

• Add an Image component

• Navigate to the Setup panel (on the right) and find the 'Src' textbox

• Click the ✎ button beside the textbox.

• On the left-hand side of the Binding popup, you will find a list of your columns from the table you previously selected. Click the Column you would like to pull data from.

How to style your Image

The Image component can accept multiple styling updates from the design panel, including Size, Effects, and margin.

App state is a generic store of values that can be used to easily pass values around and persist them between navigation and page reloading.

Unlike other bindable values, App state values can be set and used anywhere in your application. Nesting is not required. To set an app state value you can use a new action called Set Value in the actions drawer. There are two types; Setting or Deleting a value. When selecting a key the combobox will show all the existing app state values across your application. If you want to add a new one you simply type a new one into the box. After this, you can enter any arbitrary value into the value input field. In addition to static values, you can also use bindable values here.

Persisting values

If you wish for the values that the user has selected to persist you can select the Persist this value checkbox beneath the key/value fields. Doing so will save the value in the users browser using the localStorage API.

Deleting values

Deleting a value will delete it permanently and will also override values that are persisted.

Referencing state values

Once you have created a value you are free to bind to it across your application. All values live under the State top level bindable value and are visible in the bindings drawer.

For example, To get the value in the example image above you would enter {{ State.isPersonal }}.

Often you want to run automations or update data when a user presses a button. This is what actions are for. To define your actions, click the Define actions, a drawer will appear where you can add, or remove actions tied to this component.

The list of available actions are listed below:

• Save Row

• Delete Row

• Navigate To

• Execute Query

• Trigger Automation

• Validate Form

• Log Out

• Clear Form

Save Row

Saving a row can mean two things, updating or adding a new row. Depending on what you want to do you will have to structure your code differently.

If you're adding a new row the easiest way is to add a Form component. Once you've set that up correctly you add a button to it and select the Save Row action. You then select your form and the table you want to save it to. That's it. An example of how it might look is below.

Updating a row can be done in a number of different ways. If you have a structure containing a Data Provider and a Repeater, selecting the repeater as your Data Source will make it so you can correctly get the values from the specific row. To change a field you then take advantage of the add column button that is at the bottom. Click it, select the field you want to change and type in the value you want to change it to (or use a binding). A descriptive image of this is shown below:

Delete Row

This action is used to delete rows from your data source. It's used much in the save way that you would when updating a row.

Navigate To

Use this action if you want to go to another page. This can be used to navigate back to a dashboard after adding a new row to a table among other things.

Execute Query

The queries that you have created in the backend can be triggered via this action.

Trigger Automation

If you have set up an automation you can use this to trigger it.

Validate Form

Whenever you want to add a new row to a table you might find yourself wanting to validate the data before you send it off. This action is perfect for such use-cases.

Log Out

If you want to log a user out, you can use this action

Clear Form

An action that is used when you want to clear a form.

Budibase uses the Spectrum design system by Adobe. Included are four base themes; Lightest, Light, Dark, and Darkest.

If you are not satisfied with the base themes you can customize the options below:

• Primary colour - used for the action variant on buttons, form fields (icons, checkboxes, radios, borders, and date pickers), icon colours, etc.

• Primary color (hover) - like the previous one but when the element is hovered.

• Navigation bar background color: the background color of your navigation bar. This also includes the drawer menu when on mobile.

• Navigation bar text color - the text color of your navigation bar.

A lot of the time you want to change the state of some component when certain conditions are true or false. This might be changing a color from red to green, showing or hiding a component. You will find the condition settings at the very bottom of the settings panel of your components.

Adding a condition is simple. Once you click the settings button a drawer will pop up and you will be able to add, edit or remove your conditions. It will look something like this

Adding a condition

To add a condition, simply click the Add condition button. As explained above, you can choose wether to Show, Hide or Update setting. Depending on what you choose you will be presented with different options. They will all contain settings for comparing some value against another.

An example

In the example we're going to discuss we have a simple backend table that contains three records. It looks like this:

As we can see, there are four fields, Company, Due Data, Value and Paid. In the Design section we have designed a simple interface showing each of our invoices in rows. It looks like so:

It would be great if the Pay Invoice button was in a disabled state if the invoice has been paid. So let's go ahead and add a condition to do just that!

Select the button component in the tree view on the left. Open the conditions drawer and select Update setting and then pick the Disabled setting in the dropdown. Make sure the checkbox is checked. We then need to figure out which field we want to check. In our case it's found under {{ Repeater.Invoices.Paid }}. This will of course differ depending on the structure of your application. If you click the little lightning bolt icon you will be able to see which fields are available for use. Now we just make sure that it equals TRUE. Hit save, and that's it!

Now that we have this condition set up we might also want to change the text of the button to say "PAID". To do that, simply click the copy button and change the setting to "text". Change the text to "PAID" and hit save.

And here's the end result.

Static Filtering

Once you have added a data source to your dataprovider component you can access the filter drawer by simply clicking on it. In the drawer that comes up you can add an expression. This is where you select a column you want to filter on. Let's say you wanted to filter out all rows with a price greater than 100 - you would select the appropriate column, select "More than", "value" and then type in 100. You are not limited to just one expression, you can add as many as you like.

Filtering data from the front-end

Often you will find yourself wanting to let the user filter the data on the front-end. This can be achieved as well but requires a bit more work. To get started you will need a Form component. Select the schema you want, most often it will be the same thing you select in the data provider. Inside the form, put a Data Provider component as well as a field of your choice, an easy one to get started with is the Number Field. On the field component you select the column you want to filter on. In the example below we'll use the unit price.

In the data provider, select the define filters button. Next add an expression and select the same Unit Price that you selected for the number field component, "More than" and "Binding". Select the lightning bolt icon to the right and select the number field from the list of bindings that comes up. After saving your users should now be able to filter the data themselves.

Video tutorial with two option pickers

Pulling data from your tables and displaying it is a critical part of any data-driven application. We've made this as simple as possible, by using a single component to control fetching, filtering and sorting your data. This component is the data provider component.

Overview

A data provider component fetches data and provides it to all child components. Any child components which take in data to display have a simple setting for which data provider is providing their data. You can hook up as many components as you like to the same data provider, and they'll all be in sync with each other.

Data providers have settings to control filtering, sorting and pagination. Because all of these data settings are handled by the data provider, it keeps all components as purely presentational. You can update the source of your data provider and your whole dashboard will instantly reflect an entirely different table!

Fetching Data

To start off, add a data provider component to your app. It usually makes sense to have this quite high in your component tree, as anything that needs the data it will provide needs to be nested inside it. In the settings panel, choose the source of your data. This can be an internal table, a view, a relationship or an external data source query.

Displaying Data

Lets say we'd like to display all our sales records in a table, and also in a chart. All we need to do is add both components, and configure the data provider settings. For the chart we'll also need to configure some other chart-specific settings, but the table will show all our records instantly.

Our component tree should look something like the following.

Our application should now be displaying our data in both components!