Creating & Managing Components

What are components?

Components are interactive viewpoints you can add to your pages or layouts that let users to interact with your data stored in the Data Builder.

There are two types of components you can add to your pages and layouts: Data Components and System Components.

Data Components, including forms, calendars, charts, etc., are dynamic viewpoints that can be added to your pages for users to add, track, report, and automate your data on the live app.

System Components, including, menus, logins, profiles, etc. can be added to your pages and layouts to enable users to navigate your live app and manage their user-related information.

Adding components

Data and System Components can be added within columns on a page or layout.

There are two ways to add a data or system component to a column on a page/layout:

You can add data and system components to a page or layout by adding them within existing columns on the page/layout. You can add a component to the top or bottom of an existing column by clicking on the +Add Component icon at the top or bottom of the column you would like to add the component to.

Once you click on a data or system component, and it will open the components tab where you can select your column.

As a reminder, components are color-coded blue within the content tab of a page/layout, whereas columns are color-coded orange and rows are green.

Selecting a data table

Once you select a Data Component to add within the column of a page, you will be prompted to select the data table from which you want this Data Component to display records.

Depending on the configurations of the data tables within your app and whether the page you are adding the Data Component to is a parent page or a child page, there may be several options to choose from when a selecting a data table for each Data Component . 

Below is a chart outlining each option for displaying records via a data component as well as when each option is available.

Option For Displaying Records	Parent Page	Child Page	Notes
Select the Data Table	Yes	Yes	Always
Records connected to logged in user	Yes	Yes	Only when there is a connection to the users table
Records connected from the logged in user	Yes	Yes	Only when there is a connection from the users table to another table.
Records connected to this page	No	Yes	When there is a connection to or from this details page
Records related to this page	No	Yes	When there is a related record to this record

 

As a reminder, a parent page refers to any page you created by adding a new page. A child page refers to a page that was created by adding a link within a parent component. Click here to learn more and parent and child pages.

Editing components

Once a data or system component is added to your page/layout, you can edit the component by clicking it.

You will then be directed within the component where you can format and customize the component by adding fields, links, filters, and other customization options.

As each data and system component is unique with different editing options and features, we will discuss the editing settings for each component within its own article. Please see each data and system component's article to learn how to edit and customize each specific component.

For the purpose of this article, we will continue to discuss the universal features of navigating all data and system components within your page/layout content, including how to move, copy, design, and delete components on a page/layout.

Moving components

To move a component, hover over the component's name and a cross arrow move icon will appear. Use the move icon to drag and drop the component to a new column of your choice.

Copying components

You can copy and paste a component onto a different page within your app by hovering over the component, clicking its gear icon, and selecting the Copy option. Once you click Copy you will have the option to select the page onto which you would like to paste this component.

Deleting components

You can delete components from a page/layout by hovering over the component, clicking its gear icon, and selecting the Delete option.

💡 Tip:
Want to recover a component you deleted from a page? Try restoring a previous page version.

🛑 HEADS UP!
When deleting components that were used to add child pages via details links, edit links, or add new forms, please note that deleting these components will orphan those child pages. Meaning, deleting the component that linked and created the child page will not delete the child page, but it will delete the link/component that created the page.