Data Components Overview
What are data components?
Data components are views for displaying and adding data within your app.
Data components are directly connected to data from the data builder and each component added can only be correlated with a specific data table. Some components are only available in unique and specific conditions or when some criteria has been met.
Not all data components are available in all plans. Please see the pricing page for more details.
Data components are nested inside of columns which are inside of rows and are further inside a page. See page builder overview for more details.
Unlike System components, Data Components can’t be added to layouts, only pages. Learn more about how pages work here.
There are 13 Data Components.
-
Tasks
-
Image Slider (Coming soon)
-
Export (Coming soon)
Nearly all components share certain core functionality. Instead of explaining each of these within each individual component it will be included one time after all the components as they’re the same for nearly all:
-
Display Rules
Choosing Data Table
Upon selecting to add a new Data Component a prompt will allow selection of the table from the Data Builder to be displayed. Depending on the current configurations in addition to whether the page is a parent or child type, there may be a number of options available for selection.
Below is a chart of each option and when each option is available.
As a reminder, a Parent page is any page you created by adding a new page. A child page is a page that was created by adding a link in a parent component. Read more about that in the pages section.
| Parent Page | Child Page | Notes | |
| 1) Select Data Table | Yes | Yes | Always |
| 2) Records connected to logged in user | Yes | Yes | Only when there is a connection to the users table |
| 2.5) Records connected from the logged in user | Yes | Yes | Only when there is a connection from the users table to another table. |
| 3) Records connected to this page | No | Yes | When there is a connection to or from this details page |
| 4) Records related to this page | No | Yes | When there is a related record to this record |
Let's look at each one in depth:
1) Select the data table
When adding a new Data Component, this option is always available. Any Data Table in your app will be available here as an option.
While other display options for the same table may be available, selecting the desired table under this section does not include automatic filters to the data source tab. All records of the table selected will be displayed.
2) Records connected to the logged-in user
If there are any tables containing a connection field to the default Users table, those will be available here.
For example, if we have a Jobs table and each job is assigned to a user, you'll see that option here:
Selecting a table using this section automatically creates a Data Source filter that only displays records where the connection field to the Users table is the currently logged-in user. You can see the data source after adding the table and it would look something like this:
If a table has more than one connection to the Users table, each will be displayed as its own option.
To filter a table already added to the page to only show records that belong to the logged in user, simply add the condition in the data source tab.
2.5) Records connected from the logged in user
If there are tables that are connected from the logged in user.
You'll see some additional options under this category.
Unlike the previous method when the connection originates from the remote table (in this instance the Companies table), adding it this way can't be changed by removing the Data Source filter like in the version above.
It's important to differentiate the difference between this method and the previous.
In this method the connection is from the User to the destination table.
In the previous method, the destination table is the users table.
Details Component for Logged In User
The option above is also available for the details component. Suppose each user is assigned to a company. You objective is to show details of the company this user is assigned to. You can do so by adding a details component and choosing to show the single company. This method only works when:
- Connection originates in the Users table
- The connection is One User to One Company
Unlike the traditional details component which can only be added on details pages, when the above criteria is met this component can be added anywhere.
In the screenshot below you can see we're logged in as a user and can see the company details that this user is connected to.
3) Records connected to this Data Table
When adding a new Component on a details page (aka child page) where the table that the given page’s record belongs to contains a direct connection those table options will be visible here. For example, let's say we have an app with Companies and Jobs. Each Company has many jobs and each job belongs to a single company.
In this case when we view the company, we want to see all the jobs that belong to this company. On the details page when we choose to add a data component we'll have those options readily available.
You can see after the company name the description of how this connection is made. This is useful especially when you have more than one connection to the same table. In the above scenario, you can see that each job is connected to the company using the Company field.
Please note, any selection made under the below two options create built-in filters for the table that cannot be altered at a later time.
4) Records related to this Data Table
If there are any tables containing a second-degree connection to the given record’s table, options appear here. This means that there are three total tables involved, the given record’s table connected to another table that has a connection to the table(s) that appear as options under this section.
Another way to understand this is, options that appear here are connected to an option that is available in the records connected to this record section.
For example, if we have the following table structure:
- Companies - Each Company has many jobs
- Jobs - Each Job belongs to a company and has many Notes
- Notes - Each note belongs to a Job
When viewing the details of the company, we can see the connected Jobs (since each job belongs to the company) but with Related, we can also see all the Notes that belong to the jobs which further belong to this company.
For example, if a company has 5 jobs and each job has 3 notes we would see a total of: 15 (5X3) notes all of which are related to this specific company.
You can see the relationship details when selecting the data table. For example: this will show all the Notes connected to the Jobs using the "Job ID" field.
Adding Data Table
After choosing the data table you want to add, you can now choose from two options to proceed.
Quick Add
The Quick Add option can be a powerful tool to automatically configure basic properties of a Table Component in addition to adding multiple connected components in one place.
There are two different behaviors of the Quick Add process that depend on whether the Table Component is being added from a parent page or a child page.
Quick Add in Parent Page
When adding a new Table Component through a parent page, clicking Quick Add leads to the Add connected components step of the process where a number of components can be selected to add along with your new Component.
Each option as follows, when selected creates an additional component and, when applicable, a new page containing the additional component.
Include a form to add Records into this table
When selected, this option includes a new child page and form to add a new record to this table.
On the front-end, selecting this option includes an Add New button on the top left corner of the Table Component next to the refresh button. Upon clicking this button, a pop-up of the child page containing the form appears.
Once the new Table Component has been created, within the Table Component Editor’s Options tab, the option to include the ability to add new records can be toggled. Additionally, the button text and pop-up title may be modified here.
Include a link to view more details about records in this table
When selected, this option includes a new child page and Details Component.
On the front-end, selecting this option includes a Details Link as an additional column on the rightmost side of the Table Component.
Upon clicking the Details Link, the page viewer is directed to the child page containing the Details Component.
If this option is not selected during the Add connected components step, Details Links can be added to any Data Component from the Links tab in the Component Editor.
Include a table of connected records in the Company details page
This option, if applicable, is available when selecting to add a Details Link in the Quick Add process. If the table being referenced through the Component is connected directly to or from any other table options for each connected table will be available here.
For example, we're adding the details of a company and each company has many jobs. Therefore, we can quickly add a table of all the jobs that belong to this company.
When selecting this option, a Table Component is added to the new child page containing the Details Component.
This creates a Table Component with the same filter that is created when adding records connected to this record (in our section on Adding a New Table Component: Which records should this table display?).
You can go further and also add a form to add new jobs which will automatically connected to this Company.
Selecting this option includes an additional new child page and form to add a new record to the additional Table Component and performs the same additions to this component as selecting to include a form to add new records into this table performs for the original Table Component being added.
Upon completion of the Add connected components step of the Quick Add process, all child pages and new components are created. All Table and Details Components created through this process include all fields from the table to be shown on the front-end. For forms created through this process, the same applies, however automatically generated values and user passwords are not included.
Quick Add: Child Page
When adding a new Table Component on a child page, the Add connected component step is not included in the Quick Add process. Selecting Quick Add immediately creates the new Table Component including all fields from the table to be shown on the front-end.
Customizing the component
Customize is the second option when adding new components. This will open up the component settings where you can customize all the options manually. Even after using quick add you can click on the component and customize it as must as you wish.
Each component has very unique options and there is a dedicated article for each component individually.
You can just to any component by clicking on the appropriate link below.