Data Components Overview
What are data components?
Data components are interactive viewpoints you can add to your pages for users to add, track, report, and automate your data on the live app.
Whereas System Components empower users to navigate the live app and manage user-related information (via menus, logins, signups, etc.), Data Components are directly related to data stored within data tables within the Data Builder.
Each Data Component pulls data directly from a data table as well as from connected and related data tables to display your data on the live app. Users can use Data Components to add and update data into the database and track, calculate, report, and automate data from the live app.
Please Note: Whereas System Components are system-related and can therefore be added to both pages and layouts, Data Components are data-related and thus can only be added to pages. Click here to learn more about pages and layouts.
There are currently seventeen Data Components available to display your data:
As each Data Component has its own unique function, features, and settings, each Data Component is discussed within its own article. Please see the article for each Data Component that you wish to explore:
- Search Component
- Timeline Component
- Kanban Component
- Chart Component
- Pivot Table Component (Article coming soon)
- Calendar Resource Component
- Card Component
- Export Component (Article coming soon)
-
Task Component (Article coming soon)
- Custom Component
As you can see in the image above, some Data Components are available only on select subscription plans. Please see your account's plan details to view which Data Components are available with your current plan or visit Tadabase's pricing page to view the allowances for each plan.
Adding Data Components
Within the Page Builder, you can add Data Components to pages, specifically within columns of a row.
To learn more about adding components within columns of a row, please view the Page Builder Overview article.
To add a Data Component within a column, simply click on the blue + icon within the column you wish to add the component and select your desired Data Component from the drop-down list of components.
Additionally, you may quick-add a Data Component by selecting your desired Data Component from the Add Component menu located at the top of the page.
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.
Let's discuss each of the options for displaying records in depth to better understand how to select a data table when adding a new Data Component.
Select the data table
When adding a new Data Component, the Select the Data Table option is always available. Any data table in your app will be available to select with this option.
Unlike the other options, selecting a data table under the Select the Data Table option does not include automatic filters to the Data Source tab. This means that all records of the selected data table will be displayed, unless filters are manually added within the data component's Data Source tab at a later date. To learn more about filtering the records that are displayed in data components via the Data Source tab, please read the Data Source article.
Records connected to the logged-in user
The Records Connected to the Logged In User option will be available only if there are any data tables within your app that contain a connection field to the default Users data table. Any data tables containing a connection to the Users data table will be available under this option.
For instance, if you have a Jobs data table and each job is assigned to a user, you will see the Records Connected to the Logged In User option available with the Jobs data table available as a selection.
Selecting a data table under the Records Connected to the Logged In User option will automatically create a Data Source filter within the Data Component that only displays records when the connection field to the Users data table is the currently logged-in user. Within the Data Source tab of the Data Component, you can see the filter that was automatically created when a data table under the Records Connected to the Logged In User option was added.
Multiple connections to the Users data table
If a data table has more than one connection to the Users data table, each connection will be displayed as its own option under the Records Connected to the Logged In User section.
For instance, if you have a Jobs data table and each job is assigned to a user and each job is also created by a user, both of these connections will be available as two separate options under the Records Connected to the Logged In User option.
Depending on the option you choose, a filter will automatically be added within the Data Component's Data Source tab to only show records when the connection field to the Users data table is the currently logged-in user.
Please Note: Data tables can be manually filtered at any time for each Data Component. To manually filter an existing data table to only show records that belong to the logged in user, simply add the condition in the component's Data Source tab.
Records connected from the logged in user
The Records Connected from the Logged In User option will be available only if there are data tables within your app that are connected from the default Users data table.
As you can see in the sample connection graph below, the Records Connected from the Logged In User option includes connections that are made from the Users data table to the destination data table.
This is in stark contrast to the Records Connected to the Logged In User option which has the connection originating from the destination table to the Users data table.
It is important to differentiate between these two connection types when selecting a data table to display records via the new Data Component.
Details Component for Logged In User
The option above option are also available for the details component. Suppose each user is assigned to a company. Your 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 the details component can be added anywhere.
In the screenshot below you can see a logged in user and the company details that this user is connected to.
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 viewing the company, we want to see all the jobs that belong to this company. When adding a data component on the details page those options are 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 table 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.
Records related to this Data Table
If there are any tables containing a second-degree connection to the given record’s table, you will see that option appear here. This means that there are three total tables involved: the chosen 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.
Configuring the data table
Once you select the data table from which you want the new Data Component to display records, you can configure the data table with either of two methods:
Quick Add
The Quick Add option can be a powerful tool to automatically configure the data table for the data component in an expedited and intuitive manner.
The Quick Add method behaves differently depending on whether the data component is being added from a parent page or a child page.
Quick Add on a Parent Page
When adding a new data component on a parent page, selecting the Quick Add option includes the Add Connected Components step which allows you to add several additional components as add-alongs to your new data component, which in turn will also automatically create the child pages that will store the additional components that you add within this step.
Within one single step, you can automatically create multiple additional components that are useful for your new data component, which will also automatically create new child pages for each additional component that you add.
For instance, in the sample Quick Add page above, if you choose to Quick Add a form to add new hour records within the data table, this step will automatically create the Form Component, add the new form component as a button within your new data component, and create the child page that will store the added form component- all automatically, saving you the steps of having to create the form component and child page yourself.
As a reminder, the Add Connected Components step of the Quick Add process is only available when adding a new data component to a parent page.
Let's discuss each option available within the Add Connected Components step of the Quick Add process.
Include a form to add records into this data table
Within the Add Connected Components step of the Quick Add process, you can enable the option to include a form to add records into this data table.
For instance, if you are configuring a Companies data table for your new data component, this option will prompt you to choose whether you would like to include a form to add Companies into this data table.
If you select Yes and choose to include a new form component to add new companies, when your new data component is created a form component will automatically be created as well, in addition to the child page that will automatically be created to store the form component.
Additionally, an Add New button is automatically created within your new data component which will appear on the live app.
When users click on the Add New button, a pop-up of the child page containing the auto-added form will appear for users to add new companies into this data component containing records of Companies.
Please Note: If the Quick Add method was not utilized, a new form to add new records as well as an Add New Records button can be manually added to the data component at a later time. Simply open the data component to edit it and select the Options tab > Inline Options > Allow New Record Popup Page setting.
Toggle the Allow New Record Popup Page setting to Yes to add an inline button to this component that, when clicked, will allow users to add new records to the data table from which this component is displaying records. Additionally, you can customize the Button Label to the button title of your choice and you can also customize the Popup Title which is the title that will display on the popup window that will popup to add new records when users click on the button.
Include a link to view more details about records in this data table
Another option available in the Add Connected Components step of the Quick Add process is the option to include a link to view more details about records in this table.
For instance, if you are configuring a Companies data table for your new data component, this option will prompt you to choose whether you would like to include a link to a Details Component which will enable users to view more details about each company.
If you select Yes and choose to include a link to a Details Component to view details about each company, when your new data component is created a Details Component will automatically be created as well, in addition to the child page that will automatically be created to store the details component.
On the live app, utilizing this Quick Add option will also automatically add a Details link as an additional column within the new data component.
When users click on the Details Link, a popup window of the child page containing the Details Component will appear, displaying the details of the company for which the details link was clicked.
Please Note: If the Quick Add method was not utilized, a details link to view details of each record can be manually added to the data component at a later time. Simply open the data component to edit it, select the Links tab, and select the Record Details Page link.
Once the Record Details Page link is selected, it will be added as a column to the component. You may customize the details link with multiple format settings and display rules by double clicking Details above the Details column to edit it.
Include a table of connected records in the details page
Another option available in the Add Connected Components step of the Quick Add process is the option to include a table of connected records in the details page.
This option, if applicable, is only available if the previous Quick Add option to "Include a link to view more details about records in this data table" has been selected as well. Once the option to include a details link has been enabled, this Quick Add option to "Include a table of connected records in the details page" dynamically pops up as well.
Enabling the option to include a table of connected records within the details page of the data component will automatically create a new Table Component of connected records within the details page of the selected data table that you are configuring when adding your new data component.
If the selected data table you are configuring for this new data component is connected directly to or from any other data table within your app, the option to include a table component for those connected data tables will be available within this section.
For instance, say you have a Companies data table with a connection to a Jobs data table, and each company has multiple jobs. If you were to create a new data component to display records from the Companies data table, you could use the Quick Add option to configure the Companies data table and enable the option to include a link to view the details of each company. Once that option is enabled, another dynamic option would pop up, prompting you to choose if you would also like to include a table component within the Companies details page that will display the connected records from the Jobs data table.
Enabling this Quick Add option will automatically add a Table Component within the Details child page that was also auto-created when you enabled the Quick Add option to include a Details link. On the live app, the new Table Component displaying connected job records will automatically appear within the details page of each company. When users click on the Details link within the Companies data component to view the details of a specific company, that company's connected jobs will also be visible within the added Jobs table component.
Additionally, you can also choose to quick-add a new form component to the table of connected records so that users can add new records to this connected records table component.
When you enable the quick-add option to include a table component of connected records to the details page, another dynamic quick-add option will appear, prompting you to choose if you would also like to include a popup form to add new connected records.
For instance, if you enable the option to include a table of connected Jobs within the Companies details page, an additional option will appear, prompting you to choose if you would also like to include a popup form to the connected Jobs table component which would allow users to add new connected jobs to each company.
Enabling this option will create a new Form Component to add new connected records as well as a new child page that will store this new Form Component.
On the live app, an Add New button will be added to the connected Jobs table component, which will allow users to add new connected jobs for the specific company of which they are viewing the details page.
All table and detail components that have been created via the Add Connected Components step of the Quick Add process include all fields from the selected data tables to be displayed on the live app. The same applies for form components created via this process, except for generated values and user password fields which are not included/automatically displayed on the live app.
Quick Add on a Child Page
When adding a new Data Component on a child page, the Add Connected Component step is not included in the Quick Add process. Selecting the Quick Add option when adding a new data component to a child page will immediately configure the data component including all fields from the selected data table from which the component will display records. All fields from the selected data table will be automatically included within the component and displayed on the live app.
Customize
Customize is the alternative method you can use to configure the selected data table when adding a new data component. Unlike the Quick Add method, the Customize method directly opens the component's settings for you to customize each setting manually.
When you choose the Customize option, you will be directed to the component's settings where you can manually add fields, links, filters and groupings, and whatever customization options you wish to the blank component. Once you click on fields, links, etc. from the left-hand menu, they will be added to the right-hand side of the page which is where you can preview your component.
As a reminder, each data component has unique features and customization options, and therefore the customization options for each data component is discussed within each component's individual article. You may jump to any data component's article to learn more that component and its unique customization settings:
-
Task Component (Article coming soon)
-
Image Component (Coming soon)
-
Export Component (Coming soon)
While each data component has unique customization settings, there are several core features that all data components share and that are universal to all data components. Please explore the individual articles for each of these core features that are universal to all data components:
- Data Source filtering
- Action Links (similar to Record Rules in Forms)
- Inline Editing
- Links
- Display Rules
Designing data components
Generally, you can simultaneously design all components within a row by customizing the design of the row that contains the components. If you customize a row's design, that design will apply to all components within that row.
To customize a row's design including the design of all components within that row, click on the row's green pencil icon.
A new window will pop up for you to customize several design options for this row and contained components, including font styles, background styles, borders, spacing, and CSS.
To read in-depth instructions on how to customize all design settings for rows and their contained components, please view the Page Builder Overview Article.
You also have the option to customize the design of a specific data component, which will override the design of the row that contains that data component.
To customize the design of a specific component, click on the data component's gear icon and select the Design option.
A new window will pop including five tabs you can utilize to customize this data component's design.
Let's explore each of these five design tabs.
Fonts
Within the Fonts tab of a data component's design window, you can customize the font styling as well as enter the font family that you wish to apply to this component. If you have imported external font families and saved them within your layout or page CSS tab (or within your app settings), you can enter the name of the imported font family here within the Font Family setting to apply that font to this data component. To learn more about importing external fonts, click here.
Background
Within the Background tab, you can customize the background of this data component.
Border
Within the Border tab, you can customize the border of this data component.
Spacing
Within the Spacing tab, you can define custom spacing and padding to be used for this data component.
CSS
Within the CSS tab, you can enter custom CSS to further customize this data component.
Editing data components
Once a data component has been added to a page, you can open the data component to edit it by double clicking on it.
You will then be directed within the data component where you can customize its fields, links, filters, and other options.
As each data component is unique with different formatting and customization options, please view each individual data component's article to learn more about customizing each data component.
Moving data components
Data components can be moved from one column to another on a page. To move a data component, hover over its name and a cross arrow move icon will appear. Use the move icon to drag and drop the data component to a new column of your choice.
Copying data components
You can copy and paste a data component onto a different page within your app by hovering over the data 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 data component.
Deleting data components
You can delete data components from a page by hovering over the data component, clicking its gear icon, and selecting the Delete option.
Please be cautious when deleting data components from pages as they can not be recovered.