Introduction to Vinyl 3.3: Introduction¶

Course Objective¶

This course covers the basic skills needed to develop with Vinyl, as well as Vinyl methodology used to develop and maintain applications.

In this course, we build a simple order fulfillment Vinyl application using the Global Imports database we build first as the application data source. We walk through the flow of data from the data layer to the business layer and, ultimately, to the UI layer in Vinyl, so you see how data becomes an application.

The goal of this course is to make you feel comfortable navigating Vinyl, building a database in the data layer, building business rules, building and editing simple pages and charts in the UI layer, and maintaining pages in a Vinyl application.

Vinyl Overview¶

Vinyl is a browser-based development platform that allows multiple users to create web applications. These applications can perform a host of company internal and external services and workflows. Vinyl can be used for improving nearly every aspect of conducting business.

Vinyl is platform-agnostic. This means it runs on any modern browser and is fully mobile compatible. It can be accessed on any operating system and connect to data sources from virtually every major database server provider. Furthermore, the Vinyl platform is developed with responsive design. This means the platform will run and be viewable on any size screen or resolution and is automatically optimized for mobile.

Log In to a Vinyl Instance¶

To begin using Vinyl, access the Vinyl instance URL and log in.

To access the training instance, you will need a current standard web browser connected to the web. You'll be provided a URL to use for the Vinyl training instance, along with a username and password to authenticate as a user. Enter the assigned User Name and Password, then click the Sign In button:

Navigating in Vinyl¶

Vinyl uses responsive web design in its layout, allowing applications to have the best interactive viewing experience across multiple platforms. This is done with flexible, proportion-based grids, which use relative units based on percentages instead of fixed units like pixels. Panels are grouped and displayed based on their priority, a value that can be designated by the application developer, with lower numbers being higher in priority. This means that when Vinyl applications are viewed on a mobile device, only the panels with the highest priority are displayed on screen. In addition, when an application user is working on a smaller screen, additional navigation may be necessary to access all the panels in the application.

The Vinyl home page, or Site Menu, will show any applications the user has access to, arranged by menu priority:

Primary navigation in Vinyl is accomplished using the Action Drawer menu , located in the top right of all screens once logged in. Depending on where you are in the user interface, and the permissions you have access to, the menu presents you with dynamic options for further navigation.

Action Drawer¶

Located in the top right corner of the screen, the Action Drawer menu allows you to quickly navigate to some of Vinyl's most-used pages. Depending on your user type, you will see the following navigation:

Icon	Label	Description
	Site Menu	View and run apps available on the server.
	Live Designer	Opens design mode within the same browser window, for the page currently displayed. Used to edit a page or its panels and controls.
	Design Center	Opens the Design Center where development processes can be designed.
	Print Page	Prints the current page.
	Documentation	Access the Vinyl Spotlight resource center for the Vinyl Community.
	View User Profile	Manage user profile properties and contact information, as well as change password.
	Sign Out	Sign out of the app environment.
	Active App Users	View page view logs, a dashboard style report page containing data about user engagement with Vinyl apps.
	Trace Activity	View diagnostic data to help troubleshoot issues.
	Service Status	Active status monitor, navigates to the Monitoring page with utilities to manage and view information on environment status.
	Localization Settings	Allows the user to set language, locale, and time zones for the Vinyl environment.
	Audit	When the audit shield is displayed, indicates that Vinyl is protecting and monitoring data. Vinyl handles permissions to ensure you see data only that you are authorized to view, and any changes to data are recorded for reference.

Additional Vinyl Navigation¶

These additional navigation controls are available:

• The back arrow and title at the top left display the previous page you were on and return to it when clicked.

• The title to the right of the back button shows the title of the current page.

  Note

  The page title can be hidden by design.

• The Create button 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.

• The browser's back button will return you to the previous screen you were on in Vinyl. This can be a very useful tool when developing and maintaining apps.

For a deeper overview of the Vinyl workspace and components used building an application, see the Vinyl User Guide.

Design Center¶

The Design Center provides quick shortcuts to everyday tasks required for building and maintaining apps:

The Design Center provides access to the following commonly used areas in application development and maintenance:

• Tables: View and maintain app tables and the database schema.

• + Table: Create a new table and autogenerate pages to add to an app.

• Rules: View and maintain all app rules.

• + Rule: Create a new business rule.

• Users: View and maintain all existing app users.

• Add a User: Create a new user to add to the app group.

• Pages: View and maintain app pages and the Site Menu.

• + Page: Create a new page from the page wizard.

• Menus: View and maintain menus to organize app pages.

• Settings: View and maintain application-related settings.

Application Look and Feel¶

The Settings button in the Design Center allows you to modify an application name, associated image, and/or theme:

• Application Name: Name assigned to the app. Visible by default.

• Select an Image: Image used to represent the app on the Site Menu.

• Select Theme: Associated theme providing customization over the look and feel.

Toolbar Shortcut Icons¶

Shortcut icon links are available from the Design Center toolbar to commonly accessed areas for app development. These shortcut icon links include:

• Users: Navigate to the user authentication and data source authentication area to manage and maintain access and configuration.

• Look & Feel: Access and manage information related to customizing the look and feel of an application: themes, images, templates, and widgets.

Vinyl Layers¶

Building applications is accomplished using three distinct layers defined in Vinyl: the Data Storage Layer, Business Logic Layer, and UI Layer. These layers are color-coded in the platform screens to help visually distinguish between them. The data layer is presented in blue, business layer in red, and UI layer in green.

Access to all three layers is available from the Design Center.

Data Storage Layer¶

The Data Storage Layer contains all the tables and columns where the physical data is stored. From this layer you can view all data sources on the server, create and delete data sources, build and modify tables and columns, and manage keys, indexes, and relationships between tables.

Business Logic Layer¶

The Business Logic Layer is used to expose your data as well as allow you to manipulate and filter data from the tables in the data layer. From this layer you can define business rules and objects, create custom jobs that can fire on events on a scheduled basis, and create security roles to gate users within applications.

UI Layer¶

The UI Layer is where you build the actual application and customize the user interface. From the UI layer you can view all applications on the server, create new applications, design and modify the user interface of applications, and even cautiously delete an application.

Vinyl Success Central¶

For more information on working with Vinyl, see Vinyl Success Central. Vinyl Success Central contains all public-facing Vinyl technical documentation and gets updated regularly and for each release cycle. To access the documentation website from within Vinyl, go to the Action Drawer menu and select Documentation.

Global Imports Database Schema¶

The Global Imports database schema below shows the tables and corresponding columns that have been included in the application. Following Vinyl methodology, the first column in each table is the primary key and always has ID appended to the column name. For example: the Customer table primary key column is named CustomerID. Arrows shown in the database schema represent entity relationships existing with primary key (PK) and foreign keys (FK) within the database structure: