26.Jun.18

Milan Nankov

Milan Nankov

Using Kendo UI in SAP UI5 Applications

Continuing our series of articles on UI5, I am going show how the Kendo UI for jQuery suite of components can be used in a SAP UI5 application.

SAPUI5 provides a plethora of UI controls that cover pretty much all scenarios for building web applications. Still, some of the controls might not have the performance of functionality that is required in certain situations. This is where 3rd party libraries like Kendo UI come in. I consider Kendo UI to be one of the best such libraries out there so this article will showcase how Kendo can be used efficiently in SAP UI5 apps. If you are new to Kendo UI, please check it out at https://demos.telerik.com/kendo-ui/.

Getting started

Running Kendo components inside an app usually entails adding the required CSS and JS files as instructed by the getting started guide. If you would like to get started quickly, simply add the following references directly to the index.html of you UI5 app.

 

Using Kendo the easy way (but not really)

Let's say that I really like the Kendo ColorPicker component and I want to use it in an app. The most straightforward approach is to add an html element with a specific id and use that element to initialize the color picker once the view has been rendered. Here is an example:

And the result looks like this:
Kendo Color Picker

That is a splendid color picker and all works fine and dandy as long as you have just a few of those. Once you start using many and more powerful controls your code will get messy. There are many drawbacks to this approach but the main one is that you can't fully utilize the UI5 framework - for example, you cannot use bindings (one of the fundamental features of UI5). Let me quickly summarize the shortcoming of this approach and go on to share an alternative. 

Drawbacks

  • Cannot use binding
  • Not fully utilizing the descriptive nature of XML views
  • Solution looks like a patch

The custom control approach

The alternative that I am going to present is built around creating custom controls that act as a proxy between the UI5 framework and the 3rd party controls. Using this approach we can have tighter integration with the framework and use all of its goodies. If you haven't looked into creating custom controls for UI5, this blog post is the best starting point.

Let's take a look at simple wrapper around the Kendo ColorPicker component.

At first, this might seem like a lot of code but the benefits out value the time you will spend to create such wrappers. Let's cover each important section.

Metadata & Properties

The metadata sections is where we declare what properties and events our wrapper has. In this simple case, our picker control has only one property to store the current selected color called value.

Renderer functions

This function is responsible to creating the initial HTML elements that we need to display the Kendo color picker. The renderer will basically create a div element which will become our picker control

OnAfterRendering

This method gets called once our custom control has been rendered - i.e. the html element we need is on the page. This is the place where we use JavaScript to create s Kendo ColorPicker widget.

Preventing Invalidation & property setters

This is a very important step when dealing with 3rd party libraries like Kendo. By default, UI5 custom controls will invalidate (rerender) if a property is changed. All this is very natural since the UI usually needs to be updated when properties change. Without going into too much details on how the UI5 rendering systems works, when dealing with 3rd party controls it is best to tell the framework that we will handle the update ourselves and skip the rerendering part. Hence the need for KendoColorPicker.prototype.setValue.

For every property that we declare in the metadata, there will be a corresponding set and get methods. Whenever the value property of our wrapper is set (through a binding, for example) the setValue method will be called. We overwrite the default setValue method to instruct UI5 that we will deal with the update ourselves and that no rerendering is required. Of course, this is where we do update the Kendo color picker control with this.kendoWidget.value(newValue).

Once we have this wrapper in place, we can go back to fully using the underlying framework and for instance, bind the color to a model property like so:

Wrapping up

In the next couple of articles I will cover more complex scenarios where we have to deal with more sophisticated components like grids, spreadsheets, etc. You can take a look at the full sample project over at Github.

As always, I will be happy to hear your comments and suggestions. 

Need consulting on this topic?

Yes No