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.
Choice 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
Repeat Display lists or collections of data
Record selector Allows users to link and select related rows from other tables
Date time picker Input dates and times in your application
Multi-page header and footer Create a reusable container that can be used across multiple pages.

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.

Element properties

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:

Element properties

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.

Set the element 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.

Select parent element

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.

Move element

User actions

External users can filter, sort, and search within published applications, creating a more interactive and user-friendly experience.

For applicable elements, you can specify which fields to make filterable, sortable, and searchable for your external users.

To add filtering, ordering, and searching capabilities, click on the element and navigate to the right sidebar. There, you’ll see checkboxes to enable Filter, Sort, and Search for specific fields.

image: filter_order_and_search_for_published_applications

Still need help? If you’re looking for something else, please feel free to make recommendations or ask us questions—we’re ready to assist you.