Creating a sample web app using Kendo UI Builder by Progress

1. Create an ABL Web App project with an ABL Service of Data Object type with either the REST RPC or the WebHandler service provider. The service provider that you select, specifies the request and response transport and message protocol that accesses the annotated Business Entity used by the Data Object Service.

An ABL Service of Data Object type is an OpenEdge Data Object Service that provides web access to your ABL business logic through one or more OpenEdge Data Objects that use the ABL Business Entities. An OpenEdge web app can then access this standard interface that OpenEdge application architecture provides, using a JavaScript Data Object (JSDO). A JSDO hides the underlying details of the network request and response protocol of the web app. A Data Object Service then manages all web access between an instance of the JSDO in the web app and the Data Object running on the OpenEdge application server.

For more information on service providers, see the Progress Data Objects Guide and Reference guide. For more information on Data Objects Services, see the OpenEdge Development: Web Services guide. For more information on Business Entities, ABL Service of Data Object type (Data Object service), and OpenEdge projects, see the Progress Developer Studio for OpenEdge online help.

2. Create a Business Entity with semantic type field-level annotations. These annotations help you customize the options for how the Kendo UI Designer uses the table field values provided by the Data Object resource that you implement with the Business Entity.

Note: ABL Business Entities are annotated ABL class- or procedure-based objects that provide a standard web interface for your data and business logic. For an overview of OpenEdge Data Object Services and how to implement ABL Business Entities as Data Objects, see the OpenEdge Development: Web Services guide.

3. Edit the ABL Service of Data Object type to use the annotated Business Entity. The associated Data Service Catalog is generated. This Catalog is a JavaScript Object Notation (JSON) file that contains metadata describing the schema and operations supported by each Data Object managed by the Data Object Service.

Note: The JSDOs that the Kendo UI Designer and its generated web apps create to access Data Object resources rely on the Catalog for each Data Object Service.

The web app you create is based on the selected Data Object Service metadata and UI templates for the supported Kendo UI components. You create each module of the web app, and each view in the module, using the built-in UI templates, such as for a grid or form, with a predefined Kendo UI Builder configuration. You then add data providers and data sources that bind data to each view by associating a Data Object resource table as a data source. You can then define app function and presentation by setting properties of the app, each module, and its views, then preview the result with real data from the data sources that are bound to the views.

Note: For more information on using Kendo UI Designer, see the Kendo UI Builder by Progress: Using Kendo UI Designer guide. For more information on the architecture and components of OpenEdge and Kendo UI Builder, see the Kendo UI Builder by Progress: Modernizing OpenEdge Applications guide.

6. Preview and test the web app by invoking the Kendo UI Generator. It takes the saved JSON UI metadata and referenced UI templates as input, and generates a deployable web app and the HTML5/CSS and JavaScript files. The HTML5/CSS and JavaScript files are then saved to the location you specified, which can be a Web UI project in Developer Studio. You can then invoke a preview of the app from the Designer in your default browser, which is run and managed by a webpack-dev-server.

7. Create a Web UI project in the same location that has your web app and deploy the contents of this project on PAS for OpenEdge. You can use this deployment as a development build for testing on a development instance of PAS for OpenEdge or as a release build for delivery on a production instance of PAS for OpenEdge. In addition, you can export the Web UI project as a Web UI application, which creates a WAR file for your web app that you can deploy to a web server.

Note: For more information on PAS for OpenEdge, see Progress Application Server for OpenEdge: Introducing PAS for OpenEdge and Progress Application Server for OpenEdge: Application Migration and Development guides. For more information on working with a Web UI project with OpenEdge Service Pack 11.6.3, see OpenEdge Service Pack 11.6.3: New Information, and with later OpenEdge releases, see the Progress Developer Studio for OpenEdge online help.

In the ensuing topics, we create a sample web app, named OrderEntryWebAp, for customer order entries. First, we create an ABL Web App project named OrderEntry, which contains the Data Object Service, OrderEntryService. The service uses an annotated Business Entity. The JSON file for the Data Service Catalog is generated. The data provider is then used by Kendo UI Builder when we create the web app, OrderEntryWebApp. We will also create modules containing views that we associate with (bind to) the data provider. We will finally deploy the web app on PAS for OpenEdge using a Web UI project.