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
āœļø Page Builder
Components Overview

Components Overview

What are components?

Components are interactive viewpoints you can add to your pages or layouts that empower users to add and interact with your data on the live app.

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

2022-01-27_22-52-19.png

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

Each data and system component has its own unique features and settings, so we will explore each component within its own article within the following Data Components and System Components sections.Ā 

For now, let's explore how to add, edit, move, copy, and delete components, all of which are universally applicable across all data and system components.Ā 

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:

  1. Via the Component tab
  2. Within a column

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

2022-01-27_22-58-08.png

Ā 

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.

Editing components

Once a data or system component is added to your page/layout, you can edit the component by double 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.

2022-01-27_23-02-53.png

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

Components can be moved from one column to another on a page/layout. 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.

0bdc6884-f1bc-45c0-b2fb-71df6c71f70f.GIF

Designing 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-01-27_23-23-57.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-01-27_23-25-41.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 component, which will override the design of the row that contains that component.Ā 

Ā 

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

2022-01-27_23-28-58.png

Let's explore each of these five design tabs.

Fonts

Within theĀ Fonts tab of a 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 component. To learn more about importing external fonts, click here.Ā 

2022-01-27_23-25-41.png

Ā 

Background

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

2022-01-27_23-34-16.png

Ā 

Border

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

2022-01-27_23-34-42.png

Ā 

Spacing

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

Proper CSS Units are required when adding values to Margin or Padding. For example,Ā 18pxĀ orĀ 20%

lb9Margin-and-Padding.png

Ā 

CSS

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

2022-01-27_23-36-05.png

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

2022-01-27_23-36-38.png

Ā 

Deleting components

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

2022-01-27_23-37-39.png

Please be cautious when deleting components from your pages and layouts as deleted components can not be recovered.Ā 

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

How did we do ?

Previous Article
Pages
Next Article
PDF Pages (Alpha)
Article Navigation
  • What are components?
  • Adding components
  • Editing components
  • Moving components
  • Designing components
  • Fonts
  • Background
  • Border
  • Spacing
  • CSS
  • Copying components
  • Deleting components
  • Back to top
    API
    100% Operational
    Apps
    100% Operational
    Builder
    100% Operational
    Overall Status
    100% Operational