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

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

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:

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.

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.

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

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.

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

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.

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 Link component to offer your users a way to navigate to other destinations. The Link component is built on top of the Text 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.

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 Card component dropdown, and select a Card type

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: