Event Processing in Kendo UI Builder Templates

Event Processing in Kendo UI Builder Templates

Posted on April 26, 2018 0 Comments
Event Processing in Kendo UI Builder Templates_870x450

Learn how to easily implement event handling on custom views in Kendo UI Builder.

Please Note: Progress Kendo UI Builder is no longer available. To learn more about options for your OpenEdge application, read Application Evolution: Web UI Strategy for Modern Progress OpenEdge Applications.

In this post we will learn how to implement event handling on custom views. We will augment the hello world custom view from the first blog post. We will process click events on any part of the hello world salutation container (a <div>).

As in the first blog, we will look at the three main items we must program:

  1. The custom view definition file
  2. The design-time elements
  3. The run-time elements

To follow along, download the template samples .zip file from GitHub or clone the repository; open the folder custom-hello-world-v2 and follow the same steps outlined in this post to install this template in your target application.

Custom View Definition File

We specify to the designer that we want a single event handler for the view properties panel. This allows the user to specify the name of the function that will be invoked on click. 

Here is the relevant extract from the file custom-hello-world-v2.json:

01."events": {
02. "type": "object",
03. "title": "Event",
04. "description": "Specifies all available events for the hello world div",
05. "order": 3,
06. "properties": {
07. "onClick": {
08. "type": "string",
09. "title": "Clicked",
10. "description": "This event fires when hello world is clicked",
11. "default": "onClick",
12. "order": 1
13. }
14. }
15. }

And here is how it renders in the designer:

Event properties

As explained in first post, an object with sub-structure is represented with expandable/collapsible panels, and we see an example of this here. 

As a reminder, the user should implement the function specified in the view property panel in the public controller file (for AngularJS) or in the public component file (for Angular 5).

Design-Time Elements

KUIB does not pass mouse or keyboard events to the design-time view. So, we do not have to implement anything for the onClick event for the design-time view.

Run-Time Elements

Things here are relatively straightforward:

First, open the file angular/__name__.view.component.html.ejs (Angular 5) or angularjs/template.html.ejs (AngularJS).  

If the user has defined a click handler in the view property we add the handler to the div. Notice how we use JavaScript expressions within EJS to test for the presence of the event handler.

For AngularJS, we use ng-click=”function call” syntax.

For Angular 5, we use (event)=”function call” syntax. Specifically, for a click event, we use (click)=”function call”

At this stage and in practice, you do not need to do anything else as it is the responsibility of the user to add the function implementation in the public class for the controller (AngularJS) or for the component (Angular 5). However, to make the sample self-contained and working out of the box, we have added a default implementation for onClick.

Open either custom-hello-world-v2/angularjs/controller.js.ejs or custom-hello-world-v2/angular/__name__.component.html.ejs and notice how, with EJS syntax, we define the function using the name of the event handler as defined by the user in the view property:

1.<% if (events.onClick) { %>
2. <%- events.onClick %>(e) {
3. alert(`In default implementation for <%- events.onClick %>
4. - You should override this function in the public controller class.`);
5. }
6.<% } %>


And here is what you should see when clicking on the div:

Run time

Now, if you have cloned the repository (or gotten a .zip), you should create an application containing a hello world 2 custom view. Once the application is generated, you can create the on click event function in the public js file (for AngularJS) or Angular component ts file (for Angular 5). 

The file's location is dependent on module and view names. For example, in my test application, I have a module called custom-views and the view containing the hello world 2 custom view is called hw2. Given these names, the location and name of the files are:

  • AngularJS: app\src\modules\ custom-views\hw-2\controller.public.js
  • Angular 5: app\src\app\modules\custom-views\hw-2\hw-2.view.component.ts

In conclusion, as you have seen in this article, defining a custom view with event handling does not pose specific difficulties.

Check out the next post to see how we can augment the models used at design-time and at run-time.

Thierry Ciot

Thierry Ciot

Thierry Ciot is a Software Architect on the Corticon Business Rule Management System. Ciot has gained broad experience in the development of products ranging from development tools to production monitoring systems. He is now focusing on bringing Business Rule Management to Javascript and in particular to the serverless world where Corticon will shine. He holds two patents in the memory management space.


Comments are disabled in preview mode.

Sitefinity Training and Certification Now Available.

Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.

Learn More
Latest Stories
in Your Inbox

Subscribe to get all the news, info and tutorials you need to build better business apps and sites

Loading animation