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:

i2016_05_18_19_26_471_png

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.

i2016_05_18_19_40_502_png

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.

i2016_05_18_20_02_545_png

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

i2016_05_18_19_56_164_png

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>'
Endevent

Note: Another way is to do

Event Start
       Form.JScriptSrc.Add("Changeonscroll.js")
Endevent

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:

i2016_05_18_20_05_176_png

 

So, the start event is as follows:

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

The events in GeneXus will be the following:

i2016_05_18_20_11_237_png

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

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

Download from Change on scroll sample.

See also

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



Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.