How to execute GeneXus events from JS code using External Objects

Official Content
This documentation is valid for:

The following example shows how to execute GeneXus events from Javascript code using External Objects.

In particular, in this example, we interact with the browser and trigger a GeneXus event in response to a Javascript event (the scroll event). The scroll event is fired when the document view has been scrolled. In GeneXus, we define an event handler for window scrolling.

For example, if our web pages have a fixed header (with absolute position), we can make the header shrink when the pixels scrolled in the current document (vertically) reach a certain value. On the other hand, the header can expand again when the window is scrolled by the user and the pixels do not reach that value.

ChangeOnScroll sample image

What is the purpose of this example?

enlightenedLearn about External Objects for Javascript

enlightenedSee how to trigger GeneXus Events from external Javascript resources

enlightened See how to handle Javascript events from GeneXus Code


First, we define the Javascript (changeonscroll.js) as follows:


Note :

  1. The shrinkOnHeight property determines the pixels that the window should scroll until an event is fired.
  2. The function is triggered when the document is ready, and an event listener is added using the JQuery "on" method. The main idea is to attach an event handler to the scroll event.
  3. Inside that function (the event handler), we notify the GeneXus event using the gx.fx.obs.notify expression. The only way to notify a GeneXus event from the javascript is by using the gx.fx.obs.notify method (which is defined in the standard GeneXus js library - gxgral.js).

External object definition

The External object has the Javascript External Name property set to Changeonscroll.

  • If you define a variable based on ChangeOnScroll EO in any object, a constructor of Changeonscroll needs to be defined in the JS code.
  • Events in GeneXus are always static, so you have to set the IsStatic property to TRUE.


Remember that events are always static, so the property "shrinkOnHeight" is defined as static as well, and the Javascript External Name property is set to shrinkOnHeight because that's the name of the property in the JS source.


The Javascript External Name property of the event is the name used in the Javascript definition to map to the GeneXus event.


It can be useful to namespace your events so you don't unintentionally disconnect events that you didn't or couldn't know about.

Using the EO from GX code

First, add the reference to the JS in the HTTP headers of the page. Use Javascript Referenced files property.

Otherwise, do the following:

Event Start
    Form.HeaderRawHTML += '<script type="text/javascript" src="Changeonscroll.js"></script>'

Note: Another way is to do

Event Start

Since shrinkOnHeight is a static property, we don't need to define a variable based on the External object, and the assignment to it is static:



So, the start event is as follows:

Event Start
    Form.HeaderRawHTML += '<script type="text/javascript" src="Changeonscroll.js"></script>'
    changeonscroll.shrinkOnHeight = 20

The events in GeneXus will be the following:


Event changeonscroll.scrolltoShrink
//here code the handler for the event
    content.Class = ThemeClass:TableContainer

Event changeonscroll.scrolltoExpand
//here code the handler for the event
   content.Class = ThemeClass:TableContainer1

Download from Change on scroll sample.

See also

How to implement a dictionary data type using JS and server side code