Creating & Managing Layouts

What is a Layout?

Layouts are one of the design elements used in the Page Builder, along with pages and components. They help design how users will add, view, and interact with data on your live app. Layouts allow you to create a consistent page structure across multiple pages and customize the user interface and experience for different user groups.

Key Features of Layouts

• Consistency Across Pages: Layouts enable you to build a consistent page structure that can be applied to multiple pages, ensuring a uniform user experience.

• Multiple Layouts: You can create multiple layouts for different sets of pages, each with unique headers, menus, and other structural elements, allowing for tailored interfaces.

• Custom User Experiences: Layouts can be used to customize interfaces for specific user groups, providing different experiences based on roles or needs.

Your existing layout will not be automatically converted to the new Layouts. You will need to create a new layout and manually migrate each page to the new layout accordingly.

Adding your first Layout

Adding your first layout requires three simple steps:

1. Select the Layout Design:

   • Choose the design template that fits your needs.

2. Configure the Layout:

   • Customize the layout settings according to your preferences, including menus, headers, and other elements.

To get started, navigate to the Page Builder and click on "Add Layout."

Select Layout

You'll be taken to a new layouts page where you can choose which layout you would like.

Select a new layout, name it and save.

Once a layout is chosen, it can't be changed to a new design.

Migrating Pages to new Layout

After creating a new layout, you will need to manually move each page to the new layout. Here’s how to do it:

1. Access Page Settings:

   • Navigate to the settings of the page you want to move.

2. Locate the Layout Option:

   • Within the page settings, find the "Layout" section.

3. Change the Layout:

   • Select the new layout you created from the dropdown menu or list.

Brand Identity

In the Logo and Layout Colors sections, you can define your brand identity to ensure the app reflects your company's style. Consistent branding builds trust and recognition among users.

Configuring Layouts

The layout will start with some default menus and settings which can all be personalized to your needs. All changes to the layout are managed from the right-pane.

Please note that each layout comes with its own unique set of configurable options. The configurations and options displayed in this documentation may differ from those available in your builder.

Layouts offer various configurations to tailor the user experience. These configurations enable you to create a cohesive and efficient interface, ensuring users can navigate and interact with your app effectively.

• Menus:

  • Primary Menu
  • Secondary Menu
  • Notification Icons - this is an icon that can serve as a menu for the user to navigate to a specific page
  • Alert Icons
  • User Menus

• Utilities:

  • Search
  • Breadcrumbs
  • Footer

Menus

The primary and secondary menu serve as the primary navigation sources for the app. However, some layouts will have additional menus that are only an icon. While it may look like unique functionality, it's really just a menu. 

A menu can take your users to the following endpoints: 

• Link - this can be a static internal or external link on the web
• Page - A page inside of your Tadabase app. This menu type can also be configured to open the page in a popup so the user stays on the same page instead of navigating away. Very useful to quick-add a new record in a poup. 
• User Action - A button that will log an existing user out

Within each menu, you can add custom permissions to only show the menu for a specific user role/logged in user. 

Adding security doesn't mean the page is secure, it simply means the navigation menu item won't be visible. The page security must still be configured on the layout or page level. 

The Menu Title supports several advanced functionality including

• HTML
• App Variables
• Logged In User Variables

HTML 
You can add basic custom HTML inside the menu. 

Keep in mind adding custom HTML can easily break your app. For example, adding <div>Apps and not closing the </div> will break the entire page structure. 

 

App Variables

 

User Variables

Any value from the logged in users table. For example, if you have a field in the Users table called "Total Jobs" you can make a menu with the text: Jobs ({loggedInUser.Total Jobs}) which will show "Jobs 8"

These same variables can be applied to all the configurations that allow you to enter custom text. 

Customization and Flexibility

Each layout comes with its own set of menus, configurations, and settings that can be customized to fit your preferences and brand identity.

Enabling/Disabling Settings

You can enable or disable any layout setting by toggling the switch for that particular setting. For example, to hide the Copyright footer, simply toggle it off. This flexibility allows you to streamline the user interface and remove unnecessary elements.

User Access Control

Each setting can have unique user access control settings. You can choose to display certain elements only for logged-in users or specific user roles. This ensures that each user sees only what is relevant to them, enhancing security and usability.

Previewing Layouts

To preview how the layout will appear based on user login status, change the "Preview" option at the top. This feature allows you to visualize the user experience for different roles and devices, ensuring a responsive and user-friendly design.

To preview the layout within the app, add or move a page into this layout and preview the page as usual. 

Brand Identity

In the Logo and Layout Colors sections, you can define your brand identity to ensure the app reflects your company's style. Consistent branding builds trust and recognition among users.

App Variables

App Variables in Tadabase are a powerful feature that allows you to efficiently store and utilize data across your entire application. Whether you need to store logos, content, or any other information consistently throughout your app, App Variables are here to help. In this guide, we'll walk you through the purpose and functionality of the App Variables tab within the Tadabase Application Builder.

Accessing the App Variables Tab

To get started with App Variables, follow these steps:

Navigate to the App Settings:

1. In the Tadabase Builder, locate the Settings icon on the left-hand side.
2. Click on the Settings icon to access the App Settings section.

Access the App Variables Tab:

1. Within the App Settings, find the "App Variables" tab.
2. Click on it to enter the App Variables management area.

Creating a New App Variable

Once you're in the App Variables tab, you can start creating your App Variables. Here's how:

Add a New Variable:

• In the upper-right corner of the App Variables tab, click on the "Add New Variable" button to begin the creation process.

Configure the Variable:

You'll be presented with several options to define your variable:

• Name: Give your variable a friendly name for easy identification, e.g., "Logged-in User Name."

• Unique Code: Define a unique code that references the variable's purpose, such as "loggedInUserFullName."

• Description: Describe the purpose of the variable, so it's clear to other developers or team members, e.g., "Name of the logged-in user."

• Type: Choose between "Static" and "Formula."

  Static: Select this type if your variable contains fixed content like text, URLs, or any data that doesn't change based on calculations.

  Formula: Opt for this type when you need the variable to hold calculated values based on data tables, fields, and conditions.

Configuring a Formula Type Variable (if applicable)

If you choose the "Formula" type, you'll have additional options to set up your variable:

• Data Table: Select the relevant data table on which you want to perform calculations.
• Formula Function: Choose a function for the calculation from options like Count Records, Maximum Value, Minimum Value, Average Value, or Sum Value.
• Value Field: Pick a field from the selected data table to use with the chosen formula function.
• Data Condition: Define a condition if you need to filter out specific records from the calculation. This helps refine your variable's output.