Developer Training:

Vinyl Introduction Training Manual

1
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Table of Contents
Introduction ................................................................................................................................................................................................... 5
What is Vinyl?........................................................................................................................................................................................... 5
Course Objective ................................................................................................................................................................................... 5
Vinyl Layers ..................................................................................................................................................................................................... 5
Data Storage Layer ......................................................................................................................................................................... 5
Business Logic Layer ..................................................................................................................................................................... 5
UI Layer ................................................................................................................................................................................................... 5
Creating an Application ........................................................................................................................................................................ 6
Basic Vinyl Navigation ............................................................................................................................................................................ 7
Data Storage Layer .................................................................................................................................................................................... 7
Northwind Data Structure ............................................................................................................................................................. 8
Creating a Table .................................................................................................................................................................................... 8
Table Review ........................................................................................................................................................................................... 11
Business Logic Layer ............................................................................................................................................................................... 11
What is Business Logic? .................................................................................................................................................................. 11
Creating a Source Object for Tables ..................................................................................................................................... 12
Shortcut to Creating a Source Object............................................................................................................................ 14
Chapter Exercise: Create Source Objects ......................................................................................................................... 14
Creating a List Object ...................................................................................................................................................................... 15
Shortcut to Creating a List Object .................................................................................................................................... 16
Chapter Exercise: Create List Objects .................................................................................................................................. 17
The Concat Function........................................................................................................................................................................ 17
Audit Lite Tracking Information .............................................................................................................................................. 18
To Enable Audit Lite .................................................................................................................................................................... 18
Chapter Exercise: Enable Audit Lite on all Tables ...................................................................................................... 19
UI Layer ............................................................................................................................................................................................................ 19
Panel Types ............................................................................................................................................................................................20
Create a Page .......................................................................................................................................................................................20
Add a Customers Page .................................................................................................................................................................. 22
Chapter Exercise: Create Additional Pages .................................................................................................................... 23
Pop-up Pages ....................................................................................................................................................................................... 23
Add a Pop-up to the Customers Page.......................................................................................................................... 23
Chapter Exercise: Create Additional Pop-up Pages ................................................................................................ 25
Changing a Primary Key Control to a List Object ...................................................................................................... 25
2
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Chapter Exercise: Make Category ID a List Object .................................................................................................... 26

Add a Column and Relationship to a Table .................................................................................................................. 26
Add a Region ID Column to the Employee Table................................................................................................ 28
Update the Employee (Source) Business Object .................................................................................................. 28
Add Region List Control to the Employee Page ................................................................................................... 29
Convert a File Control to a Photo...........................................................................................................................................30
Convert a Control to HTML .......................................................................................................................................................... 31
Chapter Exercise: Make a Param Pop-up Page............................................................................................................ 31
Create, Update and Delete ......................................................................................................................................................... 32
Disable Delete on a Page ....................................................................................................................................................... 32
Edit the Create and Update Links.................................................................................................................................... 33
Chapter Exercise: Create and Update Behavior ......................................................................................................... 33
Update a Control to Currency .................................................................................................................................................. 33
Add Panels and Binding .............................................................................................................................................................. 33
Add a Panel Binding .................................................................................................................................................................. 35
Add an Order Page ..................................................................................................................................................................... 35
Chapter Exercise: Rework Order Page Control Order ............................................................................................ 36
Add an Order Details Panel to a Page .......................................................................................................................... 36
Link to a Page from a Panel.................................................................................................................................................. 36
Add in Line Totals......................................................................................................................................................................... 37
Update Line Totals with an Event .................................................................................................................................... 39
Create a Line Total Sum .......................................................................................................................................................... 39
Change Discount to Display as Percentage ...................................................................................................................40
Change a Field to Read Only ................................................................................................................................................ 41
Default Rules.......................................................................................................................................................................................... 41
Joins.............................................................................................................................................................................................................. 41
Create a Default Rule ..................................................................................................................................................................... 42
Add a Default Rule to a Page .............................................................................................................................................. 43
List Retrieve............................................................................................................................................................................................ 44
Validation Rules.................................................................................................................................................................................. 44
Create a Validation Rule ......................................................................................................................................................... 45
Add a Validation Rule to a Page ....................................................................................................................................... 46
Application Level Parameters .................................................................................................................................................. 46
Edit the Validation Rule to use the Param Value ................................................................................................. 47
Editing Navigation Menus ................................................................................................................................................................ 47

3
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Create a Nested Menu Item ...................................................................................................................................................... 48

Chapter Exercise: Edit the Navigation Menu ................................................................................................................ 48
Change the Linked To Page for your Application ..................................................................................................... 49
CRUD Rules ................................................................................................................................................................................................. 49
Create an Upper CRUD Rule ..................................................................................................................................................... 49
Attach the Upper CRUD Rule to an Event................................................................................................................ 50
Add the Event to the Employee (Source) Object .................................................................................................. 51
Add the CRUD Rule to a Button ....................................................................................................................................... 53
Chapter Exercise: Create a Lower Function CRUD Rule ....................................................................................... 53
Vinyl Beyond the Class .................................................................................................................................................................. 53

4
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Introduction

What is Vinyl?
Vinyl is the first No-Code Enterprise Application Development Platform. Vinyl allows you to
create beautiful yet powerful applications and charts from multiple data sources, including
complex analytics all together on the same screen without writing a single line of code. Vinyl is
database agnostic, meaning it can work with any database type, and a key benefit of using
Vinyl is that the application turnaround time is a few weeks vs. a few years.

Course Objective
This course covers the basic skills needed to develop in Vinyl, as well as the methodology used
at Zudy to develop applications. In this course we will build out a simple order fulfillment Vinyl
application using the Northwind database as the data source. We will walk through the flow of
data from the Data Storage Layer in Vinyl to the UI Layer in Vinyl, so you can see how data can
become an application.

Vinyl Layers

These are the three layers of Vinyl: Data Storage L ayer, Business Logic Layer and the UI Layer.
Blue, Red, and Green are used to visuall y identif y the 3 different layers of V inyl.

Data Storage Layer

Contains all the tables where the physical data is stored.

Business Logic Layer

Used to expose your data as well as allow you to manipulate and filter data from the tables in
the Data Storage Layer.

UI Layer
Where you build the actual application and customize the user interface.

5
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Creating an Application
1) Regardless of your position in Vinyl, the Action Drawer icon will appear in the top right
corner of the page. Clicking on the icon will open a menu which can be used to navigate Vinyl.

The Action Drawer Navig ation Menu

2) Select Vinyl (IDE) to enter Vinyl’s Integrated Development Environment (IDE) where you can
reach all layers of Vinyl.

3) Once inside the Vinyl IDE, click the Build your application button under the Build menu.

4) Inside the Application Layer, click Create in the top left corner to add an application. There
will be many steps in the course where we click Create to build out the many different
components of the app.

5) Clicking Create brings you to a new page where you can create your application. Simply fill
out a name and click Save. Your application now needs a data source provided to work with.

The App Panel where you create a n ew App

6
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

6) Our application currently has no data. To add a Data Source to our app, go ahead and click
Create in the Data Sources panel. Here you will select the data source to connect to the app
from a list. In this example, we will select Northwinds because our Northwinds application
requires data from the Northwinds data source.

Basic Vinyl Navigation

 The back arrow and title to the top left display the previous page you were on and return to
it.
 The Title to the right of the back button shows the current page.
 The Create button under on any panel allows you to add content to it.
 The Chevron icon leads to a new page, and the popup icon leads to a new page in a
popup window.

Data Storage Layer

Vinyl is organized into three layers; one of them is the Data Storage Layer, where all the data for
your application is stored in the form of Tables. Tables are formatted just like an Excel
spreadsheet in that they contain rows that represent records and columns of data.

In this manual we use an example company called Northwinds and create a functional order
fulfillment application. Data for our Northwinds company is stored in the Northwinds
Database. The app we build with the Northwind database will be used to organize customers,
employees, orders, and such. We will explain the basic structure of a Vinyl application over
these next few chapters. We will do so by showing the flow of data from the Data Storage
Layer to the Application Layer, so you can see how data can become an application. This
application will barely have more initial functionality than an Excel spreadsheet, but we will
improve it as the manual continues.

7
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Northwind Data Structure

Here are the data tables and corresponding columns which have been included in the
application. The first column is the Primary Key (abbreviated as PK):

The Tables and Primar y Key’s (PK’s) in the Northwinds Training Applicat ion

Creating a Table
To start, we are going to create a simple table for the application named Region, and then
manually create two records to store in this new Table. The new records we create will allow us
to differentiate the West Coast Market and East Coast Market.

8
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

1.) Regardless of your position in Vinyl, the Action Drawer icon , will appear in the top right
of the page. Click the Action Drawer to open the Action Drawer menu, and then select Vinyl
(IDE) to enter Vinyl’s Integrated Development Environment.

2.) Once inside the Vinyl IDE, click the Build your Application button in the Build menu, and
then the Data Storage Layer link on the resultant screen.

Data Storage Layer Link

3.) Locate the database source you are working with (e.g., Northwinds) and click the Table gear

icon .

4.) Click the Create button to create a new Table. This will display a panel where you
can fill out basic information about your Table such as the Table Name. For our table, we will
name it Region and then click Save. Vinyl naming convention for Tables is always singular.

5.) Once your table is created we need to add columns to it, so we can populate it with data.
Click the Create button in the Columns panel. This will open a popup for the Column panel.

The first column to add is the first column we add to every table: the Primary Key (PK). A
Primary Key is important for every table because it is a unique identifier which ties the data
from different columns together in each record. The Region table could have different records
with the same information (e.g., same Region), so while a user on an application may identify a
Region by name, Vinyl requires an ID to uniquely identify it. Name the column RegionID
because this is the ID for the Region table.

Next review the Data Types section. For the Logical data type select Unique ID, and for the
Physical data type select UUID. The Physical data type value for a column refers to the type of
data being stored. A UUID data type automatically generates a unique 128 bit string of
characters. For example: aab52ad5-a946-44ac-91a3-0af17aab1986

You will also notice that there is a PK Settings area towards the bottom of the page. Since we
are adding the first column of a table they are defaulted to the correct settings, with
checkboxes indicating this column is considered the Primary Key. The Auto Gen field indicates
the column will be automatically generated whenever a new record is added, and the Allow
Nulls setting indicates whether null values are allowed for this column or not. With these
settings in place, the Primary Key column is complete. Click Save to add the Column to the
Table.

9
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

The Column panel is where you add new Columns to a Table

6.) Next, we will add a column that stores information about the Region name. Click Create to
add another Column, and name the column Region. Assign the Logical data type of String and
Physical data type of NVarchar. Click the Save button. A String data type will store any
combination of characters. This column is designed to capture and store Region name
information.

When you are finished, your Columns panel on the Table Definition page should look like the
screenshot below:

7.) Once the columns have all been added, your table structure is created but does not contain
any actual data records yet. We added the Primary Key which will differentiate our records, the
Region column which will hold descriptive information, but we haven’t yet added any records.

10
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

To add a record to your Table, click the Results button in the Table panel. This will open the
Dynamic page where you can add a record by clicking the Create button, filling in Region
information, then click the checkmark to save. Here you do not fill in RegionID because Vinyl
will auto generate this information. Add in the Region records you see below:

The Dynamic pag e for the Region T able

Table Review
Now that we have created the Region table, let’s review what we’ve done so far. We had an
empty application named Northwinds, with an empty data source named Northwinds. We
went into that data source and added a table called Region to store data on the Regions that
work with Northwinds. After the table was made, we added a Primary Key column, and a
Region column. We added the Primary Key because it is the unique identifier that will separate
each record of the Table, and we added the Region column so we could store names of the
different Region areas we want to work with. Finally, once our table and columns were set up,
we entered two data records into it (West Coast Region and East Coast Region).

Business Logic Layer

What is Business Logic?

Previously, we created the Region Table. As explained, Tables function just like spreadsheets in
Excel in that they hold rows and columns of data… but that’s all they do, hold data. After we
have the data to work with for our application in the Data Storage Layer, the next step is to
build out our Business Logic in the Business Logic Layer.

The Business Logic layer of Vinyl allows you to:

 Define business rules and objects

 Create custom jobs, which can fire events on a scheduled basis
 Create security roles to gate users within your application

Business Objects (also known as Rules) are used every time you want to modify or display data
to the user in the application. Simplistically Business Objects let you look at data in your
application. The first, most basic Rule we are going to cover is creating Source Objects. While
all the other Rules are used in some way to modify data for the user, the Business Object is the
only rule that can take data from a table and bring it to the Application layer for the user to see
and interact with it.
11
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Creating a Source Object for Tables

Source Objects in Vinyl represent a type of Business Object that shows data in an application,
and specifically it shows one Table with no filters. Source tables are part of Vinyl methodology
and used for many purposes when bringing data from the Data Storage Layer over and into the
Application Layer. We create Source objects in the Business Logic Layer.

1. Click the Action Drawer icon and then select Vinyl (IDE).
2. Click on the Build your Application button in the Build menu.
3. Click the Business Logic Layer link.

Business Logic Layer Link

4. Next locate your Northwinds Data Source, and click on the BOBJ icon for your Data
Source
5. Tables from your Data Storage Layer appear on the left side of the page, and Rules from
your Business Logic Layer appear on the right-hand side. Currently, the right-hand side is
empty because we haven’t built any Rules yet.
6. Click the Create button in the Rules panel to the right of your screen to create a new
Business Object
7. The page you are brought to is the Business SQL page, where you can create rules. Here we
will create a Source Object for our newly created Region table. The purpose of this object
will be to expose data from our Region table to the application layer.

Give the new Business Object we’re creating the Name Region (Source), and select the
Purpose as Business Object. The Name we assigned for this Business Object follows Zudy
standard naming conventions for rules, which is Table (Purpose/Details). The Target for this
Business Object will be Region, because although a business object may include data from
many different tables it can only modify the data of one table at a time.

12
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

The Business SQL page

8. Click the Save button

9. Click the SQL icon to enter the components of your rule, where you can develop its
functionality
10. The first step to designing any rule is to add Tables to it in the Tables panel. The Tables
added here determine what data the rule can work with (as opposed to the Target of the
rule chosen when creating it, which decides what table can be modified with the rule). For
now, the only table we need is the Region table, because the purpose of this rule is to show
data from the Region table. Verify that the Region table is visible in the Tables panel. If it
isn’t, click the Create button and select it from the resultant list.
11. Next, we add the Columns that we want to display in the Columns panel. This is because
rules do not automatically show all the data from each table they contain as some tables
could potentially have hundreds of columns. For this Source business object for the Region
table, we want to display both Columns.

To add a column, click Create in the Columns panel. The first column we add will be the
RegionID Column, with a target of RegionID. When adding a column, the Column or
Expression part of it denotes what column of data from a table is supplying data, and the
Target decides what column can have data modified by this column. In this example, data
is coming from the Region table RegionID column and going to the Region table RegionID
column. Click the checkmark button to save the Column added.

To add another column, click the Create button again in the Columns panel. This time
select the Region Column and Target the Region column. When you are finished your
Columns panel should look like this:

13
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

The Columns panel of the Business SQL screen

12. Once the columns are added and the rule is complete, and you can click the Results
button to view the objects results on the Dynamic page. You should see a total of two
Region records, one for East Coast and one for West Coast. Just like on the Data Storage
Layer, you may add records here by clicking the Create button.

Always clicking Results after creating any Rule is part of the Vinyl methodology. Whenever
you have an opportunity to check Results in the app you’re working on, you should do so.

Shortcut to Creating a Source Object

The steps outlined in the previous section walk you through manually creating a Source Object
for a Table. Vinyl provides a shortcut method to allow you to quickly create a Source Object for
a table and assign it all Columns. In this section we will step through the shortcut method to
creating Source Objects.

1. Click on the Action Drawer icon and select Vinyl (IDE) from the menu
2. Select Build your application from the Build menu
3. Click on the Business Logic Layer
4. Locate the data source you want to work with, and click on the corresponding BOBJ icon
5. Click the Table cog icon for the Table you wish to create the Source Object for
6. Click the Source button in the Actions area

7. When Vinyl finishes creating the Source Object, you will see the message “Source object
has been created”
8. Click on the Results button to check your results. This is best practice to always check.

Chapter Exercise: Create Source Objects

Using either the manual method or the shortcut method, go through the remaining
Northwinds Tables and create Source Objects for all tables in the data source.

Be sure to always check Results after creating any Source Object (or Rule for that matter).
Checking Results will allow you to quickly see if the results are what you are expecting, or if
there are any errors or unforeseen issues. If you do not check results on your Source Object (or
Rule) you will see a red “X” appear next to the Source Object or Rule. Checking the Results
turns the red “X” into a green checkmark icon.

14
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Creating a List Object

A List Object is used to create drop down menus in Vinyl. An example of a List Object outside
of Vinyl can be found looking at the Amazon site home page when you click to filter the
Departments to search. When building List Objects in Vinyl, they only need two columns; a
Primary Key (PK) and the Title. The Primary Key is a unique identifier for each record (usually an
ID), and the Title is the field that you’d like to show in the list (such as a product description).
Because List Objects in Vinyl only have two columns they provide faster query performance. To
make a List Object, you’ll first create a Business Object and use the established naming
convention of [Table Name (List)]. Following the standard Vinyl naming convention for List
Objects will help you organize your data as your data continues to grow in an application.

1.) To create a List Object, go to the Business Logic page and then click to select the Category
table and Create under the Rules panel. The Name will be Category (List), the Purpose is
Business Object, and the Target is the Category table.

The Category (List) List Object. Resu lts have not been checked yet , so Status displays a red ‘x’.

2.) Enter the components of the object by clicking the SQL gear icon, where we add the tables
we need to pull data from. This is a list object for the Category table, so we only need to
add the Category table.
3.) Next, we add the columns we will need. A list object is used to create a drop-down menu
populated by the records of a Table in Vinyl. It uses the Primary Key of the table to
differentiate between the different records, and instead of the key value it displays the
contents of the Title column in the table.

For our example, we will be making a Category table list, so instead of seeing a CategoryID,
you will see the name of the Category. To do this, we need to add two columns: the
CategoryID which Targets CategoryID and the Category column, which Targets Category.
Once these are added, and you’ve checked your Results, your List Object is ready to go.

15
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

The Columns panel for Category (List)

Shortcut to Creating a List Object

The steps outlined in the previous section walk you through manually creating a List Object for
a Table. Vinyl provides a shortcut method to allow you to quickly create a List Object for a
table. In this section we will step through the shortcut method to creating List Objects.

To generate a list object, the table you would like to generate it for must have a column with a
Usage of ‘Title’ selected (a usage tells the table what the column will be used for). To generate
this business object, go to the Table Definition page of your table and click the List button on
the bottom.

1. Click on the Action Drawer icon and select Vinyl (IDE) from the menu
2. Select Build your application from the Build menu
3. Click on the Business Logic Layer
4. Locate the data source you want to work with, and click on the corresponding BOBJ icon
5. Click the Table cog icon for the Table you wish to create the List Object for
6. Review the existing Columns and determine which one should be set as Title. Setting a
Column as Title means it is what will be used for the Table List Business Object drop down
menu items. Expand the Column to set as Title, click the Edit button and set the Usage
value to be Title. Click Save.
7. Click the List button in the Actions area

8. When Vinyl finishes creating the List Object, you will see the message “List object has been
created”.
9. Click on the Results button to check your results. This is best practice to always check.

16
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Chapter Exercise: Create List Objects

Either using the manual method described, or the shortcut method, go through the
Northwinds tables listed below and build out a List Object for each. Be sure to include the
Primary Key as well as the Title field, which is the field you’d expect to appear on the actual list
menu that will ultimately be visible from the application.

 Category
 Customer
 Order
 Product
 Reach
 Region
 Shipper
 Supplier

The Concat Function

Sometimes you may want to combine more than one Column of data into one. For example,
go to the Business Logic screen and select the Employee table, click on Results and you will
see that there isn’t an obvious Column you’d want to use as Title to create a List Object. The
Employee table has a LastName column, and a FirstName column, but we would want to use
something like FullName as a Title column to create a List Object for this table.

To combine two Columns into one you can use the Concatenation function (or Concat
function) in Vinyl. A Concat function uses the pipe symbols || to indicate that values (columns,
numbers, strings, etc.) on either side are separate. The single quote character is used in
between the double pipe symbols to add a space character to make the resultant information
legible. Note that a concatenated field cannot be edited at the application page layer.

In this example, the Concat function we will implement will merge the first and last name of
our Employee data into one column or field which can then be used by the application as a list
object. To accomplish this we’ll create a new Business Object rule on the Employee table.

1. Click on the Action Drawer icon and select Vinyl (IDE) from the menu
2. Select Build your application from the Build menu
3. Click on the Business Logic Layer
4. Locate the data source you want to work with, and click on the corresponding BOBJ icon
5. Select the Employee table from the Tables panel, then click on Create under Rules
6. Select the Purpose as Business Object
7. Set the Target as Employee
8. Assign the Name as Employee (Full Name List)
9. Click the Save button
10. Click the SQL icon, and click on the PK button to bring in the Primary Key value for the
Employee table, then Proceed
11. Click Create under Columns and add in the Concat function expression “E.FirstName||’
‘||E.LastName
12. Provide the Alias as FullName. No Target is required.

17
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

The Employee (Ful l Name List) Business Object SQL Definit ion

13. Click the Check icon to save the record

14. Click the Results button to check your results, and make sure you now see the FullName
appear as expected

Audit Lite Tracking Information

Zudy considers it best practice to always add Audit information to tables in your Vinyl app.
Vinyl allows you to quickly add auditing to tables, which in turn starts tracking audit
information from that point in time forward. This feature in Vinyl is called Audit Lite, and the
specific information you’ll be able to track when it is enabled is as follows:

 AddedBy - The username of the person who added the record.

 AddedOn - The date the record was added
 ChangedBy - The username of the person who last modified the record.
 ChangedOn - The date the record was modified

Users who have permission to read data from a table that contains Audit Information will have
permission to view Audit Data.

To Enable Audit Lite

In the order fulfillment app we’re building, we will enable Audit Lite on all tables except for the
Param table. This will allow us to track the audit information for changes made to records
contained in our tables. In the first example, we’ll add Audit information to the Category table.

1. Click on the Action Drawer icon and select Vinyl (IDE) from the menu
2. Select Build your application from the Build menu
3. Click on the Business Logic Layer
4. Locate the data source you want to work with, and click on the corresponding BOBJ icon
5. Click the Table cog icon for the Category table
6. Under Actions, click the Audit button

7. When Vinyl has finished adding Audit Lite information to the table, you will see the new
audit fields appear in the Columns panel

18
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Audit Lite has been enabl ed for the Category table

Chapter Exercise: Enable Audit Lite on all Tables

Using the method described, go through the Northwinds tables listed below and enable Audit
Lite for each table. The only table we will not add Audit Lite to is the Param table.

 Customer
 Employee
 Order
 OrderDetail
 Product
 Reach
 Region
 Shipper
 Supplier
 User

UI Layer
The UI Layer is where the developer can create and design the UI/UX for the application,
including Pages that users will use to navigate the Vinyl application. In the previous chapters,
we created a table in the Data Storage layer called Region, filled it with data, and then created
a Business Object in the Business Logic Layer to expose this data to the UI layer. Now that the
data is prepared, the last step needed to create an application out of it is creating a page on
the UI layer.

Pages in Vinyl have three components: Page, Panel, and Control. The Page is just a shell with
no data that contains a single Panel or multiple Panels. A Panel sits on top of the page and
contains data which it derives from the business object(s) you direct it to. A Control lets you
identify what specific component of data from that data source you want to display or look at.

19
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Panel Types
Panels in Vinyl can be defined as either a Single-row Panel (SRP) or a Multi-row Panel (MRP).
There are other Panel types in Vinyl, but we will not work with those in this course.

 Single-row Panel - only shows information for one record at a time. In some instances, you
might use a Pop-up page with a Single-row Panel in order to show more granular data
than a page with a Multi-row Panel can display.
 Multi-row Panel – shows information for multiple records

Create a Page
Let’s proceed to add in a Page to our application that will display all the Category records in
our order fulfillment app.

1. Click on the Action Drawer icon and select Vinyl (IDE) from the menu
2. Select Build your application from the Build menu
3. Click on the UI Layer button
4. This will bring you to the Applications page, where you can see all the Applications in your
instance of Vinyl.
5. Identify your app, and click on the Pages icon for your application
6. This brings you to the Pages panel where all Pages for the app appear. We haven’t created
any Pages yet, so none will appear at this stage. Click the Create button.
7. Assign the page Name as Categories. This page will show multiple records for Categories,
so we name it as a plural value.
8. Click Save
9. Click Create under Panels
10. Since we are looking to display multiple records of data on this Panel, select Multi-row
Panel (or MRP)
11. The Source Rule is where you select what Business Object you want to use to retrieve data
from, in this case we will select Category (Source). We want the Source object, not the List
object, as we’ll want to add many Controls to the page.
12. Leave the Name as Categories
20
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

13. Click Save

Creating a Categor ies Mu lti-row Panel Page in VIn yl

14. Click Create under the Controls panel. In general, you typically will not want to add a
Primary Key as a Control to a Page to display. The Primary Key fields in our data source are
usually identified by having “ID” appear in the Column Name. For example, CategoryID is a
Primary Key which we would likely not want to display on a Page.
15. For the Column value, select Category

Adding a Category Control

16. Vinyl sets some default information based on our selection, for this Control we will leave
the defaults and click Save
17. Click the Create + button to add another Control
18. For the Column value, select Description
19. Leave the defaults set and click Save
20. Click the x icon to close out the Control designer window, and then click Run to preview
your Categories page. Note there is now a Categories Menu item in the top-right corner,

21
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

automatically created by adding this new page to the app. We’ll look at modifying a
navigation Menu later.

The Categories page alo n g with the Categories Menu item

Add a Customers Page

Now that we have a Categories page, we can add a new Page to our app from the Action
Drawer menu. In this exercise we will add a new page for Customers, this page will show us
multiple records for all Customer records in our Northwinds data source.

1. Click on the Action Drawer icon

2. Select Add a Page from the menu
3. Assign the Name as Customers (we intend to display multiple Customer records). Note
that camel casing used for the Panel name (as well as Table names), this follows Zudy
naming conventions.
4. Click Save
5. Click Create under the Panels panel, and select Multi-row Panel
6. For Source Rule, select Customer (Source)
7. Leave the default Name as Customers
8. Click Save
9. Click Create under the Controls panel
10. The Customers page will have a lot of Controls appearing on it when we’re finished adding
them. You need to think about what order you want your Controls to appear in, when
adding them to a Page. They will appear from left to right on the Page based on the order
you added them, and/or the Position value assigned. Position gets automatically assigned
in increments of 10, and this value can be overridden manually as needed. Vinyl can
typically fit around 5-6 columns side by side comfortably on a Page.

For Column select Customer

11. Click Save
12. Next, we will add in some contact and address information, be sure to group this
information logically. Click the Create + button

22
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

13. Follow the steps described previously and add in the following Controls:
a. ContactLastName
b. ContactEmail
c. City
d. State
14. Click the Run button to preview your page

Chapter Exercise: Create Additional Pages

Add in Multi-Row panel Pages to the order fulfillment app for the tables listed below in your
Northwinds data source. Each new Page should have between 5-6 Controls added to it. Be
sure to select the Table (Source) Business Object vs. the (List) Business Object for this exercise.

 Employees
 Shippers
 Suppliers
 Products
 Regions

Pop-up Pages
Pop-up pages are used in Vinyl when you want to open a new window on an existing page and
then use this window to display additional data through Controls. Pop-up pages are useful
when you want to display much more than 5-6 Controls on a Page. Pop-up pages are created
as Single Row Panels (SRP), and can contain as much data as you add, as they can infinitely
scroll vertically.

Add a Pop-up to the Customers Page

In this first example working with Pop-up Pages, we will add one to the existing Customers
page.

1. Navigate to the Customers page in the app by clicking on it from the main navigation
menu
2. Click on the Action Drawer icon
3. Select Add a page from the menu
4. Assign the Name as Customer. Remember our Pop-up Page is going to be a Single-row
Panel and will therefore only be showing data for one (singular) Customer record.
5. Scroll down in the Page panel and place a check under Pop. Doing this indicates to Vinyl
this new Page will be a Pop-up.

A check has been placed under Pop to indicate it will be a Pop-up Page

6. Click Save
7. Click Create under Panels
8. Since we will only be looking at one single record in this Page, set the Type to Single-row
Panel
9. For Source Rule, select Customer (Source)
10. Leave the Name as Customer and click Save

23
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

11. Click Create under Controls. On this page we will add in all Controls, since we are not
constrained by horizontal space on a Pop-up page. Pop up pages can grow exponentially
vertically. On a non-Pop-up page you ideally want to limit Controls to 5-6 in total.
12. We will want to logically group together similar data in the Controls we are adding. As a
first step we’ll add in Controls for all the Column options available, except for the
CustomerID (do not add this Column).
13. Click Run when finished adding in the Controls and check that the results are as expected
14. As a second step, we’ll look at reorganizing the Controls into more logical groupings.
Position is the value for Controls which determines order of appearance. In an SRP, the
lowest Position value shows up at the top of the Page, and the highest Position shows up at
the bottom of the Page. Position value gets auto-incremented in 10’s to make adjusting this
value easier.

If we wanted to order the Controls so that Customer comes first, then Contact, then
Location we would modify the Position values as follows:

The Position values are reworked to provide logical groupings of data on the Pop-up Page

15. Next, we will link the Customers Page to the Customer Pop-up page. First navigate to the
Customers page (if you aren’t already there).
16. Click on the Action Drawer menu and select Design this page
17. Double click to open the Customers panel, and click Edit under Link Page

24
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

18. Set Link to Page to Customer

19. Click Save.

Upon clicking Save, the Link Criteria gets auto populated by Vinyl. The Link Criteria is what
binds the pages and determines the correct Customer record to pull up when clicking on a
link to the Customer Pop-up page.
20. Go back to the Customers page and refresh. You should now see a Pop-up icon that
appears to the right of each Customer record on the Customers page. Double clicking on
the Pop-up icon takes you to the corresponding Customer record.

Chapter Exercise: Create Additional Pop-up Pages

Using the method described, create additional Pop-up Pages with Single-Row Panels for the
following:

 Employee
 Shipper
 Supplier
 Product

For each Pop-up Page, add every Control available to each Page, except for the Primary Key of
the table itself. After you’ve created the Pop-up Pages, link them to their corresponding MRP
Panel from the corresponding Page in the order fulfillment app.

Changing a Primary Key Control to a List Object

In the last exercise where you created additional Pop-up pages, if you followed the instructions
to add in every Control you have ended up adding in a few Primary Key Controls to pages. For
example, on the Product page you should have a Supplier ID and Category ID field which
currently display UUID’s. UUID’s are unique 128 bit string of characters, and not very user
friendly to look at or work with from the application view.

Earlier in this manual we went over how to create List Objects for all the Northwinds tables you
may need them for. We will work with those List Objects as we edit the Primary Key UUID
controls to be List Objects instead.

1. Navigate to the Products page and click on the right chevron icon to open the Product
Pop-up page.
2. Click on the Action Drawer icon, and select Design this page
3. Double click on the Supplier ID control from the Controls panel
4. Click the Edit button
5. Change the Control Type value from Text to List
6. List Objects require you to configure information for List Control Properties:
a. Data Object – where the data for the List comes from. For this example, select
Supplier (List)
b. Key – The Primary Key control. For this example, select Supplier ID
c. Title – The actual value or information that will appear on the front end. For this
example, select Supplier

25
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

The Supplier ID Column has been changed to a List

7. Modify the Name field so that it reads Supplier (instead of Supplier ID)
8. Click Save
9. Go to the application and refresh, and make sure that the Supplier control now appears as
a drop-down List Object if you go to Edit the Product page

The Supplier List now allo ws you to select Suppliers from a drop down menu

Chapter Exercise: Make Category ID a List Object

Following the instructions from the Changing a Primary Key Column to a List Object section,
change the Category ID appearing on the Product Pop-up page to be a List Object.

Add a Column and Relationship to a Table

The Region table we created at the beginning of the training manual currently has no
relationships to other tables in Northwinds, which prevents us from using Region data on other
pages. If we want to make a list of Regions on the Employee page (to track which Region the
Employee is in), because the Employee table is not currently tracking Region information.

26
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

The first thing we’ll need to do is add a new Region ID column to the Employee table, and then
we will add it to the application as a List Object.

27
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Add a Region ID Column to the Employee Table

1. Navigate to the Employees page, and click the pop-up icon to open the Employee Pop-up
page
2. Click the Action Drawer icon
3. Select Design this page from the menu
4. Click the Business Logic icon on the Employee panel
5. Click the Table gear icon for the Employee table

The Table Gear Icon for the Employee Tabl e

6. Click Create to add in a new Column

7. Assign the Name as RegionID
8. Select the Logical Data Type as Unique ID. Physical Data Type will default to UUID with this
selection.
9. Click Save
10. Click Results and verify that you now see the Region ID appear for the Employee Table
results view

Update the Employee (Source) Business Object

If we want to see the new RegionID column in the application, we also need to update any
business objects we want to see it on. Here we will update the Employee (Source) business
object to also include this new column.

1. Navigate back to the Business Logic page, and make sure that the Employee table is
selected from the Tables panel
2. Click the SQL cogs icon for the Employee (Source) Business Object, from the Rules panel
3. Click the All button for the Employee table and then Proceed. This will bring in any
remaining columns not already added to the Columns panel. In this case, it will bring in the
RegionID column.

The All button brings in all Columns for a Table

28
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Add Region List Control to the Employee Page

Now that we have added RegionID to the Employee table and Employee (Source) Business
Object, we can and add a Region List Control to the Employee Pop-up page.

1. Navigate to the Employees page, and click on the Pop-up icon to view the Employee Pop-
up page
2. Click the Action Drawer icon
3. Select Design this page from the menu
4. Click Create under Controls
5. For Column, select RegionID
6. Change the Name to be Region
7. Change the Control Type to List
8. Select Region (List) as the Data Object
9. Set the Key to RegionID
10. Set the Title to Region
11. Click Save
12. Close out of the Control window by clicking the X icon
13. Edit the Position value for the Region Control so that it appears before the Employee
location information

The Employee Pop-up page with Region L ist Control Added

14. If your Region value for the Employee record you are viewing is blank, click on the Edit
button and select one of the values you populated for this list from the Regions page
earlier. Make sure to go through a few more employee’s records and select East Coast for
some and West Coast for the others. This will be helpful when we get to the Reach section
in the Advanced Manual.

29
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Convert a File Control to a Photo

If we look at the current Employee Pop-up page, you will see that the Photo control currently
displays as an image file link. This link can be used to download the associated Photo file. If we

want the Photo to display the actual image on the page, we can change the Control Type value
and then tell Vinyl to cast the Photo control as a different data type.

1. Navigate to the Employees page, and click on the Pop-up icon to view the Employee Pop-
up page
2. Click the Action Drawer icon
3. Select Design this page
4. Modify the Position value for the Photo Control so that it is the first Control that appears on
the page. Assign the Position the value of 1.
5. Click on the Pop-up icon for the Photo Control
6. Edit the Control Type and select Image
7. Edit the Image Purpose value to be Photo
8. Click on the Business Logic icon under the Employee Panel
9. Click on the SQL icon for the Employee (Source) Business Object
10. Locate the E.Photo Control, and click the Pop-up icon
11. Under Cast Options, select the Logical Data Type as Photo
12. Click Save
13. Go back to the Employee Pop-up page in the app, refresh, and you should now see the
Employee Photo appear on the page:

The Employee Photo on the Employee Pop-up Page

14. If we want the Photo field to allow us to download it and upload a new file, click on the
Action Drawer menu and select Design this page
15. Click Create under Controls
16. Select Photo as the Column to target
17. Select the Control Type as File
18. Edit the Name to be Photo Upload
19. Assign the Position value of 2
20. Click Save
21. Go back to the Employee Pop-up page, refresh, and you should now be able to download
and upload photos

30
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Convert a Control to HTML

Open the Northwinds Employee record for Laura Callahan and go to her Employee pop-up
page. You will see that the Notes field is currently displaying raw HTML on the screen. Let’s step
through how to edit the control to support and display HTML.

1. Go to the Employees page, and click on the Pop-up icon to view the Employee Pop-up
page
2. Click the Action Drawer icon
3. Select Design this page
4. Locate the Notes Control, and click on the pop-up icon
5. Click the Edit button
6. Change the Control Type from Text to HTML
7. Click Save
8. Go back to the Employee pop-up page in the app, refresh, and you should now see the
Notes field displays the appropriate HTML formatting. If you now Edit the HTML field, you’ll
note that there is a WYSIWYG editor available to modify content easily (e.g., bold text,
italicize text, etc.).

The Notes field with Control Type set to HTML

Chapter Exercise: Make a Param Pop-up Page

The Param table only ever stores one record. This record will contain a Primary Key, and then
whatever other values you need to store with that Param. The Param stores application level
parameters. For example, if you had a minimum order quantity you could store that value in
the Param table and use it in validation and make it available for future configuration through
the application Param area.

 Make a Pop-up Page called Param

 Create it as a Single-row Panel (SRP)
 Use Param (Source) Business Object as the Source Rule
 Add the Description Control to the panel.

The Param Pop-up Page

31
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Create, Update and Delete

On panels in Vinyl, you have the option of creating a new record, updating a record, and
deleting a record. Sometimes a developer might not want data to be updated or deleted, so
they would turn off these features. Additionally, a developer may want their pages to support
create and update, but only on a Single-row Panel page instead of its Multi-row Panel
counterpart. You can also save space on a page by not supporting these three features,
because their respective icons will disappear from the page when they are disabled.

To make changes to these features, you do so through the Control Options panel. Settings
available through Control Options include:

 Link to Page - Opens a new page to create or edit a record

 Inline - Allows the user to create or edit a record on the current page

Disable Delete on a Page

For illustrative purposes we will disable Delete on the Param page. In the case of the Param
page, you never want this record to be deleted. To help enforce this, we will disable the delete
function on the Param page.

1. Go to the Param page

2. Click the Action Drawer icon
3. Select Design this page
4. Click on the Pop-up icon for the Param panel to edit its details
5. Under Control Options, change Delete Mode to No

The Control Options Panel with Delete Mode set to No

6. Go back to the Param page, refresh, and you should see there is no Delete button

32
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Edit the Create and Update Links

Vinyl allows you to change the way the Create and editing icons work, specifically what area
becomes available for editing upon clicking one of the icons. To illustrate this, we’ll take a look
at the Customers page and change Create and Update to take you to the Customer pop-up
page using the Link to Page option.

1. Go to the Customers page

2. Click the Action Drawer icon
3. Select Design this page
4. Click on the icon on the right side of the Customers panel to edit its details
5. Under Control Options, set Create Mode to Link to Page
6. The Link Page panel will now show what specific Page will be linked to, in this case
Customer. If we had a specific page used for creating these records, we could link to that
instead using the Create Page option.
7. Change Update Mode to Link to Page
8. Go test in the app, and confirm that clicking on Create or Edit now opens the Pop-up page

Chapter Exercise: Create and Update Behavior

 Change the Create and Update behavior for the Employees MRP to use Link to Page to
the Employee SRP
 Change the Create and Update behavior for the Suppliers MRP to use Link to Page to
the Shipper SRP
 Change the Create and Update behavior for the Products MRP to use Link to Page to
the Product SRP

Update a Control to Currency

If you look at the Unit Price Control on the Products page, you may notice that the current
output values aren’t formatted. They currently display values like ’39.0000’. Here we’ll take a
look at how to format the values in this control to display more like currency values (e.g.,
$39.00). Note that there are several ways to achieve this in Vinyl, it can be done at the Data
Storage Layer, Business Logic Layer, and/or the Application Layer. In this example we will
update via the Business Logic Layer.

1. Go to the Products page

2. Click the Action Drawer icon
3. Select Design this page
4. Click on the Business Logic icon on the Products panel
5. Click on the SQL cogs icon for Product (Source)
6. Double click on the Unit Price Column
7. Change the Logical Data Type to be Currency
8. Click Save
9. Click the Results button and confirm that Unit Price now displays as a currency value

Add Panels and Binding

Until this point, all the Pages we’ve added to our App have had one Panel. Here we will look at
adding another Panel to a Page so that it has two Panels.

33
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

After we have added in a second Panel to a Page we will look at how to link the Panels so that
data viewed in the second Panel is displayed dynamically based on the record selected in the
first Panel. In the example we’ll review, we will add in an Orders Panel to the Customers Page.
When we add in the binding, the Orders Panel will display Orders data based on which
Customer record is selected from the Customers Panel.

Example of Customers Page with second Orders Panel Added and Binding to Link Pan els

1. Go to the Customers page

2. Click the Action Drawer icon
3. Select Design this page
4. Click Create under Panels to add in a new Panel
5. Set Type to Multi-row Panel
6. Select Order (Source) for Source Rule
7. Leave the Name as Orders
8. Click Save
9. Make sure that the Orders panel is selected, and then click Create under Controls
10. Select OrderID for the Column, and click Save
11. Click Create +
12. Select EmployeeID for the Column
13. Change the Control Type from Text to List
14. Under List Control Properties, select Employee Full Name (List) as the Business Object Set
15. Select EmployeeID(*) as the Key
16. Select FullName as the Title, and click Save
17. Click Create +
18. Select OrderDate for the Column
19. Click Save
20. Run the page to confirm you can now see two Panels on the Page: Customers and Orders

34
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Add a Panel Binding

To make this new Orders Panel more useful, we will add in a binding which will allow us to
filter the Order results based on what specific Customer record is selected from the Customers
Panel.

1. Go to the Customers page

2. Click the Action Drawer icon
3. Select Design this page
4. Identify the Orders Panel in the Panels panel, click the pencil icon on the left, and then
under Binding Panel select Customers. Click Proceed to save the change.
5. In the Binding Columns panel, click on the Create button
6. The Source will be CustomerID, and Target will also be CustomerID
7. Click the checkmark icon to save the record

The Binding Pan el and Binding Columns informat ion is config ured

8. At this point, if you go back to the app, refresh the page, and click on a Customer record
you will see the Orders panel will only show the associated Orders for the Customer record
selected.

Add an Order Page

To finish building out our order fulfillment system, we will add in a new Order page which will
contain all the information we need for an Order. After adding in the new Order page, we will
link it to the high level Orders panel appearing on the Customers page.

1. Click the Action Drawer icon

2. Select Add a page
3. Assign the name Order
4. Click Save
5. Click Create under Panels
6. Select the Type as Single-row Panel
7. Select Order (Source) as the Source Rule
8. Leave the Name as Order, click Save
9. Click Create under Controls, and select OrderID as the first Control. In this specific case we
do want to display OrderID on the application page because it is a unique Number
referring to an Order record.
10. Click Create +
11. Select EmployeeID as the Control
12. Change the Control Type from Text to List
13. Select Employee (Full Name List) as the Data Object
14. Select EmployeeID as the Key
15. Select FullName as the Title
16. Edit the Name to be Employee

35
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

17. Add the remaining Controls. For CustomerID and ShipperID change these to be List
Control Type rather than Text, edit their Name and select the appropriate List business
objects.

Chapter Exercise: Rework Order Page Control Order

After you’ve finished adding the new Order page, look at it from the Application view.
Determine if there are any opportunities to rework the Position value for some of the Controls
so that information appears in a more logical grouping on the physical page.

Areas of opportunity for organizing improvement include: Ship Cost and Shipper appearing
toward the top of the page, Dates grouped together, Shipping information (Address, City,
State, Zip) appearing together and toward the bottom of the page.

Add an Order Details Panel to a Page

So far, we have an Order Panel which shows us high level information about a Customer’s
order. Now we will add in an Order Details Panel which will contain granular details about the
order including what products are ordered, what they cost, where the order is being shipped,
etc.

1. Click the Action Drawer icon

2. Select Design this page
3. Click Create under Panels
4. Select Multi-row Panel for Type
5. OrderDetail (Source) will be the Source Rule
6. Leave the Name as Order Details
7. Click Save
8. Add the Controls:
a. ProductID – change this to a List Object
b. Unit Price
c. Discount
d. Quantity

Link to a Page from a Panel

1. Navigate to the Customers page
2. Click the Action Drawer
3. Select Design this page
4. Expand the Orders panel
5. Click Edit in the Link Page panel
6. Select Order for the Link to Page value. Click Save
7. Check that Link Criteria has OrderID as the Source Column and Type is Bind

36
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Here we bind the higher-level Orders Panel to the l ower level Order Panel

If you refresh the Application view, the Orders panel will now have a chevron arrow icon
appear to the right of all Order line items. This icon can be clicked on and you will be taken to
the corresponding Order page and information.

Add in Line Totals

Next, we will add in Line Totals to the Order Details panel, so we can see how much each
Product order contributes to the total order cost. After adding Line Totals, we’ll look at the

37
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Panel and notice the Line Totals don’t automatically update when we change information
about the order quantity. We will correct this by adding a Refresh Rate to the Panel.

1. Navigate to the Order page

2. Click the Action Drawer
3. Select Design this page
4. Click on the red Business Logic icon for the Order Details panel
5. Click on the SQL cogs icon for the OrderDetail (Source) business object
6. Click Create under Columns
Enter the following function syntax:

O.UnitPrice*O.Quantity*(1-O.Discount)

7. Assign an Alias as LineTotal

The Business Logic Layer where the Line Total is Added to OrderDetail (Sourc e)

8. Click the checkmark icon to save

9. Open the LineTotal row appearing in Columns and set the Logical Data Type as Currency
10. Click on the Results button and confirm you see the LineTotal Column appear with
numeric values in it
11. Next, we’ll add the LineTotal column as a Control to the Panel. Go back to the Order Details
page in the app, and click the Action Drawer.
12. Select Design this page
13. Select the Order Details Panel, and click Create under Controls
14. Select the Column LineTotal
15. Assign the Name as Line Total
16. Select Text for the Control Type
17. Leave the rest of the default values, and click Save
38
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

18. Go back to the app and refresh. You should now see the Line Total Control appear in the
Order Details panel.

The Order Details Panel with the Line Total colum n added

19. Click Save

20. Click the Edit icon for one of the Order Detail records, and change the Quantity number to
increase it by 1. Click Proceed. Note that the Line Total value for this record did not update
to reflect the new Quantity value. We will correct this issue by adding in a Refresh Rate.

Update Line Totals with an Event

As described, our Line Total control is showing us a total for the order record but not reflecting
changes made to the record. We will address this by adding an Event in Vinyl that instructs the
control to behave in a specified way (refresh and update) upon a certain action (change to a
record is saved). Events in Vinyl are added to business objects in order to build processes.

1. Navigate to the Order page

2. Click the Action Drawer
3. Select Design this page
4. Click on the red Business Logic icon for Order Details
5. Click the Events icon for OrderDetail (Source)
6. Under All Events, click the Pop up icon on the right side of the Save event
7. Click Edit
8. Change the Refresh Scope value to Data Object
9. Click Save
10. Go back to the app page for Order and refresh. Now try editing a Quantity value for one of
the Order Detail records. Observe that the Line Total value automatically refreshes to reflect
the change.

Create a Line Total Sum

If you want to add in a total of all the Line Totals

39
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

1. Navigate to the Order page

2. Click the Action Drawer
3. Select Design this page
4. Select the Order Details panel
5. Open the Line Total Control
6. Click the Edit button in the Miscellaneous panel
7. Set the Total Function value to Sum
8. Set the Format String value to CurrencyChange Unit Price Control to Currency
1. Navigate to the Order page
2. Click the Action Drawer
3. Select Design this page
4. Click to select the Order Details panel
5. Select Unit Price
6. Click Edit under Miscellaneous
7. Click in the Format String area and select Currency

Format String menu optio ns in Miscel lan eous

8. Click Save

Change Discount to Display as Percentage

The Order Details page has a Control on it for Discount which is currently not showing up on
the Application as a percentage value. To be more useful, this field should ideally display as a
percentage. To change the Control:

40
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

1. Navigate to the Order page

2. Click the Action Drawer
3. Select Design this page
4. Click to select the Order Details panel
5. Open the Discount Control
6. Click Edit under Miscellaneous
7. Select Percent – Decimal as Format String
8. Click Save

Change a Field to Read Only

There may be instances where you want to make a Control on a panel something that cannot
be edited by app users. In the Order page, a good example of a Control we wouldn’t want end
users to change is the Unit Price. In order to make the Unit Price Control not editable by app
users we will change it to be Read Only.

1. Navigate to the Order page

2. Click the Action Drawer
3. Select Design this page
4. Select the Order Details panel
5. Edit the Unit Price Editable State value from Available to Read Only
6. Refresh the application and you will no longer be able to edit Unit Price

Note: If you want to change a field from Read Only to Available, you could change the
corresponding Control State value accordingly.

Default Rules
If you want to default certain data into a new record(s) upon creating the new record, you can
use a Default Rule. For example, you may want to default the Unit Price value into a new
record being created on the Order Details panel.

Default Rules are created in the same manner in which all Rules are created, and are created
in the same area of the Business Logic Layer in Vinyl as the other Rules. The Rule Type selected
when creating a Rule determines how it can be applied and where it can be used.

In this exercise we will create an Inner Join, which is used to provide instruction on how data
should be combined from two or more tables, based on the related column between them. An
Inner Join takes all the records from multiple tables that have matching values in both tables.

Joins
When creating Business Objects in the Business Logic Layer, it is sometimes necessary to draw
against two separate tables in order to display data from both. To do this, you use a join and
join the tables together. There are three types of joins - Inner, Left Outer, and Right Outer.

41
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Venn diagram helping to illustrate the concept of SQL joins

 The diagram on the left represents an Inner join, because it returns only the values that
exist in both tables. For example, if you inner joined the Product and Category tables,
you would only see Product records that have a CategoryID which matches one from
the Category table, and you would only see Category records with a CategoryID that
exists in the Product table.

 The middle diagram represents a Left Outer join, which returns all values from table A
regardless of their appearance in table B. For example, if you left outer joined the
Product and Category tables, you would see every single Product, but you would not
see any Category records that do not have a matching CategoryID in the Product table.

 The third diagram represents a Right Outer join, which is just the opposite of a left
outer. Using one or the other does not matter because you can always switch a table
from the left to the right side of the join and it achieves the same effect.

Create a Default Rule

If we want to make it so that in our app the end users can’t enter their own Unit Prices, we can
enforce this by creating a Default Rule that will bring the Unit Price in automatically from the
data source. The Default Rule will retrieve an OrderID and ProductID from the data source, it
will join these two tables on their ProductID, and retrieve Unit Price information.

Earlier we set the Unit Price control to Read Only, so end users will not be able to edit the value
either. Let’s step through creating a Default Rule to set our Unit Price control values.

1. Navigate to the Order page

2. Click the Action Drawer
3. Select Design this page
4. Click on the Business Logic icon for the Order Details Panel
5. Click Create under Rules
6. For Purpose, select Default
7. For Target, select the OrderDetail Table
8. Assign the Name as OrderDetail (Default UnitPrice). Note we are following Vinyl naming
conventions here and using TableName (Rule Purpose).
9. Click Save
10. Click the SQL cogs icon
11. Click Create under Tables and select OrderDetail
12. Click the check mark to save
13. Click Create under Tables and select Product
14. Click the check mark to save
15. Click the PK button for OrderDetail. This brings down OD.OrderID and OD.ProductID to the
Columns panel.
16. Click Create under Joins
17. Select the Left as OD, Type as Inner, and Right as P
18. Click Create under the Join Columns panel, and set Left as ProductID(*), Operator as ‘=’,
and Right as ProductID(*)
19. Click the check mark to save the record
20. Click Create under Columns
21. Click on the select list for Target, and select UnitPrice
22. Select P.UnitPrice for the Columns value
23. Click the check mark to save
42
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

24. Click the Results button to make sure there are no errors, and you see the results you are
expecting

Business Logic L ayer Def ault Rul e to default v alu e f or Unit Price

Add a Default Rule to a Page

A Rule on its own will not do anything in Vinyl until it gets connected to something. A Default
Rule can be applied to a Table, a Business Object, and/or the application UI. In this example we
will put the Default Rule on the application UI, on the Order Details panel on the Order page.

1. Navigate to the Order page

2. Click the Action Drawer
3. Select Design this page
4. Open the Order Details panel
5. Click the Default Views icon
6. Click Create
7. Click the select menu for Rule and select OrderDetail (Default UnitPrice)
8. Click Save

Now if you refresh the application and try adding a new record to the Order Details panel, the
Unit Price value will default based on the Product selected. If you get a Primary Key constraint
error, you need to select a Product that is not already being displayed in the Order Details MRP
(this is because ProductID is a Primary Key and you cannot have more than one of the same
value as such).

43
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

List Retrieve
A list control allows you to look at a set of records and pull back the ID value into whatever you
are editing. List retrieve expands this functionality, as it allows you to pull back other values
from the list into whatever you are editing, such as retrieving the Unit Price from a list of
Products. We will create a List Retrieve to get the Unit Price value by augmenting our existing
Product (List) Rule to include Unit Price and then leverage that Rule from our Panel.

1. Navigate to the Order page

2. Click the Action Drawer
3. Select Design this page
4. Select the Order Details panel
5. Open the Product Control
6. Click on the Product (List) Data Object
7. Click on the SQL cogs icon
8. Click Create under Columns
9. Select P.UnitPrice as the Column, the Target is UnitPrice

The Business Logic Layer where we modify the (Product List) business object

10. Go back to the details page for your ProductID Control

11. Click on the Bindings icon under List Control Properties
12. Select UnitPrice as Panel Column, UnitPrice as (List Source) Column, and set the Direction
to Retrieve
13. Click the check mark to save

Now when you refresh the application, updating the Product will automatically reflect the
corresponding value for Unit Price.

Validation Rules
Validations are what you use when you want data to be in a certain format before it can be
stored. Validations can be applied on the table or Business Object. In this example we’ll create
a Validation Rule upon Save and apply it to a Business Object, so if you try and save one of the
Order Detail records it will validate how much the Discount is and if it’s greater than .1 it will
not allow you to save it. Note that .1 corresponds with 10%.

44
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Create a Validation Rule

In this Validation Rule, we will be using a Where clause. In SQL, a Where clause is used to
provide instruction on which rows meet the specified criteria for the entire SQL statement. It is
a way of further refining what records will be affected by a SQL statement.

1. Navigate to the Order page

2. Click the Action Drawer
3. Select Design a data source
4. Click on the Business Tables icon
5. Click Create under Rules
6. Select Validation as the Purpose
7. Select OrderDetail as the Target table
8. Assign the Name as OrderDetail (Discount Validation)
9. Click Save
10. Click the SQL cogs icon
11. Click Create under Tables and add in the OrderDetail table
12. Click the check mark to save
13. Click the PK button to add in the Primary Key, and click Proceed
14. Click Create in the Where Panel
15. Select OD.Discount as Left, > as Operator, and .1 as Right
16. Click the red check mark on the left to save

Business Logic L ayer wher e the OrderDetail (Discount Valid ation ) Rul e SQL gets defined

45
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Add a Validation Rule to a Page

1. Navigate to the Order page
2. Click the Action Drawer
3. Select Design this page
4. Click the Business Logic icon on the Order Details panel
5. Click the Events icon for OrderDetail (Source)
6. Click on the Save event to highlight it, and then click Create under Validations
7. For the Rule, select OrderDetail (Discount Validation)
8. Type should be set to Rule, and Severity should be set to Error
9. Add a Message value, for example “Your discount must not exceed 10%”
10. Error Type should be Fail on data returned. We will use Fail on data returned to check for
bad values. Alternatively, we could use Fail on no data return to check for good values.
11. Binding Type should be Implicit. Implicit means it runs in memory and Explicit runs
against objects in the backend.
12. Add a brief description to the Technical Help field, such as “Sets a maximum discount
value.”
13. Click Save

Now if you go back to the application Order page and test, you will not be able to save an
Order Detail record with a Discount value greater than .1.

Val idatio n Error displays when a Discount greater than .1 is input and the record is Saved

Application Level Parameters

If you need to create the Discount limit as a value that can be easily modified by the customer,
you might consider adding it as an application level parameter and store it on the Param table.
In this example we will create a Discount Maximum on the Param table, which will allow a
customer to easily change the discount maximum value as needed.

1. Navigate to the Param page

2. Click the Action Drawer
3. Select Design this page
4. Click on the Business Logic icon
5. Click on the table gear icon for Param
6. Click Create under the Columns panel
7. Assign the Name as DiscountMaximum
8. Set the Logical value as Number
9. Set the Physical value as Decimal
10. Click Save
46
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

11. Add the DiscountMaximum Column to the Param (Source) business object
12. Add the Discount Maximum Control to the Param page
13. Edit the Discount Maximum field on the Param page to provide a value. For example, enter
.2 to enforce a 20% maximum discount value.

Edit the Validation Rule to use the Param Value

1. Navigate to the Param page
2. Click the Action Drawer
3. Select Design a data source
4. Click on the Business Tables icon
5. Select OrderDetail from the Tables panel
6. Click the SQL cogs icon for the OrderDetail (Discount Validation) Validation Rule
7. Click Create under Tables, and add the Param table
8. Click the check mark to save
9. Next, we’ll create a Cross Join, which takes everything from table A and match it with
everything from table B. Click Create under Joins.
10. Set Left as OD, Type as Cross, and Right as P
11. In the Where panel, edit the Right value to be P.DiscountMaximum

Business Logic L ayer SQL for OrderDetail (Discount Val idatio n)

Editing Navigation Menus

Every application has a navigation menu which is generally always visible within the
application. This navigation menu is the top bar region on the screen which allows you to click
on links appearing in the menu and takes you to different areas or pages of the application.
The application developer will determine what to name these navigation links, and where the
links take you to within the application. It is easy to edit a navigation menu, and to organize
menu items into Nested Menus (or sub menus), in order not have a cluttered main navigation
menu.

47
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

For the purpose of learning how editing navigation menus work in Vinyl, we will edit our
navigation menu so that it only has Customers and Config (for Configuration), and Config will
be a Nested Menu containing the balance of menu items underneath it (Products, Categories,
etc.). Vinyl methodology for navigation is to have your main process page(s) listed on the top
right-hand side of the page, ancillary pages reside underneath a Configuration nested menu,
and if you have a Home page that should appear over on the top left hand side of the page.

The Northwind app navig ation menu

Create a Nested Menu Item

1. Click on the Action Drawer menu
2. Select Design a Menu
3. Click Create under Menu Items
4. Assign the Name Configuration
5. This menu item is going to be a Nested Menu item, so for that reason we do not select a
page to link to
6. Click Save and close the window
7. Under the parent column: select Configuration for every menu item except Customers and
Configuration
8. Click Save

The Configurat ion Nested Menu after Editing

Chapter Exercise: Edit the Navigation Menu

Following steps outlined previously, edit your navigation menu so that ‘Order’ does not appear.
We do not need this navigation link as users will arrive at the page using the chevron icon link
from the Orders panel on the Customers page.

48
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Change the Linked To Page for your Application

Vinyl determines what page to link to when you launch your Application based on the very first
Page that gets added to your Application. In our case, the first Page added was the Categories
page. The Categories page isn’t very useful to users and the Customers Page is much more
likely to be the Page we would want users to be taken to when they open this App. In order to
change the Linked To Page for your Application:

1. Click on the Action Drawer menu

2. Select Vinyl (IDE)
3. Click Build your application from the Build menu
4. Double click on your Application
5. In the Regions panel, edit the record called Page, and select Customers

Editing the Regio ns panel to change the Page Link

6. Click Proceed
7. Open the app from the site menu and make sure that the update works as expected

CRUD Rules
In Vinyl, CRUD Rules are used when you want to update data in mass quantities. For example,
you could have a CRUD Insert Rule to insert records. Another example is a CRUD Delete, where
you might have a rule that deletes all the Order Details for an Order if you want to clear the
Order. In this example we will look at creating CRUD Rules to illustrate the Upper and Lower
Functions, and once we’ve created our CRUD Rules we will place them on a button. With these
rules, we will use the Employees page and have the rules change the First Name and Last
Name columns.

Create an Upper CRUD Rule

1. Navigate to the Employees page
2. Click on the Action Drawer menu
3. Select Design a data source. The data source refers to the underlying tables of your
application which contain your data.
4. Click on the Business Tables icon
5. Click Create under Rules
6. Set the Purpose value to be CRUD. CRUD Rules have the following additional options:
a. Delete – will delete records
b. Insert – will add/insert records, will fail if a Primary Key already exists
c. Cram – like CRUD Insert, but won’t fail if a Primary Key already exists
d. Update – will update records that already exist

49
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

e. Business Layer – select if you want the rule to go through the Business Layer as it
runs (will take Validations and logic into account)
7. Select Update as the Action
8. Select Employee as the Target
9. Assign the Name as Employee (FirstName Upper Update)
10. Click Save
11. Click the SQL cogs icon
12. Click Create in the Tables panel, and select the Employee table
13. Click the PK button for the Employee table to bring in the Primary Key
14. Click Create under Columns
15. Enter the following Upper function syntax:

Upper(E.FirstName)

16. Assign the Alias UpperFirstName

17. Make sure the Target is FirstName
18. Check the Results of the CRUD Rule

Results of the CRUD Rule for Employee (FirstNam e Upper Update)

Attach the Upper CRUD Rule to an Event

Most of the time, you will want your CRUD Rule to be placed on the table, because it’s so much
easier to organize all your events when everything is on the table. By organizing your Rules on
tables you’ll help streamline your app and make it easy to find that type of information when
processes need to change or be updated in the future.

1. Navigate to the Employees page

2. Click on the Action Drawer menu
3. Select Design this page
4. Click the Business Logic icon
5. Click the Events icon for the Employee table
6. Click Create under Events
7. Assign the Name as UpperFirstName, and then click Save
8. Click Create under Actions
9. Select Employee (FirstName Upper Update) for Rule
50
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

10. Use the Technical Help section to provide a brief description of the Action, such as
“Capitalizes the First Name field”, and then click Save

Attaching the CRUD Rule to an Event

Add the Event to the Employee (Source) Object

Panels in Vinyl can only use Events from the object they are based on, so adding the Event to
the object with the same name will instruct Vinyl to check the table level logic as well.

1. Navigate to the Employees page

2. Click on the Action Drawer menu
3. Select Design this page
4. Click the Business Logic icon
5. Click the Events icon for the Employee (Source) Business Object
6. Click Create under Events
7. Assign the Name UpperFirstName. Make sure this Name value is the same as what you
named the CRUD Rule when you attached it to an Event earlier.

Add the Event to the Employee (Source) busin ess object so it can be used on the Employee Panel.
The black circle f ill ed in under Actions, for the UpperFirstName Event is because V inyl recognizes
there is logic on the table.

8. Click Save

51
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

52
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018
INTRODUCTION TO VINYL 2.3

Add the CRUD Rule to a Button

1. Navigate to the Employees page
2. Click on the Action Drawer menu
3. Select Design this page
4. Click Create under Controls
5. Select Button as the Control Type
6. Assign the Name First Name Upper
7. Click Save
8. Click Edit under Navigation and Actions
9. Select UpperFirstName as the Event
10. Edit the Position value so it appears right after the First Name Control
11. Click Save
12. Go to the app view for the Employees page and test that the button works to change the
First Name field values from lower/mixed to all upper-case letters

Chapter Exercise: Create a Lower Function CRUD Rule

Following the instructions we just walked through, go ahead and create a new CRUD Rule for
the Lower function for the Employee table FirstName Control. You can name this new CRUD
Rule Employee (FirstName Lower Update), and the Lower Function syntax will be Lower
(E.FirstName). When you have the CRUD Rule created, attach it to an Event, add the CRUD
Rule to the Employee Source Object, and finally add the CRUD Rule to a Button on the
Employee page and change the Position so that it appears immediately after the Upper CRUD
Rule.

Vinyl Beyond the Class

This concludes the Introduction to Vinyl Training Manual. If you’re looking for more information
on learning and working with Vinyl, please see the online Knowledge Base at
http://wiki.zudy.com

53
© 2018 Zudy Software - All material and information contained within this site confidential and proprietary.
No distribution, copying, or dissemination of the contents is allowed without prior written permission.
Last Modified 9/28/2018