Live App Overview

What You'll Learn

You'll discover how to structure pages that showcase your data effectively, implement interactive elements that enable users to view and manipulate information, establish clear navigation paths, and personalize the interface to match your needs. By the end of this article, you'll have the knowledge to create a well-organized application that provides users with a seamless and powerful way to work with your data.

About Your Live App

Users will engage with your application through the Live App. Consider the Live App as a website specifically crafted for users to interact with the data you provide them.

In the Pages section of the Builder, you can add visual components, known as elements, that allow your Live App to seamlessly interact with your records. Here is an illustration of a Live App page from the Inventory Manager sample app featuring a table element:

What Are Elements?

Elements are organized into pages. Users will start on a designated start page and can easily navigate to other pages to access different elements.

Each page can contain one or more elements.

An element is a visual component that allows users to interact with the data in your database. These elements encompass:

• Forms to add and update records
• Tables, Lists, Maps, and Calendars to display multiple records
• Searches to find specific records
• Details to view the details of a single record
• Reports to view summaries and calculations of multiple records
• Link Groups to link to other pages
• Rich Text elements are utilized to showcase static content within your interface, such as images and formatted text.

About Pages

Your application begins with a single "Home" page, but you have the flexibility to incorporate multiple pages into your app. To incorporate additional pages, simply click on the "+" button located to the right of the "All Pages" section in the left column:

To get a preview of your Live App pages, simply click on the dropdown arrow next to "Using live data" and choose between live data or sample data:

You can also view your pages in your Live App by clicking on the "Go to Live App" button or by clicking the Preview button below:

After you've added a new page, you can start adding elements to enhance your pages.

Tip: To learn more information on adding and editing pages in your app, see our Working With Pages article.

About Elements

The interface starts with a blank start page, which serves as the initial view for users.

In order for users to access and view data in your app, it is necessary to add elements to your app pages. As an example, the page below includes two tables, one for viewing Contacts, and another for viewing Proposal Stages:

To begin adding elements to a page, simply click on the "Add Element" button located in the top menu to add your first element.

Upon clicking the "Add Element" button, you will have the option to select an element type from the menu on the left side of the page.

Once you have decided on the type of element you want to add to your Live App page, you will be prompted to select the table that the element will be associated with. (Please note that this does not apply to Link Group elements and Rich Text elements.)

After you've added the element, you will be directed to the element's settings where you can customize it according to your preferences.

Tip: To learn more information on adding and editing elements, see our About Elements article.

Menus and Links

Once you have added pages and elements to your app, it's important to provide your users with easy ways to navigate between different app pages. Menus and links provide a convenient way for users to move between various pages in your app.

It is crucial to grasp the concept of menus and links in order to effectively construct a multi-page app. Below, we have highlighted a page menu at the top, a Link Group element above the table element, and action links to edit the status of the records:

The top of the page features a menu called the page menu. This menu displays a link to each parent page, such as your "Dashboard" page.

Above the table, you'll find a convenient link labeled "Add Note." This link represents a Link Group element that connects to a child page.

Within the table, there is an action link field labeled "edit status". By clicking on these links, users will be directed to a child page that provides additional information about a specific company record.

This feature is particularly beneficial if you prefer not to display every field as a table column or if you want to showcase records connected to the company.

Tip: To learn about different page types, see this article here.

Adding User Logins

If you want to manage access to your app pages, you might consider adding user logins. If User Logins are enabled, you can easily add logins to your app.

Simply click on the down arrow button next to your page's name and choose "Require Login" from the dropdown menu.

As a result, users will be required to log in before accessing any page.

Tip: To learn more information on logins and registrations, see our Logins and Registrations article.

More Options

Showing Connected Records

With your application, it's a breeze to connect records. For instance, you can effortlessly configure your database so that each Contact record is linked to a corresponding Company record.

After connecting your records, it becomes easy to showcase them in your pages and elements. For example, you might want to display all the Products that are associated with a particular Purchase:

Simply click on the "Add Element" button on any details or edit page in the Builder, and you will be provided with options to display the connected records:

You can easily display the connected records with an element as the system recognizes the connection between Purchases and Products in the Inventory Manager sample app.

Tip: To learn more about displaying connected records, see our Combining Fields from Connected Records in Elements article.

Live App Design

You can also customize the look and feel of your Live App using the Live App design settings when visiting the app's settings:

Tip: To learn more about utilizing the Live App design options, see our article here.