1. Shelley B. Chase Software Fellow, Progress schase@progress.com

2. 11/21/2017
Kendo UI Builder by Progress is a productivity tool for creating a modern responsive Web UI for an OpenEdge application
Kendo UI Builder by Progress is a tool for creating a responsive web UI for an OpenEdge application.
Progress

3. Modernize the User Experience for ABL Desktop Apps
Many Starting Points…
CHARACTER
GUI
ADM and ADM2
Dynamics
WebSpeed
GUI for .NET
…To One Destination
Starting points…
CHARACTER
GUI
ADM and ADM2
Dynamics
WebSpeed
GUI for .NET
Destination:
UI Definition stored in meta-data (future-proof)
Automated UI Generation based on
App framework template and UI component templates
Proven data model for business applications
Datasets with before-image support
Standards-based, responsive Web Application for Web Browser and Tablet form factors

4. Building Business Applications of the Future
JavaScript Data Object (JSDO)
OpenEdge and
Telerik
Development
Environment
OpenEdge
Mgmt
Data Object Services (WEB or REST)
Progress Application Server for OpenEdge
OpenEdge AppServer
OpenEdge BPM
OpenEdge RDBMS
OpenEdge DataServers

5. Building Business Applications of the Future
JavaScript Data Object (JSDO)
OpenEdge and
Telerik
Development
Environment
OpenEdge
Mgmt
Data Object Services (WEB or REST)
Progress Application Server for OpenEdge
OpenEdge AppServer
OpenEdge BPM
OpenEdge RDBMS
OpenEdge DataServers

6. Web App Model Web Application User Context Application Module
login dialog
Landing-page
User-defined Modules
Views
Data Source
JSDO instance
Web Application
CRM
Module
Customers
View
Customer
Data Source
Orders
Order
Human Resources Module
Employees
Employee Data Source
Application (internal)
Login Page
Data Providers (Data Object Services)
App / user context

7. Demo: Kendo UI Builder Web App

8. Modern Web Application – Login

9. Demo – Basic Employee Grid

10. Demo – Customer Grid and Form

11. Demo – Edit Customer Record

12. Demo – Separate Employee Form

13. Demo – Customized Employee Grid

14. OpenEdge Business Entities and Data Object Service

15. Server-side Data Objects (Business Entities)
Encapsulate data and data transactions
Source code Annotations
Define the Resource and data model
Specify the methods to expose as the data object
Prescriptive method signatures (REST RPC)
Read-only
CRUD (Create, Read, Update, Delete)
CRUD + Submit
Count
Business logic with free-form signatures (REST RPC)
Invoke

16. Data Object Service Annotations
File Level: Resource
@progress.service.resource FILE(name="Customer", URI="/Customer", schemaName="dsCustomer", schemaFile="Sports/AppServer/customer.i").

17. Data Object Service Annotations
File Level: Resource
@progress.service.resource FILE(name="Customer", URI="/Customer", schemaName="dsCustomer", schemaFile="Sports/AppServer/customer.i").
Method level: CRUD +Submit +Invoke
@progress.service.resourceMapping(type="REST", operation="read", URI="?filter=~{filter~}", alias="", mediaType="application/json").
@progress.service.resourceMapping(type="REST", operation="invoke", URI="/CheckCredit", alias="", mediaType="application/json").

18. Data Object Service Annotations
File Level: Resource
@progress.service.resource FILE(name="Customer", URI="/Customer", schemaName="dsCustomer", schemaFile="Sports/AppServer/customer.i").
Method level: CRUD +Submit +Invoke
@progress.service.resourceMapping(type="REST", operation="read", URI="?filter=~{filter~}", alias="", mediaType="application/json").
@progress.service.resourceMapping(type="REST", operation="invoke", URI="/CheckCredit", alias="", mediaType="application/json").
Data level: Field
@openapi.openedge.entity.field.property (field=“Balance", name="semanticType", value=“Number“, min=0, max=5000).

19. Semantic Type Defines what a field means within common field types
CHARACTER could be Text, , Password, URL… 
UI framework agnostic
ABL DataType
Semantic Type
BLOB
Image or File (TBD)
CHARACTER
Text
CLOB
RichText
DATE
Date
DATETIME or DATETIME-TZ
DateTimeTZ
DECIMAL
Number
INT64 or INTEGER
Integer
LOGICAL
Boolean
Additional Semantic Types
Currency
Internal
Password
Percent
Phone Number
URL
Custom Semantic Types
FiveStarRating
CountryFlag

20. Semantic Types Temp-table Field Data Object Catalog
FIELD Balance AS DECIMAL INITIAL "0" LABEL "Balance"
Data Object Catalog
"Balance": {
"type": "number",
"ablType": "DECIMAL",
"default": "1500",
"title": "Available Balance",
"semanticType":{
type: "Number", "min": 0, "max": 5000 }

21. Demo – Business Entities and Service Interface

22. Demo – New Business Entity

23. Demo – New Business Entity

24. Demo – Business Entity Schema

25. Publish the Data Object Service

26. Data Service Catalog

27. Data Service Catalog

28. CustomerBE Records

29. CustomerBE Records

30. Kendo UI Builder

31. Kendo UI Builder: Creating a Web App
<KUIBInstallDir>\Workspaces.json

32. Kendo UI Builder: Modules
User-defined functional area
Loaded “on demand”
Top-level navigation element
Single application-level user context

33. Kendo UI Builder: Data Providers
Binds to an OpenEdge Data Object Service
One or more resources
ProDataSet (recommended)
Temp-table

34. Kendo UI Builder: Data Sources
Maps to a single table within a resource
Catalog defines schema and operations

35. Kendo UI Builder: Views
Pre-defined templates
Data-driven UI
Built-in CRUD + Submit
Display data
Optionally edit data
Saved as meta-data

36. Demo: Kendo UI Designer

37. Demo – New Web App

38. Demo – Main Design Page

39. Demo – Edit Application Module

40. Demo – Add Data Provider

41. Demo – Edit Data Source

42. Demo – Add Module

43. Demo – Add View

44. Demo – Edit View

45. Demo – Build and Preview

46. Demo - Preview

47. Demo - Preview

48. Generated Web App

49. Build Process Combines Templates with Meta-data
Data Source Metadata
View Templates
Web App Template
Module Metadata
Editor Type Templates

50. Web App Architecture (V1)
Data Object
Service
Catalog

51. Kendo UI Builder: Web Application Architecture V1
Prescriptive Application framework
OERA/CCS-compliant n-tier application model
AngularJS 1.5 for Single Page Applications
Session management for each server connection UI
Kendo UI
Bootstrap Responsive UI
Data and business logic
Authentication models Anonymous, Basic and Form
Data Object Service catalog
JSDO Data Source

52. Generated Web App: Deployment Settings
Edit for deployment URIs

53. Customization and Extension Points

54. Web App Extension Points
App logo
Properties in Designer
Custom HTML Sections
Row Templates
Event JavaScript functions
CSS and Themes
Modify existing Editors
Modify existing View templates
Build custom Editors
Build custom View templates
Custom App Framework (very ambitious)
Point and Click
Technical Knowledge Required
Familiar with HTML, JS and CSS
Complex JS, AngularJS, EJS-templates

55. Web App Meta-data
UI Meta-data saved for Modules/Views and Data Providers
<webAppDir>\meta\*

56. Extension Point 1: App Level
App Logo
Custom Properties for:
Application logo
Module icon, label, description
(Future) Themes/CSS
Saved to:
<webAppDir>\src\assets\images\<imageName>.png
<webAppDir>\meta\app.json

57. Extension Point 2: View Properties
Custom Properties for:
Title
Data Provider / Source
Grid columns
Row Template
Sorting, filtering, paging
Saved to:
<webAppDir>\meta\modules\<moduleName>.json

58. Extension Point 2: Data Provider Properties
Custom Properties for:
Service URI
Catalog URI
Authentication Model
Auto-create Data Sources
Saved to:
<webAppDir>\meta\dataProviders\<dataProviderName>.json

59. Extension Point 2: Data Source Properties
Custom Properties for:
Included fields
Field order
Field label
Editor type
Client-side or server-side processing
Count Function
Saved to:
<webAppDir>\meta\dataProviders\<dataProviderName>.json

60. Extension Points Utilize the \src Directory
This is your private area
Will never be overwritten
Always included during generation
AngularJS connections built-in for html and scripts directories

61. Extension Point 3: Custom HTML Sections
Views have custom sections
<webAppDir>\src\html\<moduleName>-<viewName>\*.html

62. Extension Point 4: Row Templates
Customize Grid View look and feel
Function – view-factory.js
Id – topSection.html
Take a look at Kendo UI demos and samples

63. Extension Point 5: Events
Views have events
Generic: Init, Show, Hide
View-specific: Row Select, Login

64. Extension Point 5: Event Functions
JavaScript
<webAppDir>\src\scripts\<moduleName>-<viewName>\view-factory.js

65. Extension Point 5: Event Functions

66. Extension Point 6: CSS \ Templates

67. Extension Point 7: Editor Types
Global and Project level
<webAppDir>\resources\components <KUIBInstallDir>\resources\components

68. Semantic Type to Editor Type Mapping
<KUIBInstallDir>\semantic-types-map.json

69. Global App Framework Template
<KUIBInstallDir>\resources\webapp
Not recommended – major changes required

70. Global: Data View Templates
<KUIBInstallDir>\schemas\components\<viewname>.json
<KUIBInstallDir>\generator-starnova\generators\app\resources\components \<viewname>\*
viewname = data-grid, data-grid-form, data-grid-separate-form

71. View Meta-data
<webAppDir>\meta\modules\<viewname>.json

72. Generated Data View – AngularJS

73. Generated Data Source – AngularJS

74. Data Sources Backed by the JSDO
JSDO manages hierarchical and transactional data updates to server
Invoke operations can be called on JSDO instance
var customerDS = new kendo.data.DataSource({
transport: {
jsdo: “CustomerBE” },
error: function (e) {
console.log('Error: ', e); }
});
Telerik uses a Kendo UI DataSource to bind to data. We have creates a new JSDO “dialect” for the Kendo UI DataSource for OpenEdge.
One thing to note about the Kendo UI DataSource is that it only supports a single table. For a JSDO DataSet with more than one table, you would create a DataSource for each table. The DataSource updates the JSDO memory which manages hierarchical and transactional data updates to server.
This sample shows that by specifying the resource name CustomerBE, a JSDO with a single table is created on the fly.

75. Deployment and Runtime

76. Web UI Runtime Architecture
Data
PAS for OE Web Handler
PAS for OE REST
Classic A/S REST
Web UI
PAS for OE Web Server
Web Server
JSDO
JSDO
JSDO
PAS for OE
Spring Security
…/rest/Employee
PAS for OE
Spring Security
…/web/Cust
PAS for OE
…/static
Spring Security
…/web/Order
AVM
AVM
Business Entity
C:\Progress\116\wrk\oepas1\work\SportsApp
[1/12/ :29 AM] Edsel Garcia:
JSDO WebHandler
Business Entity
OEDB

77. How the Kendo UI Builder Compares to Other Options
11/21/2017
How the Kendo UI Builder Compares to Other Options
Future-proof: Meta-data and template driven
Other Web UI Design tools lock you into one UI technology
Templates can be customized and extended for your needs
Rapid UI development based on data schema
Data-driven views with CRUD features accelerates development of maintenance screens
Award winning Kendo UI controls to present the data
Built-in extensibility options for customization
Purposed for OpenEdge business logic and data
JSDO offers client-side dataset features like change tracking and relationships that map to ProDatasets
Invoke, Submit and Count operations provide much more than a generic REST service
A good place to start, before we go over how to use the Kendo UI Builder, is with the question - how can the Kendo UI Builder add additional value to a company.
There have been thousands of OpenEdge business applications created over the last thirty years –
that are currently being used in by business throughout the world.
Each of these applications represent a valuable company resource. For a business, an OpenEdge application encompasses the business logic and data that provide the engine for running the company.
However, as technology continues to evolve, access to these valuable resources must also evolve.
This is where the value proposition of the Kendo UI Builder comes in to the picture.
Progress saw the need to find a way to open up access to the data and logic in existing OpenEdge application in new ways via the internet.
This was the impetus to creating the Kendo UI Builder.
by moving the application user interface to the web.
In addition it doesn’t just move it to the web, but the interfaces is implemented selected Kendo UI components. Kendo UI is noted for providing state of the art, award winning, UI components.
This is how the Kendo UI Builder will benefit companies, by providing their customers will a modern UI that can be used to access there existing applications from anywhere via the internet.
Progress

78. Next Steps
Insure your business logic is accessible (PAS for OE or Classic AppServer)
Data Object Services
REST
Web Handler
30-day Eval available NOW
11.6.3
KUIB 1.0.0
Share your Web Application UX with Shelley
Share “typical pages” to be considered as View templates
Share your semantic data types

79. Kendo UI Builder by Progress Priorities
Kendo UI Designer
Support Blank View
Support new editor types
Checklist, numeric slider, lookup
Support new editor type events
Close, open
Support for new CRUD events
Beforeedit, afteredit
Support new semantic types
File, image, percentvalue
Support new view templates
Stacked grid, hierarchical grid
Customer generated
Support for new KendoUI themes
Localization: Central location for Strings
JSDO
SSO support for JSDO session
Support REST service
User Experience
UX Improvements across the board
PASOE
Page preview of application
PDSOE
Seamlessly integrate with Kendo UI Designer
OpenEdge 11.7
JSDO 4.4 79

81. Agenda Time Work 2:00-2:30 Slides/Demo 2:30-3:15 Steps 1-59 3:15-3:30
Break
3:30-4:00
4:00-4:45
Steps
4:45-5:00
Wrap-up, extra credit

82. Building a Modern Web App – Full User Flow
1. Create ABL Service; Generate Catalog
PDSOE
Business Entities
2. Define UI and Data Sources; Generate Metadata
Controls
Visual Designer (Kendo UIB)
Views
Views/Controls Metadata
Project
Data Source Metadata
3. Generate Web App Files; Generate HTML, JS, CSS
JSDO
Web App in Browser
Angular
Yeoman Templates
4. Preview Web App in browser
Builder/ Generator (Kendo UIB)

83. Meta-data: App-level
<webAppDir>\meta\app.json

84. Meta-data: Module / Views
<webAppDir>\meta\modules\<moduleName>.json

85. Meta-data: Data Provider/Data Sources
<webAppDir>\meta\dataProviders\<dataProviderName>.json

86. Built-in View Templates
Data Grid View (read-only)
Read-only Data Grid mapped to single data source (JSDO table).
Data Form View (read-only)
Data Form View (read-only) with Edit Form View
Read only Data Form "screen" with editable Data Form as a separate "screen”. Fields map to a single data source.
Data Grid (read-only)
with Data Form View
Data Grid and Data Form on a single page. The Data Grid uses the first 1/3 of the layout and the Data Form on right 2/3 of layout. Same data source is used for grid and form fields.
with separate Edit Data Form View
Data Grid “screen” with separate edit Data Form “screen”.  Same data source is used for grid and form fields.
Blank View
Empty view, use drag-n-drop or hand coded in external html and javascript files.

87. Kendo UIB : Modern Web Applications for OpenEdge Systems of Record
Business Application with one or more modules
Modules define product functional areas: i.e. ERP, Finance, HR
All server-side logic and UI customization done in ABL
UI can be static pages and/or PAS for OE WebSpeed
Modules, Pages, Views and Controls
Responsive layout designed for Browser and Tablet form factors
Default AppModule for custom pages, dialogs, etc.
Custom modules are SPA with two types of views
Data driven Views are dependent on the data provider definition
Custom Pages/Views are visually built using drag-n-drop designer with controls
Data Sources
Angular.js data-binding to ABL Services (WebSpeed, Data Service/JSDO) and REST
Session management (SSO support by PAS for OE)

88. Kendo UIB: Summary WebApp Module Data Provider AppContext
An application that is composed of modules, pages and data providers and runs in a browser.
Module
 Functional components of a large application that share stateful services and app context. A module is made up of a group of pages related to a single product feature. Modules are implemented as single-page applications (SPA).
Data Provider
An ABL Service (JSDO ) or REST Service providing access to a backend service. Data Providers are defined at the WebApp level so they can be shared across Modules.
AppContext
User and session information for the WebApp and shared across Modules. Can be used for SSO.

89. Visual Designer Flow Progress Developer Studio Visual Designer
* New in Kendo UIB
Progress Developer Studio
Define Service Interface for each Business Entity and generate JSDO catalogs with Semantic data types*
Visual Designer
Create WebApp
Define Data Providers: Progress Data Services (JSDO catalog) or REST
Define App-level pages: Dashboard, login page, dialogs, etc.
Create Modules: Define page header and footer
Create Views: Data driven - Select UI template and Data source(s)
Create Views: Custom UI - Build using drag-n-drop designer
Generate meta-data
Generator
Combine angular yoeman templates and UI metadata to create Web App content files: HTML, CSS, JS