Page Builder Overview

What is the Page Builder

The Page Builder is where you'll design all the ways that the data you entered in the Data Builder will present on your live app. It's where you'll create pages and the layout for each page to showcase your data exactly as you have in mind. It's where you'll choose from over two dozen unique components to add to each page, including tables, forms, kanban boards, maps, etc., so you can display your data in the way that makes the most sense. 

Navigating the page builder

The page builder is divided into 3 sections:

  1. The list of your Layouts and Pages

  2. Page and Layout Content

  3. Page and Layout navigation

Page and layout listing

In the page and layout directory you'll see all the layouts and pages in your app. At the top are the 3 pinned pages that are the default in each app. These pages can not be deleted, but you can edit them as you wish: 

  • Login
  • Signup
  • Profile

Beneath that are the list of layouts and below each layout are the pages associated with that layout. You can learn more about pages here and layouts here

 

Page and Layout Content

Once you select a page, the content of that page will be displayed in the right side of the page. Here is where you'll actually add the rows, columns and components. 

top-page-navigation.jpg

 

Page and Layout Navigation

Each page has it's own settings and the navigation at the top of the selected page will update this specific page. 

 

top-page-navigation1.jpg

 

How Page Builder Works

Page Structure

The page builder functions in a stacked manner with one item nesting inside another

At the very top of the stack are layouts which enable you to create a predefined header and footer that can be reused throughout your app. Learn more about layouts here.

Beneath layouts are pages. Pages are where you add the data you wish your users to be able to interact with. Learn more about pages here. 

Here's a diagram to illustrate the page structure. 

 

There are several key terms and features that are important to understand in order to properly understand the page stack. Before going into details about pages and layouts let’s see a brief primer of how rows and columns work. This applies to both pages and layouts as well as many components. 

Bootstrap grid basics

Tadabase uses Bootstrap for its structure of pages and layouts. With Bootstrap grid you can easily customize the page and design to meet your own unique visual structure requirements.

Here’s a brief primer on how bootstrap uses the grid system with rows and columns.

Each row is a new section horizontally separated in your page, each row can have up to 12 columns and each column can have any custom content (components in our case) as you wish to include in it. Components are discussed a here, for now just think of it as a any piece of data like a menu or form.

Here’s an example of 3 rows with different column configurations

To more easily identify rows vs columns vs components they are color coded as follows:

Green = Rows
Orange = Columns
Blue = Components

Adding Rows

To add a row to your page or layout click on Add Row at the top of the page and choose how many columns you wish to add inside the row. The options are 1 - 6 columns but you can add more after you add the row to the page. There are no limits as to how many rows can be on a page or layout.

 

Customizing Rows

Rows can be configured with custom permissions and security. You can restrict a specific row based on which role the user belongs to. You can set other design settings for the row as well.

Adding custom settings to this row will apply these options to all columns and components nested inside the row.

To customize row settings click on the green edit pencil icon in the row.

You’ll see 5 tabs with you can utilize to customize the row:

  • General

  • Fonts

  • Background

  • Border

  • Spacing

General tab

Name

When you have any rows it can be helpful to name each row to more easily identify it in the future. This will appear at the top left hand corner of the row.

Visibility

Define who can view this row. You can restrict the row to:

  • Public - anyone. Logged in or not logged in.

  • Any Logged In User - Anyone as long as they are logged in, independent of their role

  • Non Logged In Users - Specifically hide this row from user’s who are logged in

  • Specific logged in user roles - Only show this row to users of specific groups.

Row Container

The row container determines if this row should be displayed in Fluid or Fixed.

  • Fixed will load the row in no bigger than 960px

  • Fluid will load the row as wide as your browser window even if its much larger than 960px

Fonts tab

Here you can choose custom fonts styles to be applied to everything within this row. If you added custom fonts to your CSS you can enter that font to be used here.

Background tab

Customize the background of this row.

Border tab

Add borders to the row.

Spacing tab

Define custom spacing and padding to be used here.

Moving rows

If you have more than one row on a page, you can either drag and drop the row using the green four arrow button, or click the up and down arrows wot move the row

Deleting rows

To delete a row click the delete icon next to the green buttons.

Warning: Deleting a row will remove anything nested below it including columns, components and auto generated pages.

Columns

Columns are a way of vertically dividing a row with custom content and settings. Columns can only be added inside a row. Unlike rows, you can indeed add components inside a column.

Each column can range from 1 to 12 in size. Since each row can only have 12 rows it essentially means that if a column is size 12 the row will have one column. If you have 2 size 6 columns, the row has 2 equal sized columns. You can have as many columns in a row but at any given time only a total 12 column sizes can be lined up horizontally. For example if you have 3 size 6 columns, it will show the first 2 then the last column will appear below the first one - inside the same row still.

Adding Columns

Columns can only be added inside a row. Be sure to first add a row to your page.

To add a new column click on the Add Column icon either at the top or bottom of the row. Pressing it at the top will make the column appear at the top left of the row. Pressing it on the bottom will add it to the bottom right section of the row.

Resizing columns

You can resize the column by pressing the orange + and - buttons on the left-hand side of the column.

Customizing columns

Columns are designated a size but the size can be uniquely customized based on the screen size. This is a great way to make column fit nicely inside many different screen sizes like phones and tablets.

To customize the column click on the orange edit icon.

You’ll see several tabs, namely:

  • General

  • Fonts

  • Background

  • Border

  • Spacing

General tab

Column Width

In the general tab you can choose the size each column should be based on the screen size being used to view the page/layout.

Visibility

Choose to hide the column entirely from screens that are certain size.

Unlike rows, columns can’t be customized and restricted based on user roles.

Moving columns

You can either drag and drop the column using the green four arrow button, or click the left and right arrows to move the column.

Deleting columns

To delete a row click the delete icon next to the orange buttons.

Warning: Deleting a column will remove anything nested below it including components and auto generated pages.