🎄 OpenUI5 + Kendo UI web app 🎄

This web app is based on SAP's OpenUI5 and Telerik's Kendo UI.

A live demo is located here.

It can run under IIS or HapiJS.

🚕 How to run it?

Either publish the Visual Studio project to your IIS server, or run it via npm start from the console.

The project itself can either start as a Shell with a few embedded Kendo-Components or as a Fiori-like WebApp that uses the "Northwind" OData-Service to show product data in a Master-Detail view.

To run the Master-Detail example you must disable the "same origin"-policy in your browser. For example, this is how to start Chrome:

chrome.exe --user-data-dir="C:/YOUR-ALTERNATIVE-CHROME-DIR" --disable-web-security

Deploying to IIS

Mouse right click on project root
Select "Publish"
Select a path to your IIS App-dir (it can go over FTP, local path, WebDeploy etc.)
Upload the files to the directory

🚦 Important steps after the upload to IIS

By default IIS is not declaring the uploaded directories as "Applications".

One must manually 'convert' them to real IIS-Applications.

Therefore, open the IIS Management Console by typing inetmgr.exe in a DOS-console or selecting it from Control Panel/Administrative Tools

In IIS-Manager right click on the Application directory and choose "Convert to Application".

Initial setup & running with HapiJS

npm install npm start

When running on IIS the server settings are located in Web.config from the root directory.

For HapiJS the configuration is located in Scripts/server.config.js. Also the server.js startup script can be modified.

⚠️

Please note that Kendo Grid belongs to the "Professional" version of Kendo UI and therefore needs a proper license to be used.

Therefore I'm not providing the copyrighted scripts/styles to avoid violation of Telerik's license terms.

But there's a 30 day trial available: Kendo UI Trial License

The Kendo-Scripts should go into Scripts/vendor/kendo directory and CSS-files into Content/kendo.

I'm still experimenting with it, so expect some rough edges. However, there are a few helper modules for easier creation of tables & columns.

Testing

Jasmine 2.1.3 and JSCover 1.0.15.

Jasmine can either be run directly or via JSCover. I'd recommend JSCover because it not only runs the tests but also generates important code coverage reports.

Jasmine tests

Code coverage report

The batch file tools/jscover-server.bat starts a local web server on port 8080. You'll need Java runtime to execute JSCover-all.jar file located in the same directory.

External services

To generate sample JSON-data for SAP Table I used JSON generator.

For Kendo-Grid the public Northwind Service was used.

RequireJS is the module loader for all advarics-JavaScripts.

Helper methods

Scripts/advarics/advarics.controls.js contains some helper methods for easier configuration of tables and other widgets.

So, instead of using raw

table.addColumn({
    label: [....],
    template: [...],
    sortProperty: [...],
    [...] etc.
    })

you can simply write

    controls.getColumn('ID', 'id');

This will create a column of type 'text', map it to the property 'id' of you model and set its title to 'ID'.

For more complex columns you can pass a template and other properties like sorting, filtering etc. Currently, you have to explicitely create template objects. In future relases of this demo I'll provide a factory for such cases.

For easier handling of the many configuration options I use Knockout.js and Underscore.js libraries.

Crypto functionalities

For crypto functionalities, like setting HTTP Auth-Headers, the CryptoJS library is available.

To MVC or not to MVC?

The Shell-Version is just a container that holds the widgets and utilizes no explicit Controllers, Views or Models.

The alternative, 'Master-Detail' version contains a complete MVC pattern with several Views, Controllers & Models.

Load & execute order of JavaScripts

SAP's Scripts are loaded separately and before the RequireJS starts.

RequireJS starts the app via advarics/app.js

Depending on the version being active the app executes as follows:

Shell Version

- get the JSON data
- create a new Model filled with data
- create a new Table based on the model
- create a Shell and give it a Table as a content
- put the Shell on the BODY Element in index.html
- when switching to other tabs (Management, Editor) the app will initialize 
  the KendoUI components (Grid/Editor)

Master-Detail Version

- create the main component "App" which boots the whole stuff (OData, MVC, config etc.)
- insert the App into a component container
- hook the component container on the BODY Element in index.html
- watch for URL changes and/or clicks in the View and act accordingly

SAP Shell

Kendo Grid

Kendo Editor

Master-Detail Version

Helpful sites

SAPUI5 SDK Controls

Nabisoft's SAPUI5 Tutorials

Get Started from OpenUI5 Team Github Page

SAP UI5 Table & Shell Documentation

💡 **Created at**

advarics GmbH, Branch Office - Bochum, Germany

©️

MIT (see LICENSE.md)