Page Builder Overview

Transcript Summary

Introduction

What's up, databasers? Sam here. In today's video, you're going to learn all about the Page Builder. The Page Builder is a tool where you can create a live app interface, allowing users to interact with your data.

What is the Page Builder?

The Page Builder works in conjunction with the data you create in the Data Builder. It allows you to build a space where people can interact with that data. You start with the layout, which is the top level of every page. Inside the layout, you have pages, and on those pages, you can add rows and columns using the Bootstrap grid system. In each column, you place your components, such as tables, maps, or forms, where users will interact with your data.

Breaking Down the Structure

• Layout: The top level that applies to multiple pages.
• Pages: Attributed to a specific layout and contain rows and columns.
• Rows: Each page contains rows where columns are added.
• Columns: Inside each row, columns are added to structure the layout.
• Components: Placed inside columns to provide functionality (e.g., tables, forms, graphs).

Live App Example

In the live app, the top part where the menu and options like profile and login/logout appear is the layout. Multiple pages can use the same layout. Each page has rows and columns. For example, you might have three columns in one row and just one column in another. Components such as tables or graphs are added to these columns, providing interaction points for users.

Navigating the Page Builder

When you switch from the Data Builder to the Page Builder, you’ll find that the default setup includes three pages: login, signup, and profile. These pages are pinned and cannot be deleted. In the Page Builder, the navigation panel on the left shows all the pages and layouts in your app. You can filter these by layout or role and even search for specific pages.

Creating Layouts and Pages

You can add new layouts and pages to your app. When you create a new page, you can assign it to an existing layout and even add it to a menu. When you add components like tables, you build out the page’s functionality. The layout ensures that elements such as the menu, profile options, and breadcrumbs are consistent across pages.

Using the Bootstrap Grid System

The Page Builder uses the Bootstrap grid system, which divides each row into 12 columns. You can choose how many columns you want in each row (e.g., 6 columns for a 50/50 split or 12 columns for a full-width component). Rows and columns are editable, and you can resize columns as needed.

Managing Rows and Columns

You can add, edit, or delete rows and columns within your layout. For each row or column, you can set design preferences such as visibility, background options, and spacing. You can also assign CSS classes for further customization.

Components

After setting up your rows and columns, you add components. These are the building blocks of your app, such as tables, graphs, or forms. Components go inside the columns, and their placement and arrangement are based on your layout and grid system.

Previewing Your Work

Once you’ve added components to your pages, you can preview the page to see how it will appear in the live app. The layout will be consistent across all pages that share it, while the specific components will change based on the page’s content.

Conclusion

In summary, the Page Builder lets you create interactive pages where users can work with your data. The structure consists of layouts, pages, rows, columns, and components, all built using the Bootstrap grid system. By mastering the Page Builder, you can design effective app interfaces where users seamlessly interact with your data.

Thank you for watching!