Introduction to Vinyl 3.3: Creating an Application¶

Add an Application¶

The following steps will guide you through how to create an application. This process uses the Create New Application wizard and creates a named database source associated with the app.

1. Regardless of your position in Vinyl, the Action Drawer icon will appear in the top right corner of the page.

2. Select Site Menu from the Action Drawer to navigate to the Site Menu.

3. From the Site Menu, click the + App button.

4. This is the Create New Application wizard where you can create your application. Enter Global Imports for the Name:

   

5. Click Next.

   Note

   This may take several seconds to complete.

Build a Database and Add Records¶

In the Global Imports app we are building, we intend to manually build out the database tables, columns, keys, and any associated relationships required between tables.

By default, Vinyl creates a Parameter table that contains Application and Version columns, as well as the audit lite columns to track AddedOn, AddedBy, ChangedOn, and ChangedBy data. In addition to the table, Vinyl creates a Parameter (Business Object) rule that the default home page uses.

Vinyl contains accelerators in the data storage layer that drastically reduce development time and effort. These accelerators add columns to your table to support auditing and functions, build out business logic, and quickly add pages to your application. We will take advantage of the accelerators as we build out our database.

When building out the business logic from the data storage layer, one of the key concepts to understand is Business Objects. Business objects are objects that are leveraged to build the application UI layer. Depending on their purpose, business objects can be very simple objects, like source and list objects, or very complex depending on the need.

The following steps will guide you through building out the additional tables and associated columns and information our GlobalImports database will need for the Global Imports app.

Create a Category Table¶

Follow the steps below to create the Category table. The diagram illustrates the table along with the columns defined for the table. The primary key column is indicated by PK. The column name and the logical and physical data type are also enumerated in the diagram:

1. Navigate to the Action Drawer.

2. Click Design Center.

3. Click the + Table button.

4. Select Table Builder.

5. Click the Next button.

6. Assign the Table Name as Category.

7. Click the Next button.

8. Click the Add Title button, then Proceed to add the Category title column to the table.

   Note

   By default, Vinyl automatically adds columns to all tables to support audit and the user selectable function. The columns added are IsActive, AddedBy, AddedOn, ChangedBy, and ChangedOn. All columns are visible when opening the table in the data layer.

9. Click the Next button.

10. Confirm and click the Generate Pages button.

11. Select Configuration as the menu to link to the page.

12. Click the Next button.

13. Validate that Grid and Form is selected.

14. Click the Next button.

15. Confirm and click the Create Pages button.

    Note

    Completing this wizard instructs Vinyl to add a Category table to the data storage layer, create business object views for the data in the business logic layer, and build two pages to view the information from the application UI layer. We selected a Grid and Form page type to be used for the data presentation and record input. All information built in this step can be modified as needed.

16. When generated, create the following three records on the Category Form page:

    Category	IsActive
    Dairy	Yes
    Meats	Yes
    Produce	Yes

17. Enter Dairy into the Category field,

18. Click the Save button.

19. Click X to exit out of the Category page.

20. Click the Create button.

21. Enter Meats into the Category field.

22. Click the Save button.

23. Click X to exit out of the Category page.

24. Click the Create button.

25. Enter Produce into the Category field.

26. Click the Save button.

27. Click X to exit out of the Category page.

28. Confirm you now see three data records on the Categories page.

29. Click X to exit out of the Categories page.

Hands-on: Create Tables and Data Records¶

Follow the instructions provided for the Category table and records to build out tables and associated data records for UnitOfMeasure and Supplier. Add Grid and Form pages for these tables to the Configuration menu in the Global Imports. Remember, IsActive, AddedBy, AddedOn, ChangedBy, and ChangedOn are automatically added to your tables.

Data Records to Add¶

Create a Shipper Table from Excel¶

The examples so far have been manually creating tables and associated data records. In this section we step through creating a table using an Excel-generated file. Add the pages to the Configuration menu.

For this example, use the provided Shipper.csv file.

1. Navigate to the Design Center.

2. Click the + Table button.

3. Select Excel Spreadsheet.

4. Click the Next button.

5. Click Browse to select the Shipper.csv file.

6. Click Open to upload the file.

7. Click the Next button.

8. Review the settings on the Create Table From File screen:

   

9. Click the Import button.

10. Click Generate Pages to build pages in the UI layer.

11. Select a menu to link the page to. In this example, select Configuration.

12. Click the Next button.

13. Validate that Grid and Form is selected.

14. Click the Next button.

15. Confirm and click the Create Pages button.

16. Confirm you now see a Shippers page.

Create a Product Table with Foreign Keys¶

Here we build a Product table, which is more complex than the previous tables built. This table contains a foreign key, or a primary key value from a different table, and we'll see how Vinyl supports creating foreign key relationships across tables in the data layer.

1. Navigate to the Design Center.

2. Click the + Table button.

3. Select Table Builder.

4. Click the Next button.

5. Assign the Table Name as Product.

6. Click the Next button.

7. Click the Add Title button, then the Proceed button to add the Product title column to the table.

8. Click the Add Column button.

9. Populate the name CategoryID. If available, select it from the list.

10. Click the checkmark to save.

    Note

    Vinyl ships with preconfigured database and UI templates to help speed up application development. We see examples of database templates when building out tables and columns with commonly used values such as Address, City, State, and Postal Code.

11. Click the Add Column button.

12. Populate the name SupplierID. If available, select it from the list.

13. Click the checkmark to save.

14. Click the Add Column button.

15. Populate the name UnitOfMeasureID. If available, select it from the list.

16. Click the checkmark to save.

17. Click the Add Column button.

18. Populate the name Price. If available, select it from the list.

19. Click the checkmark to save.

20. Click the Next button.

21. Confirm and click Generate Pages button.

22. Select Home as the menu.

23. Click the Next button.

24. Validate that Grid and Form is selected.

25. Click the Next button.

26. Confirm and click Create Pages.

27. When generated, create the following records on the Product Form page:

    Product	Category	Supplier	Price / UOM	IsActive
    Lettuce	Produce	Chatham Organics	2 / EA	Yes
    Milk (Whole)	Dairy	Paiva Dairy	2 / GL	Yes
    Hamburger	Meats	Colorado Meats	5 / LB	Yes

28. Navigate to the Design Center.

29. Click the Tables button.

30. Review the table relationships that are now created on the Database Schema panel.

Hands-on: Create Customer, Order, and OrderDetail¶

Follow the methodology used to create the Product table to build out tables for Customer, Order, and OrderDetail. Add data records for the Customer table. Any time a foreign key is being referenced in a table, be sure to create the associated relationship. Add the Customer and Order tables to the Home page menu and add the OrderDetail to None.

Data Records to Add to Customer¶