Useful Javascript functions available in the gxgral.jsUnofficial Content
When developing User Controls  for Web Interfaces, it is useful to know the available functions and properties exposed in the gxgral.js file to be used during the development.
 
GeneXus minimizes the use of global variables creating a single global variable for your application, called gx, for example:
var gx = {};
As the gxgral.js file used at runtime is compressed you can check the gxgral.src.js file located in the generator folder.
 
The gxgral.src.js is split in different namespaces. Some namespaces worth looking at are the following:

gx.dbg Namespace

For debugging\logging purposes the gx.dbg namespace exposes the following functions: logMsg and logEx. The first one displays a message in the browser console and the second details information about an exception.
 
In general this namespace is used in conjunction with a correctly javascript error handling. When possible, use a try\catch block in the javascript code associated to the User Control and complement it with the use of this namespace to log possible errors during execution. Example:
try
{
  // My user control code 
}
catch(e)
{
  gx.dbg.logEx(e, 'myRenderFile.js', 'myFunctionName'); 
}
In this case, we are using the logEx function to display the exception. Check the Browser console to get further information, otherwise you can display error and logging messages enabling the gx.dbg.enabled property: For example
if (!gx.dbg.enabled)
{
  gx.dbg.enabled = true;
  gx.dbg.logMsg('Hello World UC');
}
You can check a standard try\catch section in the HelloWorld user control. At runtime, you will see something similar to the following image when debugging with a javascript debugger:
 
jsFunctions01

gx.text namespace

The gx.text namespace has functions to handle strings such as length, upper, lower, trim and so on. In particular use the stringBuffer functions whenever possible  to handle strings.
You can check how to use it with the Catpcha User control, a snippet of it follows:
var buffer = new gx.text.stringBuffer();
buffer.clear();
buffer.append('<div id="myID"> ...');
var bufferOutput = buffer.toString();

Other functions sample usage:

var trim1 = gx.text.trim(" text with spaces... ");
var upper1 = gx.text.upper(" Upper text... ");
var width1= gx.text.replaceAll(this.Width, "px", "");

gx.num namespace

To handle numbers check this namespace, some useful functions are formatNumber, mod, parseFloat, parseInt, val, trunc, round. Some examples:
var n1 = gx.num.val('199.99');
var n2 = gx.num.trunc(199.99);
var n3 = gx.num.round(199.99);

gx.base64 and gx.lang namespace

You can encode and decode any string or generate it's base64 representation, some examples:
var b64_1 = gx.base64.encode('Hello,World');
var b6a_2 = gx.base64.decode(b64_1);
var enc1 = gx.lang.encodeValue('<div id="myID"> bla bla...</div>');
var enc2 = gx.lang.decodeValue(enc1);

gx.util namespace

The gx.util namespace has several subnamespaces; use the resourceUrl function to generate a complete URL reference, for example:
var imgFolder = gx.util.resourceUrl(gx.basePath + gx.staticDirectory + 'UserControlFolder/images/', true);
in this case we are using the basePath and staticDirectory properties too.
 
There's also the gx.util.regExp namespace to handle regular expression with the isMatch, replace, split, matches functions. 
 
The gx.util.browser namespace has functions to detect the browser used such as isChrome, isIPad, isIPhone, isIE, an example:
if (gx.util.browser.isChrome())
{
  gx.dbg.logMsg('Using Chrome browser');
}

gx.http namespace

When it is necessary to load a javascript library from the source code, the loadScript function is very useful.

As an example, look at the Runtime Render file of the StockChart Control.

var buffer = gx.util.resourceUrl(gx.basePath + gx.staticDirectory + "StockChart/js/themes/" + this.Skin + ".js", false);
gx.http.loadScript(buffer);

Event Handling

Check the gx.evt namespace to attach and detach event handlers, an example:
gx.evt.detach(control,event,handler)
gx.evt.attach(control,events,handler)
Check the JSEventHandler User control implementation for further detail.

gx.dom namespace

The gx.dom namespace exposes several useful functions to get DOM elements such as byId, byName, byTag, byClass. Example:
var hwCtrl1 = gx.dom.byId('hworld1');
var hwCtrl2 = gx.dom.byClass('gx_usercontrol');

Webpage Events

Check the gx.fx.obs namespace to add observers to different genexus event, an example:
gx.fx.obs.addObserver('grid.onafterrender', this, function (grid) {this.afterrender();}); //this executes the afterrender function when the grid finish rendering
gx.fx.obs.addObserver('gx.onbeforeevent', this, function (grid) {this.itemActivate();});//this executes the itemActivate function after an event is executed
gx.fx.obs.addObserver('gx.onafterevent', this, function (grid) {this.itemInactive();}); //this executes the itemInactive function before an event is executed

 

Other useful Properties

Use this.IsPostBack to know if it is the first execution or not, check the HistoryManager User Control for an example.
 
If you need to handle dates, check the gx.date namespace.
 
Note: this is valid since Xev1U6 or higher.

Use Case

The following sample shows the usage of some of this functions with the Hello World User Control and some modifications in the render file to test the functions.
 
jsFunctions02

Some general guidelines

Use the || operator to fill in default values:
var myVal = myObject["myProperty"] || "(none)";
Attempting to retrieve values from undefined will throw a TypeError exception. This can be guarded against with the && operator:
myObject.myProperty // undefined
myObject.myProperty.model // throw "TypeError"
myObject.myProperty && flight.myProperty.model // undefined