Page Builder Overview

What is the Page Builder?

The Page Builder is the second section of the Tadabase Builder platform where you can design how your users will add and interact with your data on the live app.

Once you have defined your data structure in the Data Builder, you can move on to the Page Builder tab of the Tadabase Builder to design the live app interface that your users will use to add data within your defined data structure. Within the Page Builder you can design how your users will add data as well as how they will interact with added data via data components including forms, calendars, reports, etc.

QFJpage-builder-2.png

Within the Page Builder, there are three design elements you will use to design your live app interface:

  1. Components- Components are viewpoints you can add to your pages to display your data on the live app. For instance, forms, maps, calendars, menus, etc. 

  2. Pages- Add pages to your live app to display groups of components on each page. 

  3. Layouts- Layouts are page structures that can be reused consistently across multiple pages of your app. You can create multiple layouts to run across multiple sets of pages.

We will further explore each of these three design elements in detail within the following articles, but first let's define the various sections of the Page Builder so you can master how to navigate the Page Builder when using these elements to design your live app.

Navigating the page builder

The Page Builder is divided into three sections:

page-builder-nav.png

  1. Your app's list of Layouts and Pages

  2. Page and Layout navigation menu

  3. Page and Layout Content

Let's explore each of thee three Page Builder sections.

Your app's list of Layouts and Pages

This is where you can view all your app's layouts and pages and navigate to the layouts and pages you need by clicking on each one. 

At the top of the list, there are three pinned pages which are default pages that are automatically included with each new app. These default pages are similar to regular pages except that they were built-in to each app for your convenience to save you the time of having to create these basic pages from scratch.  

The three default pages built-in to each app for your convenience are:

  1. Login Page
  2. Sign Up Page
  3. Profile Page

 These default pages can not be deleted, however they can be edited and customized to your specific needs. Learn more about these default pages here

Beneath the three default pages is your list of Layouts and Pages that you have added to your app. As you can see in the image below which illustrates a sample app Layout/Page list, pages are grouped underneath the Layout (page structure) that they are using/ that you have assigned them to.

page-builder-layout-pages-list.png

Learn more about pages and layouts.

Page and Layout navigation menu

Each page and layout has its own navigation menu with various tabs you can use to customize that page/layout. The Content tab is the first tab on each page/layout navigation menu and it is where you will add the content for each page/layout in the form of rows, columns, and components. 

page-builder-nav-menu-2.png

We will explore all tabs on the page/layout navigation menu within the following articles, but first let's discuss the Content Tab as this is where all the page and layout content of your live app is designed. 

Page and Layout Content

When you click on a page or layout to select it, the content within that page/layout will be displayed underneath its navigation menu within the Content Tab. Your page/layout content includes all the rows, columns, and components you add to that particular page/layout to display on the live app. This is where you can add components to each page/layout and organize the display of components by adding rows and columns. 

page-builder-content.png

 

Layout and Page Structure

Layouts and Pages function in a stacked manner with one item nesting inside another. The diagram below illustrates the Layout and Page structure used within the Page Builder. 

export.png

 

Bootstrap grid system

Tadabase uses Bootstrap to customize the structure of each Layout and Page. With Bootstrap's grid system, you can easily customize the structural designs of your Layouts and Pages with Rows and Columns to meet your own unique visual structure requirements.

Rows are horizontal sections across a page that can be sectioned into columns. Each row can contain a maximum of 12 columns. A row with just one column spans the entire length of the page.

For instance, the image below illustrates three rows, each with a different column configuration.

Within each column you can add components which are the viewpoints through which users on the live app will add, track, and interact with your data. Examples of components include charts, summary cards, maps, forms, tables, etc.

Tadabase color-codes rows, columns, and components so you can easily identify your page or layout structure. Row, column, and component menus each share corresponding color-codes as well.

  • Rows are outlined in green
  • Columns are outlined in orange
  • Components are outlined in blue

Rows

Let's discuss how to add, customize, and secure rows within your pages and layouts.

Adding Rows

To add a row to your page or layout, click on the +Add Row button at the top of the page/layout and choose how many columns you wish to add inside the row. The options are 1 - 6 columns but you can add additional columns after you add the row to the page for a maximum of twelve columns within each row. There are no limits as to how many rows can be added to a page or layout.

add-row.png

When adding a new row, you can also choose to add a special type of row called a Row Separator. Adding a Row Separator will add a row to serve as a visual separation between two rows. For instance, as you can see in the image below, adding a Row Separator will insert a row between two rows to provide visual space between those two rows. 

row-separator.png

If you were to click the Preview button to preview this page on your live app, you would see how your newly added Row Separator provides a visual row of space between row above and below.

row-separator-2.png

 

Customizing Rows

You can customize each row with custom design formatting as well as with custom security permissions that enable you to restrict the row visibility to only specified user roles. When you customize a row's settings, these settings will apply to all columns and components within that row. 

To customize a row's settings, hover over the row and click on the green edit pencil icon.

edit-row.png

A new window will pop up with six tabs that you can utilize to customize your row settings: 

LrYdesign-row.png

Let's explore each of these six tabs, beginning with the General Tab.

General tab

Within the General tab of your row settings, you can define the following three settings:

general-tab.png

  1. Row Name- Name your row so you can easily identify this row among other rows within your page/layout content. This setting is optional. If you do enter a row name, it will appear at the top left hand corner of the row within your page/layout content as illustrated in the image below.

    row-name.png

  2. Visibility- Choose a security setting to define who can view this row.

    You can choose from the following four visibility options:

    1. Public- anyone can view this row. Meaning, there are no visibility restrictions for this row and anyone can view the row regardless of whether the user is logged in to your app are not. Public is the default visibility setting for all rows, and anyone can view rows at default unless otherwise changed within this setting.

    2. Non Logged In Users- Specifically hide this row from users who are logged in to your app and only show this row to non logged in users.

    3. Any Logged In User- Only show this row to users who are logged in, regardless of their user roles

    4. Specific Logged In User Roles- Only show this row to users assigned to specific user roles. When selecting this visibility option, you can click on the Add Role button to select a user role(s). Users assigned to the user role or roles you select will be able to view this row, while users not assigned to the role or roles you select will not be able to view this role. You can select multiple user roles as well as "All Roles" to allow all users assigned to any user role to view this row.

    visibility-gif.gif

    If you choose a secured visibility setting, a lock icon will appear at the top left of your row within your page/layout content so that you can easily identify which rows are secured.

    name-and-secure-row.png

  3. Row Container- The row container determines if this row should be displayed in Fluid or Fixed.
    • Fixed formatting will load the row in no bigger than 960px on your browser window. Fixed is the default Row Container setting. 

    • Fluid formatting will load the row as wide as your browser window, even if your browser window is much larger than 960px.

Fonts tab

Within the Fonts tab of your row settings you can choose custom font styles to be applied to all values within this row. If you add custom fonts to your CSS you can enter those fonts to be used here.

fonts-tab.png

 

Background tab

This is where you can customize the background of this row.

background-tab.png

 

Border tab

This is where you can add borders to this row.

border-tab.png

 

Spacing tab

This is where you can define custom spacing and padding to be used for this row.

spacing-tab.png

 

CSS tab

Feel free to enter custom CSS to further customize this row.

css-tab.png

 

Moving rows

If you have more than one row on a page or layout, you can move your rows up or down to your desired location on the page/layout. There are two ways to move a row up or down:

  1. Hover over the row and click on the Move Row Up button to move it one row up or on the Move Row Down button to move it one row down.
    move-row-up.png move-row-down.png


  2. Hover over the row and click on the cross arrow move icon to drag and drop your row to your desired location on the page/layout.

    drag-icon.png

 

Collapsing/Expanding rows

If you have many rows on your page or layout, you can collapse and expand rows by hovering over the row and clicking on the Collapse/Expand Row button.

ezgif-collapse-rows.gif

 

Deleting rows

To delete a row, hover over the row and click on the red trash icon button.

delete-row.png

 

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

 

Columns

Columns enable you to create vertical sections within a row on your page or layout to display components.

Columns can only be added within rows and components can only be added within columns. 

Each column can range from 1 to 12 in size. As each row can be sectioned into a maximum of twelve columns, a column with a size of 12 will comprise the entire row and that row will only have one column.

If you add two size-6 columns to a row, the row will have two equally sized columns.

You can add as many columns as you need within a row, but at any given time only a maximum of 12 columns can be lined up horizontally within a row. For instance, if you have three size-6 columns, the first two columns will display on the first line of the row and the third column will display underneath the first column within a different row- although all three columns are part of the same row. 

Adding Columns

You can only add columns within a row. Therefore, before adding a column you must first ensure that there is a row already added to the page/layout. If there is no existing row on the page/layout, you must first add a row before you can add a column(s).

To add a new column, click on the Add Column icon either at the top or bottom of the row. Clicking on the Add Column icon on the top of the row will add a new column to the top left of the row. Clicking on the Add Column icon on the bottom of the row will add a new column to the bottom right of the row.

add-new-column.png

 

Resizing columns

You can resize columns by clicking on the orange + and - buttons located on the top left-hand side of the column.

ezgif-resize-columns.gif

 

Customizing columns

You can customize each of the default settings of a column by hovering over the column and clicking on the orange pencil icon.

edit-column-settings.png

A new window will pop up with six tabs that you can utilize to customize your column settings: 

column-settings.png

Let's explore each of these six tabs, beginning with the General Tab.

General tab

Within the General tab of your column settings, you can define the following two settings:

general-tab-columns.png

  1. Column Width- Choose to customize the column size uniquely based on the screen size that will be used to view the page/layout. This will ensure that the column will display nicely within multiple screen sizes, such as on various types of phones or tablets.  

  2. Visibility- Choose to hide the column entirely from screens that are a specific size.

Unlike rows, column visibility can not be customized and secured based on user roles.

 
Fonts tab

Within the Fonts tab of your column settings you can choose custom font styles to be applied to all values within this column. If you add custom fonts to your CSS you can enter those fonts to be used here.

fonts-tab.png

 

Background tab

This is where you can customize the background of this column.

background-tab.png

 

Border tab

This is where you can add borders to this column.

border-tab.png

 

Spacing tab

This is where you can define custom spacing and padding to be used for this column. When setting properties here, use CSS units such as "px" or "%".

spacing-tab.png

 

CSS tab

Feel free to enter custom CSS to further customize this column.

css-tab.png

 

Moving columns

If you have more than one column on a page or layout, you can move columns to the right or left horizontally across a row to your desired location on the page/layout. There are two ways to move a column to the right or left on a row:

  1. Hover over the column and click on the Move Column Right button to move it one column to the right or on the Move Column Left button to move it one column to the left. 
    move-column-right.png move-column-left.png

  2. Hover over the column and click on the orange cross arrow move icon to drag and drop your column to your desired location on the page/layout.

    drag-and-drop-columns.png

 

Deleting columns

To delete a column, hover over the column and click on the red trash icon.

delete-column.png

 

Warning: Deleting a column will remove anything nested within that column including components and auto-generated pages.