Introduction to Vinyl 3.3: Enhancing the Application¶

Vinyl App Development Methodology¶

Building an app in Vinyl moves you through the data, business, and UI layers. Following our iterative Vinyl methodology for app development, we quickly build an app that runs in the UI layer first, and then run it, test it, modify it, test again, and continue to iterate as needed.

Bottom-up Build¶

Until now, we have been developing our app from the bottom layer of Vinyl up. We started out in the data layer and used table accelerators to build out the business layer logic and UI layer pages.

Top-down Modifications¶

Now that we have an app we can run, from this point forward we will switch gears and work in Vinyl from the top down. From here forward we will work in the app UI layer for further changes and modifications.

Create a List Retrieve for the Order Page¶

In this section we will review the Order page and see how we can make it more useful to the user. We will configure a List Retrieve, which allows us to automatically populate specified information on a screen, when it is available from an underlying business object. On our Order page we will leverage this List Retrieve to default information from the data layer about our Customer record.

Order form popup screen:

1. From the app UI Layer home page, click the Orders navigation link.

2. Click the Create button from the Orders panel.

3. Select the Customer as Salem Witch Museum.

   Note

   No information is currently defaulted for the customer’s Address, City, State, Postal Code, Shipper, or Order Date. This is a scenario where we can create a List Retrieve to automatically populate this information from the data layer.

4. Go to the Action Drawer > Live Designer.

5. Select the Customer control from the left side application view.

6. Click the List Options tab from the page design view.

7. Click the Retrievals button from the Panel and List Interactions.

8. Click the Automap Columns button on the Retrievals page.

9. Confirm the Panel Column and (List Source) Column mappings now exist for Address, City, PostalCode, ShipperID, ShippingInstructions, and State.

10. Click X to exit out of the Retrievals screen.

11. Click X to exit out of the page design view.

12. Select the Customer as Salem Witch Museum.

13. Confirm the fields are now populated for Address, City, State, and Postal Code when a Customer record is selected.

14. Click the Save button.

Hands-on: Add Order Records¶

Here we will create Order records, so our Global Imports app has more data populated to work with.

Customize the Order Page¶

If we look at the current Order page, we can imagine it would be useful to have Order Detail information appear on this same screen for the application user. In this next section we will step through a few customization changes so that the Order process in the Global Imports app is more robust.

Add Order Details Panel to the Order Page¶

The Order page with the Order Details panel added:

1. From the app UI Layer, navigate to the Orders page.

2. Click the Create button so you are now on the Order page.

3. Go to the Action Drawer > Live Designer.

4. Click the + Panel button.

5. Select the Grid tile.

6. Click the Next button.

7. Locate the OrderDetail (Business Object) and mark as Selected.

8. Click the Next button.

9. Select Choose Manually, then click Next.

10. Select the following controls in the Select column:

    1. ProductID

    2. UnitOfMeasureID

    3. Price

    4. Quantity

11. Click the Next button.

12. Confirm and click the Finish button.

    Note

    The Order popup displays the two panels by adding tab style navigation to the top left region of the screen. A user would need to click Order Details to see the corresponding information. Let's change the screen size to accommodate both panels to display.

13. At the page design view, under Page Properties, set the Width to Extra Large.

14. Click the Save button.

15. Click the Order Details panel.

16. Under Panel Properties for Order Details, set the Panel Size to Large.

17. Click the Update Methods tab.

18. Select Inline as the Insert Method.

19. Click the Save button.

20. Click X to exit out of the page design view to return to the application view for the Order page, refresh the browser, and confirm you now see the Order and Order Details panels and the Order Details panel has more width allocated to it than the Order panel.

Add Extension and Product Details to Order Details¶

Looking at the Order Details panel on the Order page, it would be useful to have an Extension value added to it that takes the Price value and multiplies it by the Quantity value. In this section we will step through how to accomplish this, by modifying the business rule the panel is using and then adding the new value to display on the panel.

1. From the application Order page, go to Action Drawer > Live Designer.

2. Click to select the Order Details panel.

3. Click the gear icon next to the OrderDetail business object.

4. Rename the business object to OrderDetail (With Product).

5. Click the + Tables button.

6. Click the Add button for Product.

7. Select the checkbox for SupplierID on the Product table.

8. Click the Columns tab.

9. Click the + Column button.

10. In the Column or Expression field, enter O.Price * O.Quantity.

11. Name the alias as Amount.

12. Confirm the logical data type is Currency.

13. Click the Save button.

14. Click the Results button.

15. Confirm you see a column for Amount in the results.

16. Click the back button to return to the rule design view.

17. Click the back button to return to the Order page design view.

18. Click to select the Order Details panel.

19. Click the + Control button.

20. Set the column to Amount.

21. Set the Control Type to Numeric.

22. Click the Next button.

23. Confirm and click the Finish button.

24. Click the + Control button.

25. Set the Column to SupplierID.

26. Set the Control Type to List.

27. Click the Next button.

28. Set the Source to Supplier (List).

    Note

    Due to the primary key and the title being set on the Supplier table, Vinyl knows to default in SupplierID and Supplier as the key and title.

29. Click the Next button.

30. Confirm and click the Finish button.

31. Click the Position & Width tab from the page design view.

32. Set the change position value to 5.

33. Click the Save button.

34. Close the Live Designer and confirm you now see the Order Details panel with the Amount value displayed.

Hands-on: Add Order Details Records¶

Select one of the Order records and add the following Order Detail records to it:

Modify Panel to Use Edit (Excel)¶

In this section we take a look at using Edit (Excel), a panel-level setting that displays the panel such that users can simply click and edit all editable fields in order to make any changes necessary. Changes are saved on exiting out of the field(s). This is different from the standard Edit panel state, which typically presents users with a pencil edit icon and a checkmark icon to save.

The Order Details panel with Excel Edit:

1. From the Order page, go to Action Drawer > Live Designer.

2. Select the Order Details panel.

3. Click the Update Methods tab.

4. Select Excel as the Edit Method.

5. Click the Save button.

6. Close the Live Designer.

Add Category to Product List and Display as Group By¶

In this section we will add the Category value to the Product List control and then display it as Group By. When configured, this will allow the Product dropdown menu to display both the Category value as well as the Products within each Category.

The Order Details panel with Product List modified:

1. From the Order page, go to Action Drawer > Live Designer.

2. Select the Product control from the Order Details panel.

3. Click the List Options tab.

4. Click the gear icon next to Product (List).

5. Click the + Tables button.

6. Locate the Category table and click the Add button.

7. Select Category from the Category table.

8. Click Results and confirm there are no errors.

9. Click the Vinyl back button until you return to the Product List control view.

10. Click the List Options tab in the page design view.

11. Under List Properties (Additional), set Group By (Column) to Category.

12. Click the Save button.

13. Close the Live Designer and confirm the Product control now displays as expected.

Create a List Retrieve for Order Details¶

If we try to create a record for Order Details by selecting a Product, we see that there are no defaults populated for the corresponding Unit of Measure and Price. This is another opportunity to use List Retrieve to display these values to our app users.

1. From the application Order page, go to Action Drawer > Live Designer.

2. Click to select the Product control from the Order Details panel.

3. Click the List Options tab.

4. Click the Retrievals button from Panel and List Interactions.

5. Click the Automap Columns button on the Retrievals page.

6. Confirm the Panel Column and (List Source) Column mappings for Price, SupplierID, and UnitOfMeasureID.

7. Click X to exit out of the Retrievals screen.

8. Close the Live Designer and confirm the updates.

Add an Aggregate¶

Next we will add an Aggregate Function to sum the Amount column on the Order Details panel.

The Order page with an aggregate added to the Order Details panel:

1. From the application Order page, go to the Action Drawer > Live Designer.

2. Click to select the Amount control from the Order Details panel.

3. Select Sum as the Aggregate Function.

4. Click the Save button.

5. Close the Live Designer and confirm you now see an aggregate displayed that sums the Amount values.