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
Pages

Pages

What is a page?

Pages enable you display data on your live app with custom security permissions and formatting settings. You can add pages to your app to display groups of components on each page. 

Pages are one of the three design elements you can use in the Page Builder, along with layouts and components, to design how users will add, view, and interact with your data on the live app.

Default Pages

At the top of your app's list of layouts and pages, there are three pinned pages which are default pages that are automatically included with each new app.

default-pages-illustration.png

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

 These default pages can not be deleted, however they can be edited and customized to your specific needs. Additionally, you can create new login, sign up, and profile pages by adding login, sign up, and profile system components to any page.

Please Note: If a User Menu system component has been added to a page or layout, when users clicks on their name within the user menu they will be routed to the default profile page. The default profile page is secured by default and there is no way to remove the permissions from this page.

 

The default sample page

Every new app comes with an included sample page which serves as a preview page to assist new users with creating their first apps. This sample page is for onboarding purposes only and can be deleted at any time or customized to meet your page needs. 

2022-01-27_13-17-49.png

 

Adding pages

To add a new page, click on the +Add Page button at the top of your app's list of layouts and pages in the Page Builder. 

2022-01-27_13-19-25.png

A new window will pop up prompting you to name your new page and optionally define other page settings as well. 

2022-01-27_13-24-38.png

  1. Name- Name your page. Page names do not have to be unique. It is required to name your page.

    Assuming you would like this new page to be active, you do not have to define any other pages settings other than the name at this time if you so choose. As the Layout, Page Structure, and Menu settings are optional and can be defined at a later point, and the Status is active at default, you can simply name your new page and click Save. Once you save your new page, it will be added to your app's list of layouts and pages with your selected name.
    To add content to this new page, select the page from the list of layouts and pages and the page's content will appear.

  2. Layout- Select a layout this page should be assigned to and use when displayed on the live app. This setting is optional and you can assign or change the layout at a later point within the Settings tab of each page's navigation menu. Click here to learn more about layouts. 

  3. Add Page to Current Menu- Choose to add this page to one of your existing menus. This setting is optional and you can add this page to display on a particular menu at a later point. Click here to learn more about the menu system component.

     4. Select component- Allows you to select one of 3 components before you ever hit save. 


Once you have defined your new page's name and other settings, click Save and your new page will be added to your app's list of layouts and pages. To add content to your new page, click on the page's name from your app's list of layouts and pages and the page content will appear.

 

Page Content

You can view and add content to a page within the Content tab of a selected page's navigation menu. You can access a page's content by selecting the page from your app's list of layouts and pages in the Page Builder.

 

Within the Page Content you can add rows, add columns within the rows, and add Data Components and System Components within the columns to design your page structure.

Adding content to a page

When you create a new page, a row with one column will automatically be added to the page and you will be prompted to add your first data or system component within that column.

2022-01-27_13-34-02.png

Additionally, you can add components to columns via the Add Component menu located towards the top of2022-01-27_13-36-54.png the page's content section.

 

Learn more about the various data components and system components you can add to your pages.

Learn more about adding additional rows and columns to your page structure.

 

Hiding the help window

When working with pages, you can choose to hide the help text window located on the right side of your browser window in order to expand the page content section. To hide the help text window and expand your page content section, click on the X above the help bar. 2022-01-27_13-55-03.png

 

As you can see in the image below, once you enable hiding the help text window the page content section of the selected page expands to give you more room to work with. To get the help section back, click on the help button at the top pf the page.

 

2022-01-27_13-59-55.png

Previewing pages on the live app

When you add rows, columns, and components to a page, you can preview how the page will display to users on the live app by clicking on the preview button.

2022-01-27_14-10-30.png

 

For instance, say you have a Tasks page and you add a row with one column and a table component within the column to track your tasks on the live app. If you wanted to preview how this page will appear on the live app, you can click the button located in the image above.

The image below illustrates the preview of how the above page in the Page Builder will appear on the live app.

2022-01-27_14-11-23.png

 

Customizing pages

You can customize your pages within the Settings Tab of each selected page's navigation menu.

2022-01-27_20-50-37.png

  1. Name- this is where you can view the name of this page and rename the page if you wish.

    Note: When working with auto-generated child pages, the name is auto-generated. It can be helpful to modify this name in the page settings after it is created. 

  2. Slug- this is the text that will appear in the URL when viewing this page. 

  3. Layout- Choose to assign this page to a layout.

  4. Home Page- Select whether this page should be the app's home page. Each app can have a home page which is the default page that users will automatically be directed to when they visit your domain or sub-domain.

    To assign a particular page as your app's home page, enable this Home Page setting to Yes. If you set a particular page as the app's home page, that page will display with a yellow star icon on your app's list of layouts and pages in the Page Builder. 

     


    set-home-apge.png

     

  5. Status- Select whether this page should be active or inactive. The default status for each page is Active and pages will remain active unless you change their status to "Inactive" within their page settings. 

    Pages that are active will display with a green dot icon on your app's list of layouts and pages. 

    green-dot-status.png


  6. Page Title- define a name for your page to display on the browser tab

  7. Page CSS Class- 

Securing pages

Within the Settings tab of a selected page's navigation menu, you can use the Page Security section to secure that particular page with custom security permissions, including restricting the visibility of that page to only specific user roles.

There are three options for page security: 

  1. Anyone, no login required- Using this default setting, the page will be visible to anyone. 

  2. Only Logged In Users- When this security option is enabled, only users who are logged in to your app will be able view this page. Any logged in users will be able to view this page, regardless of their user roles. 

  3. Only Users In Specific Roles- With this security option you can secure this page by specific user roles.

    2022-01-27_21-30-33.png

    When you select this security option, you will be prompted to select a role or multiple roles, securing this page to be accessed only by users assigned to your selected role(s). A user that matches any of the roles you select will have access to this page. 

When any permission restrictions are configured on a page, the page will display with a lock icon on your app's list of layouts and pages. 

2022-01-27_21-32-56.png

Additionally, when any permission restrictions are configured on a page, you will have the ability to create custom error messages to display when users attempt to access a secured page. 

2022-01-27_21-45-42.png

 

Page rules

Within the Settings tab of a selected page's navigation menu, you can create page rules to perform specific actions upon custom-defined conditions when a page loads.

Page rules enable you to run additional checks prior to a page loading and determine if a particular action should be taken if/when your defined condition(s) is met. 

For instance, you can create a page rule stipulating that when a page loads, check if the user's phone number is blank, and if it is blank then auto-direct the user to the profile page to update his/her phone number.  

When creating a page rule, you can choose one of the following three actions to occur if your conditions are met when the page loads:

  1. Show a message
  2. Redirect to another page
  3. Redirect to a URL

Show a message

You can create a page rule to show a custom message when your custom-defined condition(s) is met. Showing a message will override the default page content and instead only show your custom-defined message. The message can be shown with any HTML content as well as with a pre-defined alert style. The alert style will display your message with a pre-defined style type.

2022-01-27_21-55-19.png

You can show your custom message using one of the five alert styles: 

  1. Danger/Error

    danger-style.png

  2. Warning

    warning-style.png

  3. Info

    info-style.png

  4. Success

    wRosuccess-style.png

  5. No Style

    no-style.png

You can then enter your custom message as well as define your condition(s) upon which you would like your message to show.

2022-01-27_21-59-09.png

 

Redirect to another page

You can also choose to redirect the user to any parent page in your app if/when your defined condition(s) is met. 

AqO2022-01-27_21-59-09.png

 

Redirect to a URL 

You can also choose to redirect users to a specific URL if/when your defined condition(s) is met.  You can auto-direct users to a URL within your app or any external website you choose. 

2022-01-27_22-06-27.png

 

When adding page rules to a parent page, you can define conditions based on the logged-in user's field values, such as based on the logged-in user's name, role, status, etc.

When adding page rules to a child page, you can define conditions based on the logged-in user's field values as well as based on field values from the child page's data table. 

 

Parent and Child Pages

There are two types of pages that can be added to your app:

  1. Parent page

  2. Child page

Parent page

A parent page is a page you manually created by adding a new page. 

Child page

A child page is a page that is directly connected to a component in the page one level above it. When adding certain links to a component, a child page will automatically be created.

For instance, if you add a Details link to a table component, a child page will be created.

add-details-link.png

As you can see in the image below, adding the Details link to the above Employees table component automatically added a new child page with each employee's details. As you can see, the automatically created Employee Details child page was added directly under its parent Employees Page on the app's list of layouts and pages.

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

You can click on each child page to customize it just as you would any other page. For instance, you can customize the employee details page to appear as such:

employee-details-page.png

As you can see in the image below, child pages are nested below the page they are directly connected to via a component.

2022-01-27_22-28-53.png

 

Deleting a child page will not delete the link in the parent component, however deleting the link that created the child page will in fact remove the child page.

Page load process

When a page is requested by a user, the server goes through a process to determine what to show the user. Below is a diagram of that process. 

Page-Load-Diagram-Page-1.jpg

 

Deleting pages

You can delete a page by clicking on the gear icon to the right of the selected page within your app's list of layouts and pages and selecting the Delete option.

How did we do ?

Previous Article
Layouts
Next Article
Components Overview
Article Navigation
  • What is a page?
  • Default Pages
  • The default sample page
  • Adding pages
  • Page Content
  • Adding content to a page
  • Hiding the help window
  • Previewing pages on the live app
  • Customizing pages
  • Securing pages
  • Page rules
  • Show a message
  • Redirect to another page
  • Redirect to a URL
  • Parent and Child Pages
  • Parent page
  • Child page
  • Page load process
  • Deleting pages
  • Back to top
    API
    100% Operational
    Apps
    100% Operational
    Builder
    100% Operational
    Overall Status
    100% Operational