Now that you understand how to structure your data with tables and fields, it's time to learn how to create the user interface that displays and interacts with that data. This is where pages and components come in.

In this section, you'll learn how to build the visual part of your application - the screens and elements that users see and interact with.

Pages are the individual screens or views in your application. Think of them like web pages - each page has a specific purpose and displays specific information.

Every page has:

• Page Name - Internal identifier for the page
• Page Title - What users see (can be different from name)
• URL Slug - The web address for the page
• Components - Elements displayed on the page
• Settings - Configuration options for behavior and appearance
• Permissions - Control who can access the page

You'll create multiple pages for different purposes:

• List Pages - Show all records in a table (like a directory)
• Detail Pages - Show complete information about one record
• Form Pages - Allow users to add or edit records
• Dashboard Pages - Display summary information and reports
• Search Pages - Help users find specific records
• Report Pages - Display charts, graphs, and analytics

Pages are connected through:

• Menus - Navigation bar with links to main pages
• Buttons - Action buttons that navigate to other pages
• Links - Clickable text or elements
• Automatic Navigation - Form submissions, record selections

Understanding different page types helps you organize your application effectively.

List Pages

List pages display multiple records from a table:

• Show all contacts, all projects, all products
• Usually include a table or cards component
• Allow searching, filtering, sorting
• Click a record to view details
• Often include "Add New" button

Example: A "Contacts List" page showing all your contacts in a table

Detail Pages

Detail pages show complete information about one specific record:

• Display all fields for a single record
• Usually include details component or rich text
• May include edit button
• Can show related records from other tables

Example: A "Contact Details" page showing everything about John Smith

Form Pages

Form pages allow users to add new records or edit existing ones:

• Include form component
• Can be add-only or edit-only
• Validate data before submission
• Redirect after successful submission

Example: An "Add New Contact" page with a form to enter contact information

Dashboard Pages

Dashboard pages provide overview and summary information:

• Combine multiple components
• Show charts, graphs, statistics
• Display key metrics
• Often used as home page

Example: A "Sales Dashboard" showing total deals, revenue charts, recent activities

Typical Page Structure

Most applications have a structure like:

• Home/Dashboard - Landing page with overview
• List Pages - One for each main table
• Detail Pages - Linked from list pages
• Form Pages - Add/edit pages for each table
• Reports - Analytics and reporting pages

Components are the building blocks of your pages. They're the individual elements you add to pages to display data, collect input, or provide functionality.

Each component:

• Has a Purpose - Displays data, collects input, shows charts, etc.
• Connected to Data - Most components link to tables and fields
• Configurable - Settings control appearance and behavior
• Positioned on Page - Arranged in layout

Tadabase offers 30+ components. We'll focus on the most essential ones:

Data Components

Data components display or interact with data from your tables:

• Table - Display multiple records in rows and columns
• Form - Add or edit records
• Details - Show all fields from a single record
• Cards - Display records as visual cards
• List - Show records in a simple list format
• Calendar - Display records on a calendar
• Map - Show records on a map

Chart Components

Chart components visualize data:

• Bar Chart - Compare values across categories
• Line Chart - Show trends over time
• Pie Chart - Show proportions
• Gauge - Display single metric

System Components

System components provide functionality:

• Rich Text - Display formatted text and HTML
• HTML - Custom HTML content
• Menu - Navigation menu
• Search - Search functionality
• Login - User login form

Understanding the difference between data and system components is important:

Data Components

• Connected to Tables - Always linked to a data table
• Display Records - Show information from your database
• Interactive - Users can view, add, edit, delete data
• Dynamic - Content changes based on data

Examples: Table, Form, Details, Cards, Calendar

System Components

• Not Connected to Tables - Stand-alone functionality
• Static or Functional - Provide features or display fixed content
• Utility Purpose - Navigation, text, search, etc.

Examples: Rich Text, HTML, Menu, Search

When to Use Each

Use data components when:

• Displaying information from your tables
• Allowing users to add/edit/delete records
• Creating interactive, data-driven pages

Use system components when:

• Adding navigation
• Displaying static information or instructions
• Adding search functionality
• Embedding custom HTML or media

Let's learn how to add components to a page. We'll walk through the process step by step.

Accessing Page Builder

1. In your app builder, click "Page Builder" in the left sidebar
2. You'll see an empty pages list (no pages created yet)

Creating Your First Page

1. Click "+ Add Page" button
2. Enter page name: contacts_list
3. Enter page title: Contacts
4. Select page type: Data List Page (template)
5. Select table: Contacts
6. Click "Create"

Understanding the Page Editor

You're now in the page editor. You'll see:

• Left Panel - Available components to add
• Center Canvas - Page layout (may have default components)
• Right Panel - Settings for selected component
• Top Bar - Page settings, preview, save

Adding a Component

To add a component:

1. Browse components in left panel
2. Drag component to canvas, or click to add
3. Component appears on page
4. Right panel shows configuration options

Every component has settings you can configure. Let's explore common settings:

Table Component Settings

If you added a table component, you can configure:

Data Source:

• Which table to display
• Filters to limit records shown
• Sorting (default sort order)

Columns:

• Which fields to display
• Column order
• Column width
• Column labels

Display Options:

• Enable search
• Enable pagination
• Records per page
• Enable export
• Enable column sorting

Actions:

• Add "New Record" button
• Enable row click to view details
• Enable edit/delete buttons

Form Component Settings

When configuring a form component:

Data Source:

• Which table to add/edit records in
• Add mode or edit mode

Fields:

• Which fields to include
• Field order
• Field labels
• Required fields
• Default values

Submit Settings:

• Submit button text
• After submit action (redirect, show message)
• Success message

Layout:

• Single column or multi-column
• Field grouping
• Section headers

Details Component Settings

For details components:

Data Source:

• Which table to display from
• How to identify the record (usually from URL)

Fields:

• Which fields to display
• Field order
• Field labels

Layout:

• Single or multi-column
• Grouping by sections

Common Settings for All Components

Most components share these settings:

• Component Title - Heading displayed above component
• Show/Hide Title - Toggle title visibility
• CSS Class - Custom styling classes
• Visibility Rules - Show/hide based on conditions
• Permissions - Control who can see the component

Let's create a complete page showing all contacts in a table.

Step 1: Create the Page

1. Go to Page Builder
2. Click "+ Add Page"
3. Name: contacts_list
4. Title: All Contacts
5. Click "Create" (start with blank page)

Step 2: Add Table Component

1. From left panel, find "Table" component
2. Drag it to the page canvas
3. Component appears on page

Step 3: Configure Table Data Source

1. In right panel, find "Data Source" section
2. Select table: Contacts
3. Leave filters empty (show all records)
4. Set sort: Last Name ascending

Step 4: Configure Columns

1. In right panel, find "Columns" section
2. Select which fields to display:
   • First Name
   • Last Name
   • Email
   • Phone
   • Company
   • Status
3. Arrange columns in desired order (drag to reorder)

Step 5: Configure Options

1. Enable "Search" - allows users to search records
2. Enable "Pagination" - show 25 records per page
3. Enable "Column Sorting" - users can click headers to sort
4. Enable "Export" - users can download data

Step 6: Save and Preview

1. Click "Save" in top right
2. Click "Preview" to see how it looks
3. You should see all your contacts in a table!

Now let's create a page with a form to add new contacts.

Step 1: Create Form Page

1. Go to Page Builder
2. Click "+ Add Page"
3. Name: add_contact
4. Title: Add New Contact
5. Click "Create"

Step 2: Add Form Component

1. From left panel, find "Form" component
2. Drag it to page

Step 3: Configure Form Data Source

1. In right panel, select table: Contacts
2. Set mode: Add New Record

Step 4: Configure Form Fields

1. In "Fields" section, select fields to include:
   • First Name (required)
   • Last Name (required)
   • Email (required)
   • Phone
   • Company
   • Status (with default: Active)
   • Notes
2. Arrange fields in logical order

Step 5: Configure Submit Settings

1. Submit button text: Add Contact
2. After submit: Redirect to page
3. Select page: contacts_list
4. Success message: Contact added successfully!

Step 6: Save and Test

1. Save the page
2. Preview the page
3. Fill out the form and submit
4. You should be redirected to the contacts list with your new contact!

Let's create a page to view complete details about a single contact.

Step 1: Create Details Page

1. Go to Page Builder
2. Click "+ Add Page"
3. Name: contact_details
4. Title: Contact Details
5. Click "Create"

Step 2: Add Details Component

1. From left panel, find "Details" component
2. Drag it to page

Step 3: Configure Details Component

1. Select table: Contacts
2. Record source: From URL (record will be identified by URL parameter)
3. Select all fields to display
4. Arrange in logical order

Step 4: Save Page

1. Save the page
2. Note: This page won't work in preview yet - we need to link to it from the table

Now let's connect our pages together so users can navigate between them.

Linking Table to Details Page

1. Go back to your contacts_list page
2. Select the table component
3. In settings, find "Details Page" or "Click Action"
4. Set: When row is clicked, go to contact_details page
5. Save

Now when users click a contact in the table, they'll see the full details!

Adding "Add New" Button to List Page

1. On your contacts_list page
2. In table component settings, find "Actions"
3. Enable "Add Record Button"
4. Button text: Add New Contact
5. Link to page: add_contact
6. Save

Now your table has an "Add New Contact" button that takes users to the form!

Adding Navigation Menu

1. Go to App Settings → Layout → Menu
2. Add menu items:
   • Contacts (link to contacts_list)
   • Add Contact (link to add_contact)
3. Save

Now you have a navigation menu that appears on all pages!

Your app is automatically published as you build. Let's view it!

Accessing Published App

1. In the builder, find your Published App URL in the top bar
2. Click the URL or copy it to open in new browser tab
3. You'll see your live application!

Testing Your App

Test the complete workflow:

1. View the contacts list
2. Click a contact to see details
3. Click "Add New Contact" button
4. Fill out and submit the form
5. Verify you're redirected to the list with new contact
6. Use the navigation menu

Making Changes

If you want to change something:

1. Go back to builder
2. Make your changes
3. Save
4. Refresh published app to see changes

Changes appear instantly - no deployment process needed!

Understanding layout helps you create professional-looking pages.

Page Layout Options

Pages can have different layouts:

• Full Width - Components span entire width
• Fixed Width - Centered with max width
• Columns - Divide page into columns

Arranging Components

You can:

• Drag and drop to reposition components
• Resize components by dragging edges
• Stack components vertically
• Place side-by-side in columns

Using Sections

Sections help organize page content:

• Group related components
• Add section headers
• Create visual separation
• Collapsible sections

Responsive Design

Tadabase pages are automatically responsive:

• Adapt to different screen sizes
• Mobile-friendly by default
• Components stack on small screens
• Test on different devices

You can control when and to whom components are visible.

Visibility Rules

Hide or show components based on conditions:

• User role (show only to admins)
• Field values (show if status = active)
• Date ranges (show during specific dates)
• Custom logic

Page Permissions

Control who can access entire pages:

• Public (anyone can view)
• Login required (only authenticated users)
• Role-based (specific roles only)

Component Permissions

Control component access separately:

• Show to all users
• Show to specific roles
• Hide from certain users

Learn these common page patterns you'll use repeatedly:

Pattern 1: List + Detail Pages

• List page shows all records in table
• Click record to view details page
• Details page shows full record information
• Back button returns to list

Pattern 2: List + Form Pages

• List page shows all records
• "Add New" button goes to form page
• Form submits and returns to list
• Edit button on list goes to form in edit mode

Pattern 3: Master-Detail

• List on one side of page
• Details on other side
• Click list item to see details
• No page navigation needed

Pattern 4: Multi-Step Forms

• Multiple form pages in sequence
• Each page collects different information
• Progress indicator shows steps
• Final page submits all data

Pattern 5: Dashboard with Widgets

• Multiple small components
• Charts, statistics, recent activity
• Links to detail pages
• Overview of key information

Follow these best practices for professional applications:

Page Design

• Keep it simple - Don't overcrowd pages
• Logical flow - Arrange elements in natural reading order
• Consistent layout - Use similar layouts across pages
• Clear navigation - Users should know where they are and how to get around
• Mobile-friendly - Test on phones and tablets

Component Usage

• Right component for the job - Use table for lists, form for input, etc.
• Don't duplicate - Don't show same data in multiple components on one page
• Clear labels - Use descriptive component titles
• Helpful instructions - Add help text where needed

Naming

• Page names - Descriptive, lowercase, underscores (contacts_list)
• Page titles - User-friendly, proper case (All Contacts)
• Consistency - Use same naming patterns throughout

Performance

• Limit records displayed - Use pagination for large datasets
• Only show needed fields - Don't display all 50 fields if 5 are enough
• Optimize images - Compress before uploading
• Test with real data - Pages may behave differently with thousands of records

Common issues and solutions:

Component Not Showing Data

• Check data source is selected
• Verify table has records
• Check filters aren't too restrictive
• Ensure fields are selected for display

Page Link Not Working

• Verify page exists and is saved
• Check link configuration
• Ensure page permissions allow access
• Check for typos in page name

Form Not Submitting

• Check all required fields are filled
• Verify field validation rules
• Check submit settings are configured
• Look for error messages

Details Page Shows Wrong Record

• Check record source is set to "From URL"
• Verify link from table passes record ID
• Test URL with known record ID

You now understand pages and components - the building blocks of your application's user interface. You know how to create different page types, add and configure components, and link pages together.

In the next section, you'll put everything together by building your first complete application from start to finish: a simple Contact Manager with all the features you've learned.

Hands-On Exercise (To Be Added)

Exercise placeholders will include:

• Create the three pages described above (list, form, details)
• Configure all components with proper settings
• Link pages together for complete workflow
• Add a navigation menu
• Test the complete app in published environment
• Add an edit form page
• Create a second set of pages for your Companies table
• Experiment with different component layouts

Knowledge Check (To Be Added)

Quiz questions will test understanding of:

• Different page types and when to use each
• Difference between data and system components
• How to configure table and form components
• Linking pages together
• Page navigation patterns
• Best practices for page design