Logo
For example "scheduled tasks"
Search
Info
Content
Category Navigation
  • 📖  Manual

  • 👋Welcome

    Welcome to Tadabase

    What Is No-Code?

    Tadabase Support

    Getting Started With Tadabase

    Platform Overview

    🧰The Data Builder

    Data Tables

    Fields

    Text Fields

    Personal Fields

    Number Fields

    Date Fields

    Option Fields

    File and Image Fields

    Equation Fields (Category)

    Equation Fields

    Connection Fields

    Date Equation Examples

    Records

    Record Logs

    Import Templates

    Export Templates

    Automating Tasks

    Number Equation Examples

    Text Equation Examples

    Multi-Function Equation Examples

    ✏️Page Builder

    Page Builder Overview

    Layouts

    Pages

    Components Overview

    PDF Pages (Alpha)

    PDF Pages 2.0

    📗System Components

    System Components Overview

    Menu

    User Menu

    Breadcrumbs

    PDF Print (Alpha)

    Link Button

    Login

    Signup

    Profile

    HTML

    Image

    Subscriptions (Alpha)

    📘Data Components

    Data Components Overview

    Form Component

    Table Component

    List Component

    Kanban Component

    Calendar Component

    Resource Component

    Map Component

    Timeline Component

    Accordion Component

    Card Component

    Chart Component

    Search Component

    Import Component

    Data Source

    Data Source Filtering

    Links

    Display Rules

    Inline Editing

    Data Component Visual Directory

    Custom Component

    Custom Component Helpers

    Writing Your Own Component Helpers

    🙋Users

    Users

    Roles

    Single Sign On (SSO)

    Adding Stripe Subscriptions

    🔒Security and Reliability

    Tadabase Builder Security

    App Security

    User Security

    🔗Integrations

    Zapier Integration

    Using Webhooks

    Saving files to Dropbox

    Adding PayPal payment buttons to your app

    Exporting records to Google Sheets

    Viewing data in Microsoft BI

    Chat Widgets

    REST API

    Using SendGrid for emails

    Saving files to AWS S3 Bucket (IAM Method)

    Incoming Webhooks

    Embeddable Components

    Saving Files to Custom S3 Bucket (Account Method, Recommended)

    PDF Forms

    Stripe Checkout

    JavaScript Callbacks and Actions

    Twilio Integration

    ⚙App Settings

    General Settings

    Layout & Format Settings

    Custom Domain

    Customizing CSS

    Changing app themes

    Support Settings

    404 Error Page

    💳Account

    Plans

    Managing Your Account

    Sharing your app builder

    Managing your Apps

    🧩Pipes

    Introduction to Pipes

    Adding Pipes

    Using Pipes

    PDF Gen V2

Categories
📖 Manual
📘 Data Components
Data Components Overview

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:

2022-02-01_21-50-10.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:

  • Form Component

  • Table Component

  • List Component

  • Search Component
  • Map Component

  • Timeline Component
  • Kanban Component
  • Chart Component
  • Pivot Table Component (Article coming soon)
  • Calendar Component

  • Calendar Resource Component
  • Card Component
  • Accordion Component

  • Import 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. 

2022-02-01_22-06-51.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. 

2022-02-01_22-09-10.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.

2022-02-01_22-13-32.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. 

2022-02-01_22-24-28.png

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: 

  1. Quick Add
  2. Customize

2022-02-01_22-43-09.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. 

2022-02-01_22-45-14.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.

2022-02-01_22-55-55.png

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. 

2022-02-01_22-56-47.png

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

2022-02-01_23-08-10.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.

2022-02-01_23-09-44.png

 

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.

2022-02-01_23-12-15.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. 

2022-02-01_23-14-02.png

 

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.

 

2022-02-01_23-15-15.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. 2022-02-01_22-56-47.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.

2022-02-01_23-18-17.png

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.

2022-02-01_23-26-16.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 double clicking Details above the Details column to edit it. 

2022-02-01_23-29-27.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

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. 

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:

  • Form Component

  • Table Component

  • List Component

  • Map Component

  • Calendar Component

  • Timeline Component

  • Kanban Component

  • Accordion Component

  • Chart Component

  • Card Component

  • Calendar Resource Component

  • Import Component

  • 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.

2022-02-01_23-47-06.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.

2022-02-02_10-34-58.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.

2022-02-02_10-37-21.png

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

2022-02-02_10-40-46.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. 

2022-02-02_10-43-00.png

 

Background

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

2022-02-02_10-43-57.png

 

Border

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

2022-02-02_10-57-00.png

 

Spacing

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

Margin-and-Padding.png


CSS

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

2022-02-02_10-59-07.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.

2022-02-02_11-00-31.png

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

2022-02-02_11-03-33.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.

 

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. 

2022-02-02_11-10-40.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.

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. 

    How did we do ?

    Previous Section
    📗 System Components
    Next Article
    Form Component
    Article Navigation
  • What are data components?
  • Adding Data Components
  • Selecting a data table
  • Select the data table
  • Records connected to the logged-in user
  • Multiple connections to the Users data table
  • Records connected from the logged in user
  • Details Component for Logged In User
  • Records connected to this Data Table
  • Records related to this Data Table
  • Configuring the data table
  • Quick Add
  • Quick Add on a Parent Page
  • Include a form to add records into this data table
  • Include a link to view more details about records in this data table
  • Include a table of connected records in the details page
  • Quick Add on a Child Page
  • Customize
  • Designing data components
  • Fonts
  • Background
  • Border
  • Spacing
  • CSS
  • Editing data components
  • Moving data components
  • Copying data components
  • Deleting data components
  • Back to top
    API
    100% Operational
    Apps
    100% Operational
    Builder
    100% Operational
    Overall Status
    100% Operational