Introduction to App Builder - Lesson 5: Controls

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

List controls

When we learned about business objects, or rules, back in Lesson 3, we discussed two types: source objects and list objects. To briefly recap, we learned that source objects are meant to show the contents of a given table in the data layer. List objects, on the other hand, are used to create dropdown menus in our applications. Now that we've created several pages, let's use the list objects we have to add menus to them.

1. In App Workbench > Pages, find Product, one of the popup pages we created in the previous lesson. Click the pen icon to edit it.

2. In the Page Panel Layout panel, click Controls.

3. Here, you can see a list of all the controls that are currently shown in this popup. When we let App Builder automatically choose the business object columns it would use for this page, it chose all the columns except those created by audit lite and those in the UUID format, which isn't human-legible. We'll add another control. Click + Control. The Add a Control dialog appears:

   

4. In the Column menu, select SupplierID. A new field, Name, automatically appears underneath it, already containing the name Supplier. The Control Type field automatically selects List.

5. Click Next.

6. In the following step of the wizard, use the Source menu to select Supplier (List), the list object we've previously created. If the Usage Type fields of the list object have been correctly selected, the following two fields will be automatically populated and you can skip Steps 7 and 8.

7. Use the Key (Column) menu to select Supplier ID (PK).

8. Use the Title (Column) menu to select Supplier.

9. Click Next, then Finish.

10. Navigate to the Products page and click View Page. Pick any of the entries in the list and click the button at the end of the row. Note that the Product popup page now has a new Supplier field. If you click the Edit button, you'll see that it's a dropdown.

Practice time: Add another list control

Repeat the same process we've done above to add a Category list to the Product page. Our Northwinds application will need both of these lists.

Add relationships between tables

In Lesson 2, we created a table called Region. However, it's currently isolated, meaning it doesn't connect to any of our other tables, so we can't use the information it contains. Let's fix that by creating a relationship between it and the Employee table. That way, we'll be able to keep track of where each employee works.

First, we need to add a new column to the Employee table.

1. In App Workbench > Tables, find the Employee table and open it.

2. Click + Column.

3. Give the new column the name RegionID. In the Data Types panel, make sure the Logical menu has Unique ID selected and the Physical menu will automatically default to UUID.

4. Click Save.

5. As a good practice, click Results to double-check that the RegionID column has been added.

6. The new RegionID column now appears in the list. App Builder has identified it as a foreign key based on data schema analysis, and it's a good practice to enforce this constraint by clicking the + symbol that appears in the FK column. A confirmation message will appear. Click Proceed.

The next step is to make sure that the new column also gets added to the rule we built based on this table.

1. In App Workbench > Rules, find the Employee (Source) rule and open it.

2. In the Tables panel, you'll see the list of columns from the Employee table used by the rule. Find the RegionID column you've recently created and select its checkbox to include it.

Now, we can add a list control to the Employee popup page in order to indicate where each employee works.

1. In App Workbench > Pages, find the Employee page and open it.

2. In the Page Panel Layout panel, click Controls.

3. Click + Control.

4. In the Column menu, select RegionID and click Next.

5. In Source, select Region (List). The Key (Column) selection should be RegionID (PK) and the Title (Column) should be Region.

6. Click Next, and then Finish.

7. When App Builder finishes creating the new control, you will be returned to the list of controls. Alter the Order column to make the new control be shown before the employee's location information:

   

8. To start using the new control, navigate to the Employees page, click View Page and open the details of any employee. Make sure the Region field is showing where you expect it to be. The fields should be empty, so go through several employees and assign them a region, picking East Coast Region for some and West Coast Region for others. This will be important when we move to advanced topics further ahead.

HTML controls

If you navigate to the Employees page again and click the button to see details about the employee called Laura Callahan, notice that the Notes field is displaying raw HTML text. Let's go over the steps to make HTML be displayed properly.

1. Navigate to the Employees page and click View Page.

2. Click the button that displays details about an employee and wait for the Employee popup to appear.

3. Click the hamburger icon on the top right of the page to open the action drawer and click Live Designer.

4. When the live designer side menu opens, click the Notes field to highlight it. Doing so will make the live designer show edit options for that field.

5. In the Control Properties tab, the Control Type menu currently shows Text. This means that App Builder is simply displaying what's in the column without any changes. Select HTML instead. This will make App Builder treat the content correctly, interpreting the HTML code.

6. Click Save. The Notes field now shows styled and formatted text:

   

Create, Update and Delete controls

Panels in App Builder give the option to create, update, or delete records. However, you don't always want to give users all these options. Other times, there are space contraints and you want to remove some of the options because their icons are taking up room in your application's screens. Let's learn how to make changes to these features.

Edit the create and update options

App Builder allows you to change the way the create and update icons work, specifically what areas become available for editing upon clicking one of the icons. Let's learn how by modifying how the options work in our Customers page.

1. Navigate to the Customers page and click View Page to preview it.

2. Click the hamburger icon on the top right of the page to open the action drawer and click Live Designer.

3. Click the Customers panel to make the live designer show edit options for it.

4. In the Update Methods tab, change both the Edit Method and Insert Method options to Link To Page. This means that when a user tries to edit an entry or add a new one, they will be linked to a page of your choosing, rather than the inline edit UI that's shown by default. Pick the Customer popup page that we've already created:

   

5. Click Save. Once App Builder saves, exit out of the live designer and test your changes. Try clicking Create or the edit icon and check that the Customer popup page is shown.

Practice time: Edit the create and update options for other pages

Repeat the process we've done above in the Customers page for the Employees, Suppliers, Shippers and Products page, using their respective popup pages.

Disable delete and create on a page

Let's disable the delete and create functions on the Parameter page, which you created at the end of Lesson 4. This is a good example to use because the parameters that govern the whole application should never be deleted nor should there ever be more than one set.

1. Navigate to the Parameter page and click View Page to preview it.

2. Click the hamburger icon on the top right of the page to open the action drawer and click Live Designer.

3. Click the Parameter panel to make the live designer show edit options for it.

4. In the Update Methods tab, find the Insert Method option. Select No, as we don't want new sets of parameters being added.

5. In the same tab, find the Delete Supported option. If Yes is highlighted, a Delete button will be visible in the popup. Click No to make sure the button isn't shown.

   

6. When App Builder saves the changes, note that the Delete button disappears.

Use a currency control

Take a look at the Products page. The Unit Price column is displaying values like raw numbers, but they're meant to be monetary figures. We'll edit that control to make it format the values the way we expect. There are several ways to do that, but we'll do it from the business layer.

1. In App Workbench > Rules, find the Product (Source) rule, since that's the basis of the Products page, and click to edit it.

2. In the Columns tab, locate the row that targets the UnitPrice column and click the edit icon.

3. In the Cast Options section, use the Logical Data Type field to select Currency. Click Save:

   

   Note

   You can also edit the field without the popup, by either clicking the pencil icon or clicking the field under Logical directly inline.

4. Return to the preview of the Products page. The prices should be displaying correctly now.

Review and wrap-up

In this lesson, we've learned about several different types of controls. We've worked with list, file, HTML, create, update, delete, and currency controls. We also created relationships between tables. We'll keep exploring App Builder features to make our application better in the next lessons. Move on to Lesson 6: Binding.