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 thirteen Data Components available to display your data:

data-components.png

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:

 

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. 

add-data-component.png

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. 

add-comp-menu.png

 

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.

select-data-table.png

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 logged in user.

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 from which to display records via the new Data Component. 

 

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. 

 

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.

 

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. 

 

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: 

  1. Quick Add
  2. Customize

configuring-data-tables.png

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. 

add-connected-components-final.png

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. 

quick-add-form.png

Additionally, an Add New button is automatically created within your new data component which will appear on the live app.

add-new-button.png

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.

add-new-record-button.png

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. 

add-button-name.png

 

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.

 

company-details-3.png

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. 

company-details-2.png

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.

details-component-in-table.jpg

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.

add-details-link-2.png

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 clicking on the pencil icon above the Details column to edit it. 

add-details-link-3.png

 

 

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.

companies-details.png

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.

customize.png

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. 

customize2.png

 

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:

 

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:

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.

customize-row.png

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.

row-design.png

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.

design-data-component.png

A new window will pop including five tabs you can utilize to customize this data component's design.

component-design-tabs.png

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

fonts.png

 

Background

Within the Background tab, you can customize the background of this data component.

background.png

 

Border

Within the Border tab, you can customize the border of this data component.

border-tab.png

 

Spacing

Within the Spacing tab, you can define custom spacing and padding to be used for this data component.

spacing.png

 

CSS

Within the CSS tab, you can enter custom CSS to further customize this data component.

css.png

 

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 or by hovering over the data component and clicking on its blue edit pencil icon. 

edit-component.png

You will then be directed within the data component where you can customize its fields, links, filters, and other options. 

editing-component2.png

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.

move-components.png

 

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. 

copying-components-new.png

 

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.

delete-component.png

Please be cautious when deleting data components from pages as they can not be recovered. 

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