Step 3: Let's design our live app in the Page Builder

Once we enter the Page Builder, we'll be presented with a sample page. 

38-1-sample-page.png

Similar to the sample data table provided in the Data Builder, a sample page is provided with every new app to demonstrate how app pages are structured with rows, columns, and components. 

38-5-page-structure-crop.png

For more information on page structuring including rows, columns, and components please click here.

When we click on the Preview Page button on the bottom right of the page or on the Preview icons located on the top right corner of each page, we can then preview what this sample page looks like on the live app. 

38-2-three-preview-options.png

Click on any of the three Preview buttons (locations highlighted in the image below) for a sample preview of what our live app looks like once we've added rows, columns, and components to our app pages.

38-3-sample-page-preview.png

Let's now delete this sample page and begin adding new app pages. To delete the sample page, click on the settings icon on the far right of the Sample Page tab and click Delete.

38-6-delete-sample-page.png

Now, let's get started adding the pages that will create the interface for our Contact Directory live app. The purpose of pages is to enable us to navigate the live app as easily as if we were navigating a website. To do this, we'll create app pages as well as menus for easy page-to-page navigation.

We can add parent pages as well as child/detail pages. For our basic contact directory app, we want to add a Company page so we can view all companies

Let's add our first page by clicking on the +Add Page button.

41-add-page.png

We'll name our page "Companies" and keep the status as active as this will be an active/live page. We'll also select the Default Layout, default page structure, and Default Menu- all of which will be explained in detail further on in this article. 

We'll then click Save to save this page.

42-save-companies-page.png

Once we've created our Companies page, we'll be prompted to add a component onto the page. Components are views that can be added to pages to display data with particular viewpoints and functionality. 

For our basic contact directory app, we'll start with adding a Table component to our Companies page to provide our data with a simple, easy to process viewpoint that is jam-packed with advanced functionality.

To add a table component, simply click of the table component icon.

To learn more about components please click here.

43-add-table.png

Which records would we like this new table component to display? We're adding this table component to the Companies page so we can view all our companies, so let's select the Companies data table to be displayed within our table component and click Customize.

The +Quick Add button provides an accelerated option to create components as it skips the customization process and auto-creates components with default settings. You can choose the Quick Add button for accelerated, default building or the Customize button to create custom, targeted components exactly as you need them.

As this is an app building demonstration, we'll select the Customize option to fully demonstrate how to create and customize our components.

44-add-table.png

We'll now customize our table component by selecting the fields we wish to display within our table. On our companies page we want to be able to view all our companies' details, so let's choose all the company fields from the fields menu on the left. We'll click on each field to add them to our table. 

45-click-to-add-fields.png

Now that we've clicked on the Company Name, Address, Website, and Industry fields to add them to our Companies table, we'll also add a link to a details page so that we can view the details of each company's records. To add a link to a details page, we'll click on Links and then select a Record Details Page.

46-add-details-link.png

Now this Details page has been added to our table component. To customize this details page, we'll click on the pencil icon on top of our newly added Details page.

47-click-on-pencil-to-edit.png

In the general settings of our details page, let's change the display name from "Details" to "Company Details". While there are other general customization options including the ability to hide the title name and add an icon to the title, let's keep these settings as default for this basic app and continue on to the formatting settings by clicking on the Format tab.

48-change-name.png

In the Format tab, let's customize how our Company Details link will appear. Instead of a basic, default link, we can easily change the display of the link to appear as an attractive call-to-action button. To do this, let's select Button instead of Link for link type. To customize how our button will appear, let's make some basic adjustments including selecting center alignment, solid style, block fill, medium size, and a primary color. Once we've made all these selections, let's click Update to save all these updates to our Details page.

For a detailed guide demonstrating each formatting option please click here.

49-change-display.png

No let's add some 

50-options.png

When we view all our companies on the live app, we'll want a quick and easy way to add new companies on the fly from the live app (instead of having to go back into the builder every time we'd like to add a new company).

To add this functionality, let's click on Options on the left-side menu and select Yes to enable the Allow New Record Popup Page. By enabling this option, we have added a button to our companies table component that when clicked, will popup with a form to add a new table.

Let's rename this button label as "Add New Company"

51-add-new-button.png

Let's also enable inline editing which will give us the ability to make instant updates on the fly on the live app.

There are many other table component options we could enable here including multi-select and batch operations, but for this basic app walkthrough we'll leave these options as-is (disabled at default).

52-inline-editing.png

And finally, let's click on Data Source on the left-side menu to customize the sorting method for which we want companies to appear in our table. Let's choose to display the companies in alphabetical order. We'll do this by choosing Company Name under Sort By and ASC (ascending order). Then we'll click Save to save all these table customization settings.

The Data Source is where we can customize the sorting and filtering options that will control which companies will appear in our table and in which order. For more details on using the Data Source tab, please click here.

53-data-source.png

Once we save the Companies table component, we'll see it reflected on our Companies page outline in the builder. We'll see our Companies table component as well as the 2 detail pages we just added to our table component- the add new company page and the company details page. 

Let's quickly customize the details page by clicking on the Company Details.

54-detail-pages.png

 

55-companies-detail-page.png