Vinyl Advanced Training Manual
Vinyl Advanced Training Manual
Vinyl Advanced Training Manual
2.6
DEVELOPER TRAINING
© Zudy
© 2019 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.
Introduction ................................................................................................................................................................ 1
What is Vinyl? ............................................................................................................................................ 1
Course Objective .................................................................................................................................... 1
Vinyl Layers................................................................................................................................................................... 1
Data Storage Layer .............................................................................................................. 1
Business Logic Layer ......................................................................................................... 2
UI Layer ....................................................................................................................................... 2
Northwind Data Structure ............................................................................................................. 2
Data Storage Layer ................................................................................................................................................ 3
Logical Data Types for Table Columns .................................................................................. 3
Boolean ...................................................................................................................................... 3
Currency..................................................................................................................................... 4
Date, Date/Time, Time ..................................................................................................... 5
Email ............................................................................................................................................ 6
File ...................................................................................................................................................7
HTML............................................................................................................................................. 8
Number, Percent ................................................................................................................. 9
Percent ..................................................................................................................................... 10
Phone ......................................................................................................................................... 10
Photo .......................................................................................................................................... 10
String ............................................................................................................................................11
Unique ID .................................................................................................................................12
URL................................................................................................................................................13
Logical Data Types for Storing Address and Phone Data.....................14
Vinyl Data Services ........................................................................................................... 15
Insert, Update and Delete ............................................................................................................. 17
Chapter Exercise: Modify the Product Table .................................................................. 18
Default Values ....................................................................................................................................... 18
Chapter Exercise: Set a Default on the Product Table ............................................ 19
Usage ........................................................................................................................................................... 19
Other Common Usage Types .................................................................................. 20
Relationships ..........................................................................................................................................21
Chapter Exercise: Create a Relationship on the Supplier Table ......................23
Relationships: Cascade ...................................................................................................................23
Joins .............................................................................................................................................................................. 25
Union Joins ............................................................................................................................................. 25
CRUD ............................................................................................................................................................................ 28
CRUD Update ....................................................................................................................................... 28
Chapter Exercise: Create a CRUD Update Rule ........................................................... 29
CRUD Delete ......................................................................................................................................... 30
© 2019 ZUDY SOFTWARE - ALL MATERIAL AND INFORMATION CONTAINED WITHIN THIS DOCUMENT IS CONFIDENTIAL AND PROPRIETARY.
NO DISTRIBUTION, COPYING, OR DISSEMINATION OF THE CONTENTS IS ALLOWED WITHOUT PRIOR WRITTEN PERMISSION.
What is VinylTM?
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 some of the more advanced skills used to develop in Vinyl, as well as the
methodology used at Zudy to develop applications. In this course we will take a deeper look at
the Data Storage Layer and review Logical Data Types, Union Joins, CRUD Rules, Subqueries,
Validations, Board and Chart Panels, Badging and Reach.
Vinyl Layers
These are the three layers of Vinyl: Data Storage Layer, Business Logic Layer and the
UI Layer. Blue, Red, and Green are used to visually identify the 3 different layers of
Vinyl.
1
VINYL USER GUIDE
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.
The Tables and Primary Key’s (PK’s) in the Northwind s Training Application
2
VINYL USER GUIDE
To start off, we will take a deeper look at the Data Storage Layer in Vinyl. In this chapter we will
review different data storage types for Columns, assigning Columns a default value, and
configuring relationships between tables to improve the quality of data in the application.
In Vinyl, we leverage Logical Data Types to define the different type of data being stored in the
Column which can then be expressed in a manner that is unique to its data type. Logical Data
Types define the data type for the Column, while Physical Data Types determine how the data
in the Column is stored in the Data Storage Layer. In this next section we will take a look at the
different Logical Data Types available in Vinyl.
Boolean
Boolean is a Logical Data Type that can only store one of two possible values, intended to
represent the two truth values of logic and Boolean algebra. Boolean values in Vinyl are most
often stored as Bit Physical Data Types. In the example we’ll review, we will look at the Product
table’s Discontinued Column:
3
VINYL USER GUIDE
❖ Bit – stores data as 0 or 1, with 0 meaning False and 1 meaning True. This is typically the
option used when you want to represent a checkbox on the UI Layer, where unchecked
means False and checked means True.
❖ Char – If you store Boolean with Char, from the UI Layer you will see a list that has True and
False values on it, instead of a checkbox.
❖ Decimal - 10^38 + 1 – 10^38 – 1. Used when you want to store a number with a large decimal
value.
Currency
The Currency Logical Data Type supports numeric values with decimal places, and should be
used to store currency values. This data type only has one Physical Data Type available, which is
Decimal. In the UI Layer, a Control that makes use of a Currency Column will display a ‘$’
symbol next to the numeric value, to identify it as currency. We can review an example of the
Currency Logical Data Type by looking at the Product table’s UnitPrice Column:
4
VINYL USER GUIDE
The Product Table’s UnitPrice Column is an example of Currency Logical Data Type
❖ Decimal - 10^38 + 1 – 10^38 – 1. Used when you want to store a number with a large decimal
value.
Date is the Logical Data Type used to store date information in a Column, complete with day,
month and year and formatted as MM/DD/YYYY. If you try and edit a field set as Date, you’ll see
a calendar pop-up which allows you to choose a new date value.
If you are also looking to capture and store Time information along with Dates, Vinyl has a
separate Date/Time Logical Data Type for that purpose. Similarly, if you are only looking to
store and present Time information, Vinyl has a Time Logical Data Type designed for that
purpose.
To review the Date Logical Data Type, we will review the Employee Table, BirthDate Column.
5
VINYL USER GUIDE
The Employee Table, BirthDate Column uses Date as its Logical Data Type
The Email Logical Data Type should be used for Columns where you want to capture, store and
display Email Address information. It is important to use this Logical Data Type for Email
Addresses, as it will ensure proper formatting. In this example we will review the Employee
table’s Email Column:
6
VINYL USER GUIDE
The Employee Table’s Email column is an example of an Email Logical Data Type
File
The File Logical Data Type stores a file, either as a Binary or NVarchar Physical Data Type. From
the UI Layer, File is often used in conjunction with a Photo Control to provide an end user the
ability to upload new files and replace existing ones with a data record. In the example we will
review, File is used for the Employee table’s Resume Column so that we can upload, store and
make available for download an Employee’s resume.
7
VINYL USER GUIDE
The Employee Table’s Resume Column is an example of a File Logical Data Type
❖ Binary - Binary data is the only category of data that can be directly understood and
executed by a computer. It is numerically represented by a combination of zeros and ones.
❖ NVarchar - UNICODE character data of indeterminate length.
HTML
The HTML Logical Data Type stores data containing HTML syntax. As an example we can review
the Employee table’s Notes Column:
8
VINYL USER GUIDE
The Employee Table’s Notes Column is an example of the HTML Logical Data Type
Number, Percent
The Number Logical Data Type stores numeric data and has many different Physical Data
Types available. If you want to store, present, and run calculations off of numbers as Percent
values Vinyl has a separate Percent Logical Data Type available for this purpose.
We can review an example of the Number Logical Data Type by looking at the Product table’s
UnitsInStock Column:
The Product Table’s UnitsInStock Column is an example of Number Logical Data Type
❖ Decimal - 10^38 + 1 – 10^38 – 1. Used to store a number with a large decimal value.
❖ Float - -1.79E + 308 through -2.23E -308. Used to store smaller decimal values.
❖ Integer – BigInt - -9,223,372,036,854,775,808 to 9,223,372,036,854,775,807
❖ Integer – Int - 2,147,483,648 – 2,147,483,648
❖ Integer – SmallInt - -32,768 to 32,767
❖ Integer – TinyInt – 0 to 255
❖ Real - -3.40E + 38 through -1.18E - 38
9
VINYL USER GUIDE
Percent
The Percent Logical Data Type is available for capturing, storing and displaying percentage
data.
Phone
The Phone Logical Data Type supports storing Phone number data, along with proper
formatting. As the corresponding Physical Data Type for Phone is Varchar, we can use this field
for International phone numbers as well as the United States. In this example we will look at
the Employee table’s HomePhone Column to see an example of the Phone Logical Data Type:
The Employee table’s HomePhone column is an example of Phone Logical Data Type
Photo
The next Logical Data Type we’ll review is for Photo. You might recall from the Intro Course
that we used the Photo Column in conjunction with a File Control to allow users to upload new
files and download existing files. Let’s look at the Employee Table’s Photo Column to review an
example of the Photo Logical Data Type.
10
VINYL USER GUIDE
The Employee Table’s Photo Column is an example of the Photo Logical Data Type
❖ Binary - Binary data is the only category of data that can be directly understood and
executed by a computer. It is numerically represented by a combination of zeros and ones.
String
The next Column Logical Data Type we will review is String. String is probably the most
frequently used Logical Data Type in Vinyl. String allows you to store an array of data in a
sequence of elements, typically characters, symbols and numbers. Let’s review the Employee
Table FirstName Column to review String. Note that we have Allow Nulls ticked off because we
want all Employees to have a First Name value:
11
VINYL USER GUIDE
The Employee Table, FirstName Column uses String Logical Data Type
Unique ID
The next Logical Data Type we’ll review is Unique ID, which is used to store a unique identifier
value. Unique ID’s are used to uniquely identify each row or record in a Table in a database.
Primary Keys are examples of Columns which use a Unique ID Logical Data Type.
TO VIEW A UNIQUE ID
12
VINYL USER GUIDE
Looking at the Column definition screen in Vinyl, there is a PK Settings Control Set which
contains three options which define the Primary Key Settings:
❖ Primary Key - Boolean flag that defines if a field is a Primary Key for a Table. Checking this
option indicates the Column is a Primary Key for the Table its associated with.
❖ Auto Gen – Boolean flag that determines whether you want the field to automatically be
generated upon new record creation (e.g., fill in the Unique ID field). Checking this causes
the Column to autogenerate its value as new records are created.
❖ Allow Nulls – determines whether a new record can be created which does not contain
any data (potentially creates bad data). Checking this indicates that nulls are allowed for
this Column, and having an X appear here indicates nulls are not allowed for this Column.
URL
The URL Logical Data Type is available for capturing, storing and displaying a URL value (the
address of a World Wide Web page). It is used to ensure the proper formatting is available for
this type information.
13
VINYL USER GUIDE
The Shipper table’s Website column is an example of a URL Logical Data Type
Logical Data Types are designed to give more meaning to the data type(s) being stored. Added
in Vinyl 2.4, there are Logical Data Types available for storing Address and Phone data. By using
one of these values when storing data for these types, you can leverage the power of Vinyl Data
Services in validating data via external API resources that come preconfigured.
ADDRESS
❖ City
❖ Country
❖ Line1
❖ Line2
❖ Line3
❖ Line4
❖ State
❖ Zipcode
PHONE
❖ Cell
14
VINYL USER GUIDE
❖ LandLine
❖ Phone
Vinyl Data Services is a way to quickly and easily validate data before it is stored in an app. Vinyl
Data Services comes shipped and preconfigured with Vinyl 2.4 and above, and provides a
powerful API connection service to various API resources (e.g. Melissa Data) to run validation
against certain defined Logical Data Types.
For example, the Email Logical Data Type now uses Vinyl Data Services to validate that data
entered into an Email type Control is a valid ISO Standard Email Address. An error message will
be displayed to the User if not. No extra setup is required to leverage this Vinyl Data Service.
Vinyl Data Services, as they are used with Logical Data Types, is preconfigured through the
Vinyl IDE > Configuration > Logical Data Types. For example, here is the Logical Data Type
defined for Email:
The Logical Data Type defined for Email that uses Vinyl Data Services
15
VINYL USER GUIDE
After a Logical Data Type is configured in the Vinyl IDE > Configuration area, it gets assigned to
a Column in the Data Storage Layer. For example, here is the Email Logical Data Type assigned
in the Employee table to the Email Column:
Lastly, with the configuration already in place in the Vinyl IDE along with the Data Storage
Layer configured to use the Logical Data Type, the application UI Layer will run validation
automatically and provide meaningful Error Messages if data being entered isn’t valid. For
example, this is an Error Message encountered when entering an invalid Email value on the
Employee SRP Panel:
16
VINYL USER GUIDE
Tables and Columns can have Insert, Update and Delete functionality enabled or turned off.
The settings here, to reiterate, control the behavior throughout the Vinyl Layers including the
Application Layer. In this example we will walk through changing the supported functionality
for the Employee table.
1. Click the Action Drawer icon, and select Vinyl IDE
2. Click the Build your application button on the Build menu
3. Click the Data Storage Layer button
4. Click the Tables gear icon for your data source
5. Expand the Employee table to view the Table Definition
6. Click on Edge Case Settings at the bottom of the table panel on the left
17
VINYL USER GUIDE
Default Values
Columns in Vinyl can be created with default values. This can be useful when you have a field
that is usually the same value, or if you want to lock a field into a certain value by combining a
default with no support for Inserting and Updating.
To review a Default Value example, we’ll assign the Country Column of the Employee table a
default value of USA since the majority of Northwinds employees are based in the United
States.
18
VINYL USER GUIDE
The Default Value field is where you can set default information for Columns
Usage
All Columns in Vinyl have a Usage field, and the purpose of the Usage field is to flag that
Column for a specific role within the database and application. It is important to note that not
all Columns have Usage values defined, in fact most do not.
Title is the most common Usage value defined for Columns, and is used to flag a Column as a
List Title which means that it will be added to a List Business Object if the List button is used to
create a List object. You will receive an error message clicking the List button to create a List
19
VINYL USER GUIDE
object if you are trying to use it on a Table without a Title Column defined. To correct this issue,
simply defined one of the Columns as your Title and then click the List button again.
In this example, we’ll look at defining a Usage for the Category table.
1. Click the Action Drawer icon, and select Vinyl IDE
2. Click the Build your application button on the Build menu
3. Click the Data Storage Layer button
4. Click the Tables gear icon for your data source
5. Expand the Category table to view the Table Definition
6. Determine which Column makes the most sense to be used as a Title. If we made a list
object out of the Category table, we would assign the Category Column a usage of Title.
7. Now if we create a List Business Object for Employee table, Category will be used as the
Title field
20
VINYL USER GUIDE
Relationships
Relationships in Vinyl are most useful for data integrity, by preventing Users from entering bad
data and creating orphaned records (data which no longer has context). When creating
relationships between two tables, one table becomes the parent and the other becomes the
child. Each relationship is bound by a Primary Key which is common to both tables. By
creating the Relationship (in the Data Storage Layer), you ensure that information entered in
the child table will match information in the parent.
For example, if the Order table were the parent of the OrderDetail table, then it would ensure
that neither a User nor a Developer could enter Order Details for an Order that doesn’t yet exist.
Relationships constrain the Developers of the application as well because they are defined at
the Data Storage Layer.
To illustrate how Relationships in Vinyl work, we will be making a Relationship between the
Order table and the OrderDetail table, so that nobody can add an OrderDetail with an OrderID
that doesn’t exist in the Order table. Application Users would typically be restricted from doing
so simply because they can only add Order Details on an Order page, but adding this
Relationship ensures that nobody can do so.
1. Click the Action Drawer icon, and select Vinyl IDE
2. Click the Build your application button on the Build menu
3. Click the Data Storage Layer button
4. Click the Tables gear icon for your data source
5. Expand the Order table to view the Table Definition
21
VINYL USER GUIDE
6. In the Constraints Control Set, the Keys & Indexes icon allows you to view Primary Key
information for the table
7. The Relationships Control Set area is where you can view information about table
parent and child relationships
8. Click the One to Many arrow icon, and click the Create button
9. Set the Primary Table value to Order, and the Secondary Table to OrderDetail
10. Check that the Binding Keys information is populated with OrderID for both Columns.
Here the Primary Column represents the Primary Key of the parent table, and the
Secondary Column refers to the Foreign Key from the child table that points to the
Primary Key.
22
VINYL USER GUIDE
The Relationship between the Order parent and OrderDetail c hild tables
With this Relationship configured, it will be impossible to add to the OrderDetails table if
an Order does not exist. This should already be impossible to do through the application’s
UI, but now it will also be impossible for a Developer to make the same mistake or
accidentally allow Users to do so.
❖ Primary Table – the table which contains the Primary Key for the relationship
❖ Secondary Table – the table which contains the Foreign Key for the relationship
❖ Primary Columns – the Column in the Parent Table that is the Primary Key that will be
used to bind the relationship
❖ Secondary Columns – the Column in the Child Table that is the Foreign Key that points to
the Primary Column
Relationships: Cascade
After you create a Relationship you can change its On Delete and On Update options, which
cause certain behaviors when data is changed on the parent table. The On Update options
ensure that information that is updated in the parent table is reflected in the child table, and
On Delete ensures that data with no context (orphaned data) does not remain in the tables.
23
VINYL USER GUIDE
Both On Delete and On Update can either be set to Cascade, Null or Default, but we will only
review Cascade in this manual. Cascade means that child data will be updated at the same
time as its parent data.
To help illustrate how Cascade works with relationships, we’ll configure a Relationship
between the Order table and the OrderDetail table that is set to On Delete Cascade. Doing this
will ensure that deleting an Order will delete its Order Details as well. It is important to note
that selecting the correct parent to child relationship is critical to success. If we chose the
parent as OrderDetail in this example, deleting the details of an Order would delete the Order
itself. To create this relationship:
1. Click the Action Drawer icon, and select Vinyl IDE
2. Click the Build your application button on the Build menu
3. Click the Data Storage Layer button
4. Click the Tables gear icon for your data source
5. Expand the Order table to view the Table Definition
6. Click the One to Many arrow icon
7. Expand the Order relationship (created in the Relationships section of this manual)
8. Click the Edit button
9. Set On Delete to Cascade, which will cause a deleted Order to cascade down and
delete any associated Order Details
24
VINYL USER GUIDE
Joins
Up until this point we have spent a good amount of time in the Data Storage Layer. For the rest
of this training manual we will focus on the Business Logic Layer and the UI Layer. Up next we
will look at the Business Logic Layer, and review how SQL Union Joins work in Vinyl.
Union Joins
In Vinyl, SQL Union Joins produce a combination of two Select statements which target the
same Column. A Union Join combines the results of two different Columns (that have the
same name) from two different Tables into one unified Column. While most Joins utilize a Join
column, the Union Join does not. This is because other Joins require shared context between
the two tables to function, but a Union Join only requires shared columns.
For example, an Inner Join between the Product and Supplier tables would show every
Product along with their Supplier, while a Union Join between Product and Supplier tables
would show you a list of all the different SupplierID fields. This is because the Union Join
essentially shows all the results from the same column in two different tables, and these two
tables only share the SupplierID. Remember with Joins that sharing context and having the
same Column are two different criteria.
Let’s review creating a Union Join to find all the countries that exist in the Northwinds data
source. The Union Join will allow us to take all the country fields from any table with country
data and combine them to make a collection of every country that belongs to each record:
1. Click the Action Drawer icon, and select Vinyl IDE
2. Click the Build your application button on the Build menu
3. Click the Business Logic Layer button
4. Click the BOBJ icon for your data source
5. Click the Create button under Rules
6. Assign the Name Supplier (Countries for Supplier and Customer)
7. Select the Purpose as Business Object
8. Set the Target to Supplier
25
VINYL USER GUIDE
The Business SQL for the Union Join between Supplier and Customer tables
14. Click back to view details on this Rule and click the Edge Case Settings link
26
VINYL USER GUIDE
15. Click the Edit button and place a check in Select Distinct. We do this step in order to
not return duplicate values.
16. Click Save, and click the X to close the Edge Case Settings window
17. Click the Results button to verify the results of the Business Object. This is the
completed Union Join, and it will list all countries appearing in both the Supplier and
Customer tables.
27
VINYL USER GUIDE
CRUD
One of the most important Business Object Rules in Vinyl is the CRUD Rule. CRUD stands for
Create, Read, Update, Delete. As a Vinyl Developer you could not build a modern, intuitive
application without CRUD Rules. CRUD Rules are used to either insert, update or delete
records in a table. There are three different types of CRUD Rules in Vinyl:
❖ CRUD – used when you want to CRUD between two different databases
❖ CRUD Business Logic - will check and perform the different validations/actions as the
CRUD is executed
❖ CRUD XP – XP means cross platform and allows you to CRUD into different data sources the
application is linked to
CRUD Update
The first CRUD Rule to review is a CRUD Update, which has the action type Update and can
adjust existing records in a table. A CRUD Update can update an entire table’s records based
on a defined formula. It does this by adding numeric quantities or expressions against a record,
as well as changing a text entry from any existing value to a specified value.
In this chapter we will build a CRUD Rule since we want the Rule to run against the entire
database. The CRUD Rule we create will add 1 to the Quantity value.
1. Click the Action Drawer icon, and select Vinyl IDE
2. Click the Build your application button on the Build menu
3. Click the Business Logic Layer button
4. Click the BOBJ icon for your data source
5. Click the Create button under Rules
6. Assign the Name OrderDetail (Quantity +1), which follows Vinyl naming conventions
7. Set the Purpose value to CRUD
8. Set the Action to Update
9. Set and the Target to the OrderDetail table
10. Click the Save button
11. Click the SQL icon to define the logic for the CRUD Update
12. Confirm the OrderDetail table appears in the Tables panel
13. Click the PK button to add in the Primary Keys as Columns
14. Click Create in the Columns panel and enter the expression Quantity+1, assign the Alias
as QuantityPlus, and Target as Quantity
28
VINYL USER GUIDE
15. Although it is not necessary for the CRUD Update to function as expected, we will add
in the Quantity Column so we see that this works through the Results generated. Click
the Create button in Columns, and add in Quantity.
16. Click on the Results button, and confirm that the QuantityPlus column is adding 1 to
the Quantity column value.
29
VINYL USER GUIDE
CRUD Delete
In Vinyl, a CRUD Delete Rule is used to delete records from a table. Like other CRUD Rules, they
can be tied to a Control (like a button) to add functionality to an application. Since a User can
easily delete single records from the UI already, CRUD Delete Rules are mainly used to delete
many records at a time.
In this example, we will create a CRUD Delete Rule that will be applied to a button on the
Order panel of the Order page. The CRUD Delete Rule will delete all the Order Details
associated with an Order, as opposed to having a User delete each Order Detail record
manually one at a time.
1. Click the Action Drawer icon, and select Vinyl IDE
2. Click the Build your application button on the Build menu
3. Click the Business Logic Layer button
4. Click the BOBJ icon for your data source
5. Click the Create button under Rules
6. Assign the Name OrderDetail (Delete OrderDetail for Order)
7. Assign the Purpose as CRUD
8. Select the Action Delete
9. Set the Target as the OrderDetail table
10. Click the Save button
11. Click the SQL gears icon to define the Business SQL. Confirm that the OrderDetail table
has been added to the Tables panel.
12. Click the Create button in the Columns panel and add the OrderID column, and Target
OrderID. It is important to target the OrderID here, as you are stating that you only want
OrderDetail records with a specific OrderID value. Without this target you would delete
all OrderDetail records for all orders.
To activate the CRUD Rules we created, we will add them to an Event or create our own
Custom Event if the trigger is not one of the intrinsic ones. Unlike the intrinsic Events, a Custom
Event must be attached to a Control on the Application Layer to be executed. The CRUD Rules
we are creating will require Custom Events in order to execute when we want them to in Vinyl.
The first Custom Event we will create with a CRUD Rule will use the CRUD Delete Rule, where
we want it to delete OrderDetail records associated with an Order, if an Order gets deleted.
1. Click the Action Drawer icon, and select Vinyl IDE
30
VINYL USER GUIDE
31
VINYL USER GUIDE
EVENT TERMINOLOGY
11. At this point we have created the Event, but not attached the CRUD Rule to it. CRUD
Rules get attached as Actions, as an Event may execute one or more CRUD Rules. Click
to select the Delete Order Details event from All Events, and then click the Create
button in the Actions panel.
12. Click the drop-down menu for Rule, and select the CRUD Delete Rule OrderDetail
(Delete OrderDetail for Order)
13. In the Technical Help section, write a brief description of the Action, such as “Deletes all
Order Details for an Order”
14. Click Save
15. Under Explicit Bindings, verify that OrderID is the Source column and OrderID is the
Rule column. If that entry wasn’t added automatically, add it now by clicking the create
button.
32
VINYL USER GUIDE
The Action detail information for the Delete Order Details Custom Event
16. The Custom Event is configured and ready to be implemented on the Application Layer
Firing Events
After configuring the CRUD Rules, we attached them to Custom Events on a Business Object. If
we had attached them to intrinsic Events (Save, Insert, Update or Delete) instead of Custom
Events they would already be in effect. Because they are attached to Custom Events, we need
to add them to an application page via some type of Control. Events can be added to text,
image, list or button Controls. The CRUD Rules we defined are intended to be associated with
buttons.
Next, we will add the OrderDetail (Delete OrderDetail from Order) Rule to a button on the
Order panel of the Order page.
1. Navigate in the application to the Orders page
2. Click the chevron link from one of the Orders panel records to get to the Order page
3. Click on the Action Drawer, and select Design this page
4. Click to select the Order panel, and then click the Create button under Controls
5. Name the button Delete Order Details
33
VINYL USER GUIDE
6. Set the Control Type to Button. We don’t want a Data Column because this Control is
not trying to show any data.
7. Click Save
8. Click the Edit button in the Navigation and Actions panel
9. Select Delete Order Details as the Event
10. Click Save
Adding the Delete Order Details Event to a Button on the Order panel
11. Navigate back to the application Order page and refresh. Confirm that you now see the
Delete Order Details button on the Order panel.
34
VINYL USER GUIDE
12. Test the button by clicking on it, clicking Proceed, and refreshing the page. If the Rule
was properly configured, only the Order Details of the Order will be deleted.
In this section, we will make a Subquery Rule and then attach it to a CRUD Insert. We will
make a Subquery used to find the maximum OrderID of the Order table, and then add one to
it. This will be used by a CRUD Insert Rule in the next chapter, whose functionality in turn will
be copying an order. Typically, the OrderID is autogenerated by Vinyl, but because we are
inserting a new record, we need to provide it with a new OrderID. In most cases we would
generate a new OrderID with the NewUUID() function, which generates a UUID, but the data in
35
VINYL USER GUIDE
this case won’t work with that method. Here the OrderID is not a UUID, rather, it is stored as a
numeric field.
1. Click the Action Drawer icon, and select Vinyl IDE
2. Click the Build your application button on the Build menu
3. Click the Business Logic Layer button
4. Click the BOBJ icon for your data source
5. Click the Create button under Rules
6. Assign the Name Order (OrderID + 1)
7. Set the Purpose to Subquery
8. Set the Target to be the Order table
9. Click Save
10. Click the SQL gears icon to enter the Business SQL
11. Confirm that the Order table appears in the Tables panel
12. In the Columns panel, enter the expression Max(OrderID) + 1, and assign the Alias as
MaxOrderID. Here the MAX() function is used to search a column for its maximum
value.
13. Click on the Results button and confirm that you see one row with the MaxOrderID
column. The value should be the maximum OrderID value plus one.
36
VINYL USER GUIDE
The Business SQL for the Order (Copy Previous Order) CRUD Insert
18. Now with the CRUD Insert Rule configured, we need to attach it to an Event. We want
this CRUD to be on the same Order panel that the CRUD Delete was put on, so navigate
to your application’s Order page, click the Action Drawer and select Design this page.
19. Click the Business Logic icon for the Order panel
20. Click on the Events icon for the Order (Source) Business Object
21. Click the Create button under All Events
22. Name the Event Copy Order
23. Click Save, and close the pop-up
24. With the Copy Order Event selected in the All Events panel, click Create in the Actions
panel
25. Click the drop-down menu for Rule and select Order (Copy Previous Order)
26. Set the Binding Type to Explicit
27. Enter a short description on the Action into the Technical Help section, such as “Copies
Previous Order”. Click Save
37
VINYL USER GUIDE
28. In Explicit Bindings, Source should be OrderID and Rule Column should be OrderID
The Event Action for the Order (Copy Previous Order) CRUD Insert Rule
29. Now that your Rule is configured, it can be added to a new button named Copy Order.
Follow the steps we took for the Delete Order Details button, but instead add a Copy
Order button instead.
Validations
Validation Rules are used to ensure that the data entered in Vinyl is valid or correct, and also
when you want to ensure that a user enters data if it is required. Validation Rules differ from
configuring your Data Storage Layer to not allow nulls because you can customize the error
message the user receives with Validation Rules. When developing applications for companies,
you are often working with existing data that has been imported into Vinyl. If you were to set a
Data Storage Layer field to not allow null values, you may result in errors if data imported
contains nulls. This is another reason to configure a Validation Rule at the Business Logic Layer
vs. change the Data Storage Layer.
In this example, we will create a Validation Rule to make the FirstName column of the
Employee table a required field. This Rule will only require one table, the Employee table, in
the Business SQL configuration.
1. Navigate to the Vinyl IDE, select Build your application from the Build menu
2. Click on the Business Logic Layer button
3. Click the BOBJ icon for your application data source
38
VINYL USER GUIDE
The Business SQL for the Employee (FirstName Required) Validation Rule
At this point we have finished configuring the Validation Rule in the Business Logic Layer. Like
any other Rule we create in Vinyl, for this to work in the UI Layer, we need to attach it to an
Event in order for it to function. We’ll look at configuring this connection in the next chapter.
39
VINYL USER GUIDE
Next, we will step through configuring the Validation Rule we created for Employee
(FirstName Required) so that it is attached to an Event.
1. Navigate to the Vinyl IDE, select Build your application from the Build menu
2. Click on the Business Logic Layer button
3. Click the BOBJ icon for your application data source
4. Click to select the Employee table, on the left Tables panel
5. Under the Rules panel, click to select the Events icon for the Employee (Source)
Business Object
6. Click to highlight the Save Event in the tables panel, and then click the Create button
in the Validations panel
7. For Rule, select Employee (FirstName Required) from the list
8. Set the Type to Rule
9. Set the Severity to Error
10. In the Message field, enter First Name Required. This is the actual message that will get
displayed to a user when this Event gets triggered.
11. Set the Error Type to Fail on data returned
12. Set the Binding Type to Implicit
13. Use the Technical Help field to provide a brief description of the Validation, such as
“Employee’s First Name is Required”
14. Click the Save button
15. Test that the Validation Rule is properly configured by navigating to the application’s
Employees page and creating a new Employee record with an empty or null FirstName
field. Make sure that the error message displays.
40
VINYL USER GUIDE
UI Layer
Now that we’ve built out a good amount of Business Logic for our application, we’ll look at the
UI Layer and practice a few design elements we can add into the application that we haven’t
reviewed yet.
Board Panels
Board Panels function similar to Multi-row Panels in that they also allow multiple records of
data to be displayed, but different in that rather than showing all the records as rows on a grid
(MRP) they display as many Single-Row Panel looking boards on a page. Board Panels are
mostly used for aesthetic reasons. Board Panels do not support inline Create, Edit or Delete,
but do support linking to another page where you can edit values.
In this example we will convert the existing Employees page, which is currently a Multi-row
Panel Type, into a Board Panel Type.
1. Navigate to the Employees page in the application
2. Click on the Action Drawer, and select Design this page from the menu
3. Click the pop-up icon to expand the Employees Multi-row Panel
4. Click the Edit button, and change the Type value to Board Panel
5. In the Intrinsic Control Options area, change the Create Mode value to be Link to Page
6. Click the Save button
41
VINYL USER GUIDE
7. Test the updates by Running the page or refreshing the application’s Employees page.
8. In the current state, the Employees page has too many Controls on it for an optimal
Board Panel Type page. Board Panels look best with just a few Controls. Go ahead and
remove all Controls except: Photo, Full Name, Title, and Email.
Chart Panel
Vinyl supports multiple Chart Types on Pages, using the Chart Panel Type. To use Charts in
Vinyl, you typically need to have an aggregate value defined in a Business Object. We don’t yet
have an aggregate value defined, so for this example we will first make a new Business Object
to use and then add a new page for a Chart. Here we will be adding in a Column Chart that will
display Order Total by Employee.
42
VINYL USER GUIDE
The Business SQL for the OrderDetail (Total by Employee) Bus iness Object
15. Click the Results button and check to see the results are as expected
Create a Chart
Now that we have a Business Object with an aggregate value defined, we can add in a new
page to the application that will contain a Chart.
1. From the application, click the Action Drawer
2. Select Add a page
3. Assign the Name Order Total by Employee
4. Click the Save button
5. Click Create under Panels, and select the Type Chart Panel
6. Select the Chart Type as Column
7. For the Source Rule, select the Business Object we just created, which is OrderDetail
(Total by Employee)
8. Click the Save button
9. Click Create under Controls, and select EmployeeID as the Column
10. Select Category as the Control Type. Category represents the x axis for Charts in Vinyl.
11. Under List Control Properties, select Employee (Full Name List) for Data Object
12. Set the Key as EmployeeID
13. Set the Title as Employee
14. Click Save
15. Click Create to add another Control, for Column select SumLineTotal
16. Set Control Type to Value. Value represents the y axis for Charts in Vinyl.
17. Click Save
18. Run the page to confirm that the Chart looks as expected
43
VINYL USER GUIDE
Badging
Badging allows you to apply a small badge to Buttons in Vinyl. Badges work similar to how
they do on smartphones, where they create small notifications in the top right corner of a
button that gives you a dynamic number representing something. For example, you might
have a badge notification of 20 next to an Orders button, indicating you have 20 new Orders.
Badges in Vinyl are configured using information from a Column, such as an Order Count, and
put on a button to provide users with a view of their underlying data in a very convenient way.
In this example we will apply a Badge to the Orders button on the Customers page. We are
going to use Badging to display the count of orders on the Orders button. If you do not have an
Orders button Control appearing on your Customers page, go ahead and add one in prior to
following these steps.
1. Navigate to the Customers page in the application
2. Click the Action Drawer, and select Design this page from the menu
3. Select the Customers panel, and click the pop-up icon to expand the Orders button
4. Click the Edit button under Miscellaneous, and select CountOrders as the Badge
Source
5. Click the Save button
6. Test that the badging worked correctly by navigating back to the application
Customers page and refreshing. You should now see the badge and its corresponding
information appear on the Orders buttons.
44
VINYL USER GUIDE
Reach
Reach is a row level security feature in Vinyl that you can implement in applications. It allows
you to restrict the data that certain Users have access to throughout the application. Users will
still be able to navigate to the same pages, but the data displayed on each page will be
customized to only show the data that the individual User should be seeing.
In the example we look at here for using Reach in our Northwinds app, we will apply Reach to
restrict the Customer records shown to a User based on a Region : Employee mapping.
Following this type of implementation logic, often the UserID Column is what needs to be
added to Table(s) where you want to restrict information by a value in that Table. Other values
than UserID can be used, but our example will work with UserID.
To use the UserID Column referred to in this example, we call this from the User_Read data
object that ships with Vinyl. First we’ll walk through establishing a connection to the Vinyl data
source that contains the User_Read object we need:
1. From the app view, click the Action Drawer icon and select Design a data source
2. Click Create
3. Click the dropdown menu in the Name column and select Default – Vinyl (Sealed)
4. Click the checkmark icon to save
45
VINYL USER GUIDE
Now that we have added the Vinyl (Sealed) Data Source to our application, we can add in the
Columns that need to get added to Tables for this particular example to work.
The Region table that we created earlier in the Vinyl Introduction Manual will be used to
restrict the Customers that an Employee User can view, based on the market they are assigned
to: East Coast or West Coast. We also added the RegionID column to the Employee table as a
foreign key, but now we will add it to the Customer table.
For Reach to work with this example, it is not required to define the Relationship RegionID has
in the Customer table (in relation to the originating Region table), however, it is considered
best practice in data base design to do so. Here we will define the Relationship information.
1. Locate the Relationships area on Table panel
2. Click on the Many to One up arrow icon
46
VINYL USER GUIDE
3. Click Create
4. Set the Primary Table value to Region. This indicates the source Table where the key
originated from.
5. Confirm that the Secondary Table value is Customer
6. In the Binding Keys section confirm the Primary Columns and Secondary Columns
values are RegionID
7. Click Save
47
VINYL USER GUIDE
Note: In this case, we do not define a Relationship between the keys because the User_ID
comes from a separate database than the Employee table.
48
VINYL USER GUIDE
In the Introduction Manual we added a Region List Object to the Employee Page and
associated some of our Employees with the available Regions from the Region table. Now that
we have added RegionID to the Customer table and the Customer (Source) Business Object,
we can add a Region List Control to the Customer Single-Row Panel Pop-up page as well.
1. Navigate to the Customers page, and click the Pop-up icon to view the Customer Single-
Row Panel 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 Control Type to List
7. Select Region (List) as the Business Object Set
8. Set the Key to RegionID
9. Set the Title to Region
10. Click Save
11. Close out of the Control window by clicking the X icon
12. Edit the Position value for the Region Control so that it appears before the Customer
location information.
13. Return to the app, refresh the page, and then open a dozen or so Customer records and
use the Region List Control we just created to select U.S. for half of them, and Non-U.S. for
the other half.
49
VINYL USER GUIDE
Now that we have added UserID to the Employee table and the Employee (Source) Business
Object, and connected the Vinyl Data Source, we can add a User List Control to the Employee
Pop-up page to associate an Employee’s record with their User Name.
1. Navigate to the Employees page, and click on the Pop-up icon to view the Employee
Single-row Panel
2. Click the Action Drawer icon
3. Select Design this page from the menu
4. Click Create under Controls
5. For Column, select UserID
6. Change the Control Type to List
7. Under List Control Properties, Select User_Read as the Business Object Set
8. Set the Key to UserID
9. Set the Title to UserName
10. Click Save
11. Close out of the Control window by clicking the X icon
12. Edit the Position value for the Region Control so that it appears just under the Photo
control.
13. Return to the app and refresh the page. Use the User List Control just added to associate
your User Name with one Employee record.
The Employee Single-row Panel page with Region List and User Controls Added
50
VINYL USER GUIDE
Now that we have some Employees and Customers associated with Regions, and a UserID is
added to the Employee table, we are ready to move to the Business Logic Layer. Here we will
create a Reach Rule to check the User’s Reach, and then register the Reach Rule on a Business
Object so that Pages built out of it filter the results they display based on a logged in User’s
Reach.
1. From the app Employee page, click on the Action Drawer and select Design this page
2. Click on the Business Logic icon for Employee (Source)
3. Click the Create button under the Rules panel
4. Assign the Name Employee (Reach by UserID)
5. The Purpose will be Reach
6. The Target should be set to the Employee table
7. Click Save
8. Click the SQL cogs icon to define the Business SQL for this Business Object
9. Click the Create button under Tables and add in the Employee and Region tables
10. In the Columns panel, add the RegionID from the Employee table
a. Click the pop-up icon for RegionID, and set Usage Type to Reach Token
11. Click Create button again for the Columns panel and add in an Employee Name field
for debugging purposes. E.g., E.FirstName||' '||E.LastName
12. In the Where panel, set the UserID from the Employee table equal to Who(‘UserID’).
13. Click the Results button and verify that you see the expected record(s) returned
51
VINYL USER GUIDE
Reach Registration
Before we can use the Reach Rule on a page and see it in action, we need to explicitly register
our Reach Rule on a data object. In this case we will join our Reach Rule to the data object that
the Customers page is using. This should be the Customer (Order Count) Business Object.
1. Navigate in the app to the Customers page, click on the Action Drawer and select
Design this page
2. Click the Business Logic icon for the Customer (Order Count) Business Object
3. Double-click the Customer (Order Count) Business Object, and click on Edge Case
Settings
4. Click on the Reach icon
5. Click the Create button
6. For the Rule value, select the Reach Rule created. For example: Employee (Reach by
UserID)
7. Binding Column is required information, this should reflect the Column you set as
Reach Token on the Reach Rule (RegionID).
8. Click Save
9. Now test by navigating to the Customer page in the application and refresh the web
browser. You should now only see Customer records from the Region assigned to your
User.
10. To help confirm the records are correct, add Region ID to the Customer page panel
Controls.
52
VINYL USER GUIDE
Bridge
Fundamentally, a Bridge can be thought of as the connection between a launching page, and
a landing page. A Bridge is an application level concept which enables a designer to send a
message to a user. This message may have multiple options which define how the user can
respond to the message. When options are present in a Bridge, the user's response is
automatically tracked by Vinyl.
Message Types
Currently a Bridge can use one of the following message types:
• Email - Not surprisingly, an email.
• SMS - An SMS message sent and received by the Twilio service.
• Vinyl Alert - A popup which shows up in the user's browser when they are logged into
Vinyl. Formerly called a Notification.
All message types support adding options which provide ways to for the user to respond to a
message. For Emails and Vinyl Alerts, URLs are included in the message that link back to Vinyl.
In the case of the SMS delivery type, you can also reply to an SMS with the name of the option
to run the associated event.
Future releases of Vinyl will likely support sending messages to REST servers.
Options
Bridges can have 0 or more options. When a Bridge contains no options, there is no expected
user response and consequently, no tracking of the user's response is provided. No links will be
added to the outgoing message. This is considered an Informational bridge.
When a Bridge contains 1 or more options, a message is sent with URL links back into Vinyl that
allow the user to respond in some way. The user's response to the message (i.e. which option
they selected) is tracked by the Bridge.
Configuration
For a page to be eligible for either option above, the page must be marked Shared.
53
VINYL USER GUIDE
As an example, an Admin may execute an Event that causes an email to be sent to an End
User. The email has some text and three buttons in it:
1. Review - Clicking Review can bring the User to a specific page in Vinyl
2. Approve - Clicking Approve can bring the User to a different page AND execute an
Event against some data objects in the page
3. Reject - Clicking Reject can bring the user to a different page AND execute an Event
against the same page or a different page's data objects
The Event must be executed before the page is rendered as it may affect data that is contained
in the panels on the page. To execute an Event, the designer must:
• Make the Link To page Shared.
• Include the Event in either the Data Object for the page or as one of the Single-Row
Panel data sources on the page. Further illustration of this point is available in the Data
Object Event Binding section below.
Vinyl limits the Events that can be bound to a link. Specifically, this limitation only allows for
events that belong to a Data Object / Table that is bound to an unbound Single-Row Panel on
the target page. For example, let's consider a page that has 6 Single-row Panels:
• Customer -> CustomerAddress -> CustomerMap
• Employee -> EmployeeAddress -> EmployeeMap
In this example, Customer and Employee panels are not bound to any other panels on the
page. Therefore, a designer can choose events from those two panels data sources (along with
a page data object if one is specified).
Vinyl also limits the events that can be bound to non-system events. For example, the designer
cannot link back to the Save, Insert, Update or Delete events.
Bridge Registration
Linking to a Bridge
The Bridge Registration page in the Vinyl IDE allows the designer to link a Bridge to an
application. This is a 1 to 1 relationship. Additional information about the Bridge message can
be configured within the Bridge Registration.
Message Creation
The Bridge message can be defined in the Template section of the Bridge Registration page.
This is the main content of the Bridge itself.
54
VINYL USER GUIDE
Substitutions are performed on the Template and use the {{fieldname}} syntax. Substitutions
may add an optional url flag to indicate the value is an url and requires url-encoding e.g.
{{fieldname|url}}.
In which case CustomerName must be contained in the Bridge rule's columns along with the
other required fields.
For emails, a Subject can be specified in the Bridge Registration page. The Subject field also
supports substitutions.
Translations
Bridges support rudimentary translations. There are three fields which are used for translations:
1. Bridge Option Name
2. Bridge Registration Message
3. Bridge Registration Subject (for Emails)
When creating the Bridge message, Vinyl will attempt to find translations for each of these
fields, assuming that their content specifies the corresponding translation key. The designer
also needs to add the keys to the translation bundle for the app manually (they are currently
not imported automatically for an app). Care must be taken with the Template field to add the
translation key as a raw string and not as HTML. There is a "code" icon at the bottom right of
the Bridge Registration Template field which allows you to directly edit the string.
Limitations
The event executed in the option link belongs to the Page Data or a Single Row Panel Data
Object. Currently, we do not display any validation results or post messages for page level
events. In other words, the event runs first, when it completes, the user is redirected to their
page. By the time they arrive at their page, the event results are lost.
Therefore, if the event has a post message or fails validation, the system will not show those
results to the end user. The designer can easily workaround this by displaying data in their
panels that changes based on the successful execution of an event.
Because of the above limitation, validation warnings will cause an event to not execute. We do
not have a UI in place that allows for the user to accept or reject the warning.
55
VINYL USER GUIDE
Common Columns
These columns are common across the Bridge public data objects:
Bridge_Email_Send
The Bridge_Email_Send public data object is similar but not entirely consistent with the Smtp
Email Plugin functionality. The columns for the Bridge_Email_Send public data object are as
follows:
Bridge_SMS_Send
The Bridge_Sms_Send public data object is used for sending SMS. The columns for
the Bridge_Sms_Send public data object are as follows.
56
VINYL USER GUIDE
Bridge_Vinyl_Alert_Send
The Bridge_Vinyl_Alert_Send public data object is similar but not entirely consistent with
the Create_Notification public data object. The columns of
the Bridge_Vinyl_Alert_Send public data object are as follows:
Create a Bridge
57
VINYL USER GUIDE
11. Note that we add "CustomerName" so that we can later use it as a substitution
parameter in our Bridge message.
Customer: {{Customer}}
6. Click Save
58
VINYL USER GUIDE
Register Bridge as an Action with an Event. In this case, we're assuming the Event is associated
with a button on the launching page. We'll also assume the event is called 'Request Approval'.
1. Navigate to the Event for the Data Object. For example: Vinyl IDE > BUILD your
application > Northwinds > Pages > Customers > Customers Panel
2. Go to the Action Drawer > Design this page > click into the Business Logic icon
3. Click on Events for your Data Object
4. Select the Event. For example: Request Approval
5. Create an Action
6. Select Bridge as the Action Type
7. Select the Bridge we created in the previous step. For
example: CustomerRequestApprovalAlert
8. Click Save
9. Verify that the Explicit Bindings are correct. For example: CustomerId – CustomerId
Test it out!
At this point, the Bridge is completely set up. Navigate to your page, and click the button that
runs the Bridge event. All Vinyl users on the system should see a pop up with the Bridge
message.
59
VINYL USER GUIDE
Setup Twilio
60
VINYL USER GUIDE
Create Bridge
Create a rule that targets a Bridge public data object.
Steps to Create Bridge
1) Navigate to Rules
a) For example: Vinyl IDE > Build your application > Business Logic Layer > Northwinds >
Rules
2) Create a new Business Rule
3) Select Bridge as the Purpose
4) Select Bridge_Sms_Send as the Target
5) Click Save
61
VINYL USER GUIDE
Note that we add "CustomerName" so that we can later use it as a substitution parameter in
our Bridge message.
5) Click Save
62
VINYL USER GUIDE
Test it!
At this point, the Bridge is completely set up. Navigate to your page, and click the button that
runs the Bridge event.
This concludes the Vinyl Advanced 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
Zudy Clients should access the Knowledge Base from within Vinyl, go to the Action Drawer
menu and select Support. Zudy employees can access the Knowledge Base either via the Vinyl
Support link or by going to http://wiki.zudy.com and clicking the Azure button to authenticate.
63