Introduction to App Builder - Lesson 4: The UI layer

This is the fourth lesson of the Introduction to App Builder tutorial series.

The UI layer

As suggested by the name, the UI layer is where App Builder developers define what gets shown to the end users of the applications, including the pages that will be used to navigate them.

In the previous lessons, we started with the data layer, where our data lives, and organized it into tables. Then, in the business layer, we created the business objects, or rules, that will allow us to retrieve the data in order to read, show and modify them. Now that this underlying structure is ready, we can work on our application's UI.

The UI of an App Builder application is made up of three parts: pages, panels, and controls. Let's define these three terms:

Page: A page is just the shell. It doesn't have any data, and contains just a single or several panels.
Panel: A panel is a section or area that sits on top of the page. Panels contain data derived from the rules that you connect them to. There are several types of panels in App Builder, but in these lessons, we'll only use two:
- Form: They only show information for one record at a time.
- Grid: They show information for multiple records.
Control: A control identifies what specific component of data from a data source you want to display or look at.

Let's see how these concepts work in practice by creating a page.

Create your first page: Categories

Let's create and add to our application a page that will display all the records in the Category table. Follow these steps:

Access the App Workbench. You can do that by clicking the hamburger icon on the top right of any page, which reveals the action drawer, then selecting App Workbench.
There are multiple ways to create pages in App Builder. Go to the Pages tab and click the + Page button there. The Create A New Page wizard opens:
Enter Categories as the page name. We'll use a plural name for this page because it will show multiple records of categories. Click Next.
In Select a Menu, you have to choose the menu you want your new page to appear on. Select Configuration.
In Select a Layout, pick a layout for the new page. Although it can be changed later, you must pick one in order to create the page. Select Full Page and click Next.
Click Finish and App Builder will create the page. After a few moments, you will see the Page Edit page, where you can continue setting up the page contents.

You've just created your first page in App Builder. It doesn't have anything yet, but if you can see what it looks like by clicking the View Page button in the Page Edit page. App Builder will open a new tab in your browser to show you the current state of the page. You can keep that tab open and periodically refresh it as you continue working.

Add content to your page

Let's continue setting up the Categories page. We've chosen a layout for it and decided where it can be found, but we need to add content to it.

Go to App Workbench > Pages and find the Categories page you've just created. Click the pen icon at the end of its row to enter edit mode.

Once you're in edit mode, follow these steps:

In the Page Panel Layout panel, click Choose Panel Type. The Create a Panel wizard opens:
We are trying to show all the records from a specific table, so select Grid as the Panel Type and click Next.
Select Category (Source) as the Panel Source, since that is the rule that connects to the table that holds the data we want. Click Next.
App Builder will ask if you want it to automatically add controls to your panel. It will be useful to do this manually when there are many columns in a table and you don't need all of them, but in the case of this page we're creating now, select Auto Build and click Next.
Click Finish.

After a few moments, the Page Panel Layout will be updated, showing the controls App Builder created for the page. If you click View Page, the preview should look like this:

Categories page 1

Create a second page: Customers

Let's create another page, but this time we'll select its controls manually:

Repeat Steps 1 and 2 from when you created the Categories page.
Give this new page the name Customers. Click Next.
In Select a Menu, pick Home.
In Select a Layout, pick Full Page.
Click Finish and wait for App Builder to create the page. When it finishes, you'll be in the new page's edit screen.
Click Choose Panel Type and select Grid as the new page's Panel Type. Click Next.
This time, instead of letting App Builder add controls to your panel automatically, select Choose Manually and click Next. An extra step in the wizard appears, asking you to select which columns from the Customer (Source) object you want to use:

We don't need to show all of these in our UI. Select the Customer, Address, City, State, PostalCode, and Country columns. Click Next, and then Finish.

When App Builder finishes adding the controls, click View Page again to see the result. The Customers page should look like this:

Customers page 1

Practice time: Create more pages

Our Northwinds application will need more than just two pages to function correctly, so let's create a few more. Before you start, keep the following in mind:

When you're selecting the panel sources, make sure to select the source objects, not the list objects.
When you are asked to select a menu for each page, select the Configuration menu.
Each page should have between five and six controls to still be read comfortably, so pick wisely which columns you think are most essential to be shown in the UI!

Add pages similar to the ones we've just built for the Products and Regions business objects.

Note

You can find another + Page button in the App Workbench home page. It works the same way as the one in the Pages tab.

Popup pages show on top of a base page and can display additional data through their own controls. They're useful because they allow you to show much more than just five or six controls on a given page. They can contain as much data as you want and they can scroll infinitely.

We'll walk you through how to add a popup page to an existing base page using the Customers page.

Go to App Workbench > Pages and click + Page.
Enter the name Customer. This time we'll use a singular name because this page will show only one record.
Click Next.
In Select a Menu, pick None.
In the Select a Layout step, however, select Popup Form. Click Next and then Finish.
When App Builder finishes creating the page, click + Choose Panel Type and select Form, as the popup will only be showing data from a single row. Click Next.
Select Customer (Source) as the Panel Source.
You can let App Builder select the columns automatically, as this popup will be used on top of the Customers page to show all the details of a given customer. Select Auto Build and click Next.
Click Finish.
Now that we've created our popup page, we need to link it to the base page where we want it to be accessible. Return to the Customers page edit screen from the App Workbench Pages tab.
Go to the Update Methods panel.
In the Link To Page field, select Customer, the popup page we've just created.
Click Save.

After a few seconds, App Builder will update. If you click View Page now to see the Customers page, you will see that each row on the list has a button at the end. Click the button and the Customer page will appear in the foreground, containing detailed information about the customer listed in that row.

To practice the creation of popup pages, let's create two more:

Create a popup for the Products business object, showing details about an individual entry in the base page.
Create a popup page called Parameter based on the Parameter (Source) rule. Remember that Parameter is a unique table that only ever stores one record, made up of a primary key and whatever other values you need to store with that parameter. This popup should go in the Configuration menu instead of being accessible from a base page.

Page creation accelerator

App Builder offers a faster way to create simple pages based on source objects, similar to the accelerator that aids in the creation of the objects themselves. Let's see how you can use it to speed up your creation process:

Navigate to the App Workbench > Tables tab and open the Employee table.
In the Table panel, there is a section titled Accelerators. Click the Publish to UI Layer button. App Builder will open a wizard very similar to the one that comes up when you create a page from the Pages page, with the following steps:
1. First, App Builder will ask which menu the new page should be accessible from. Select Configuration and click Next.
2. Next, App Builder will ask about the layout. Select Grid and Form, because two pages will be created following the pattern we've done above manually: Employees and Employee, with the former listing all the records and the latter being a popup that shows details about an individual one. Click Next.
3. Click Create Pages. App Builder will take a few moments to create the pages. Once it finishes, you can find the newly-created pages by going to App Workbench > Pages and visiting their previews.

Now that you know how the accelerator works, use it to create pages for the remaining tables in our data layer: Shippers and Suppliers.

Review and wrap-up

Let's review what we've learned in this lesson. We've gotten familiar with the UI layer of App Builder and started creating our first pages. These pages derive their data from the business objects and the tables that we created in the previous lessons.

In the upcoming lessons, we'll deepen our understanding of the layers and learn how to do several other basic tasks in each of them. Start by advancing to Lesson 5: Controls.