User Control Object - Handling events

Official Content

Events are essential elements when creating User Controls objects. They allow you to encapsulate interactions inside your controls and let Web Panels respond to events triggered by your user control.

You can define Events for your user control object in two ways:

1) By defining them in the Screen Template tab by using {{On<Event Name>}} syntax

The place where you insert the event is relevant, it is the DOM element where the event is going to be raised.

The name <Event Name> is also relevant because it specifies the name of the DOM event that is going to raise our event.

For example:

<button {{Click}}>

defines an event on the element button.

The OnClick event is going to be raised when the click event is triggered by the button element on the DOM.

For a full list of the DOM Events take a look at

Other samples can be:  {{OnBlur}} {{OnDblClick}} 


2) By removing the "auto" attribute in the Properties tab and creating a specific tag Event:

<Event Name="<Event Name>" On="<DOM Event>" />

In this way, you can define the name you want and map with the DOM Event. 

In addition, if you want to define more than one event based on the same DOM Event, you can do it on this way:

<Event Name="ClickSaveBtn" On="Click" />
<Event Name="ClickCancelBtn" On="Click" />

And defining the events on the Screen Template:

<button class="buttonSave" {{ClickSaveBtn}}>Save</button>
<button class="buttonCancel" {{ClickCancelBtn}}>Cancel</button>