Elements overview

Applications are built with essential components known as elements. Elements act as the building blocks for applications. They are what bring functionality and life to the application.

In this section, we’ll cover how to work with elements within an application.

In the following articles, we’ll talk more about the different available elements.

Overview

You can move elements around, link pages, and set up how they connect within your application.

You can navigate and build with Baserow’s Application Builder using only your keyboard. Use keyboard shortcuts for quick actions.

Like pages in the Application Builder, each element has its own settings for things like element details, styles, and events. These settings change based on what kind of element it is.

When you work with elements, you have lots of choices. If you hover over one, you’ll see a toolbar with different tools. After adding an element, there’s a menu at the top with more options. You can shift, copy, or remove elements using the icons given.

Element types

There are static elements such as the Heading, Columns, Form elements, etc. They help tell people about stuff like products or portfolios.

Then, there are dynamic elements, which work in combination with a data source to represent data in all sorts of different ways, such as the Table element.

Here’s a list of the elements available:

Element	Description
Heading	A title displayed at the top of a page or section.
Text	A single line of text.
Link	A hyperlink to another page or URL.
Image	An element to display an image.
Text input	A field where users can input text.
Columns	A container to organize content into multiple columns.
Button	A clickable button that performs an action when clicked.
Table	An element to display data in rows and columns.
Form	A container for gathering and submitting user input.
Dropdown	A menu for users to select one option from a list of options.
Checkbox	A small box for users to select an option.
IFrame	An inline frame to embed another document within the current page.
Login	A user login form

Element properties

Page formatting is designed to be flexible, so you can move elements around on the page easily.

Every element has unique properties and ways to format it based on what it’s for.

To set up an element just right, click on it. You’ll see a list of its properties on the right side of your screen.

Each element provides adaptable and user-friendly customization to tailor your page layout precisely to your needs.

Hover over any element to reveal a range of options:

• Duplicate an element
• Select the parent element
• Move an element
• Delete an element

Set the element data source

Setting a data source tells an element where to get the data it needs to show. This data can be typed in by you (static data) or pulled from a database (dynamic data).

When you pick a data source for an element, you’re showing it where to look for its information.

To choose a data source for an element, click on it and check the sidebar on the right. Click on the field and select data from a list of already set up sources.

Learn more about adding a data source.

If you need to change the data source for an element later on, simply click on the field again and select a different source from the list provided.

Select parent element

Selecting the parent element refers to identifying and targeting the container or wrapper of a specific element.

You can navigate and build with Baserow’s Application Builder using only your keyboard. Use keyboard shortcuts for quick actions.

You can also click on Elements in the top bar to target elements based on their relationship to another element.

Move element

To move the element up or down on the page, you can use the arrows to change the element’s position.

You can navigate and build with Baserow’s Application Builder using only your keyboard. Use keyboard shortcuts for quick actions.

Clicking the up arrow moves the element higher, while the down arrow shifts it lower on the page.