Alpha Software Blog

Avoid the Big Bang: Preventing Collisions with Self-Contained Controls

JavaScript functions for the FormView, ViewBox, and ControlBar can be defined in several locations. These locations include the UX Component level, the Control level, and the Object level. Functions defined at the UX Component or Control level are created in the global JavaScript namespace. This means the functions can be referenced anywhere in your entire app. However, this comes with a caveat: multiple functions defined at the Component or Control level with the same name will overwrite each other. To understand why this happens, we need to look at how the creation of functions are handled in JavaScript.


When you create a function in JavaScript, a variable is created with the name of the function and is assigned the function. Defining a function using the function keyword is the same as declaring a variable and assigning it a function. For example, the following statements both create a function named 'foo':
function foo () {

var foo = function () {

In essence, when you create a JavaScript function, a variable is created with the function's name and is assigned a function object. As with any other variable in JavaScript, the function variable can be reassigned to any other value, including another function, object, or value. The following is perfectly valid JavaScript:
function foo () {

alert("foo is a " + typeof(foo));

foo = 12

alert("foo is a " + typeof(foo));

If you run this code in a web browser, you will see two alerts:
selfContainedCtrls1 selfContainedCtrls2


At the beginning of the script, 'foo' is declared as a function. However, when 'foo' is assigned the value 12, it becomes a number and the function 'foo' no longer exists.

Defining JavaScript at the Object Level

When JavaScript is defined at the Control level, it is stored in the Control's definition. If you copy the Control between components, the JavaScript will also be copied. However, since functions declared at the Control level are stored in the global JavaScript namespace, it's easy to accidentally create two functions in two Controls in a component that have the same name. In Alpha Anywhere v4.3, a third option for defining JavaScript has been added that allows you to defined functions at the Object level: "This object".


JavaScript defined using "This object" is created as methods that are called on the control. For example,
var cb = {dialog.object}.getControl('CONTROLBAR1');;

Because functions are created as methods on the object, you do not need to worry about function name collisions when multiple Controls or Components are loaded on the same page.

Tips for Preventing Function Name Collisions at the Component Level

For the ContorlBar, FormView, and ViewBox control, creating functions using "This object" prevents function name collisions. For JavaScript functions that need to be declared at the Component or Control level, however, collisions can still occur. You can mitigate function name collisions, however, by adding functions to the {dialog.object} JavaScript object or directly to the object for other Controls in the Component.

You can extend the {dialog.object} with your own functions and properties. Be careful, however, that you don't accidentally overwrite an existing property! The easiest way to do this is to create your own object in the {dialog.object} object that contains all of your functions. For example,
{dialog.object}._myMethods = {};
{dialog.object} = function () {
alert("This is foo");

You can do something similar with other Controls by getting an pointer to the Control and adding your own methods:
var listObj = {dialog.object}.getControl("MY_LIST_CONTROL");

listObj._myMethods = {}; = function () {
alert("This is foo in my List");

Note that only some types of Controls will have an object that you can extend with your own methods. Basic control types, such as Text Boxes, Checkboxes, and Radio Buttons do not have an object you can access using {dialog.object}.getControl(). The Window and Panel container Controls have objects, but they are retrieved using different methods. An object to a window can be retrieved with the {dialog.object}.getWindow() method. For Panels, use the {dialog.object}.getPanel() or {dialog.object}.getPanelObject() methods.

To learn more about using This object to define JavaScript functions and creating self-contained controls, check out the video below:

Defining Javasript in a ControlBar - Understanding the 'This Object' Option

Learn more about Client Side JavaScript in UX Components.
Prev Post Image
Improving Connected Cars Through App Security (InfoGraphic)
Next Post Image
Alpha Anywhere Version 4.3 is available now

About Author

Sarah Mitchell
Sarah Mitchell

Technical Writer and Documentation Expert at Alpha Software

Related Posts
Top Security Concerns for Low-code and No-code Development
Top Security Concerns for Low-code and No-code Development
Manufacturing Data Collection Systems: Manufacturing Efficiency and Productivity In The Fourth Industrial Revolution
Manufacturing Data Collection Systems: Manufacturing Efficiency and Productivity In The Fourth Industrial Revolution
New Webinar: How to Integrate ChatGPT with Alpha Anywhere
New Webinar: How to Integrate ChatGPT with Alpha Anywhere

The Alpha platform is the only unified mobile and web app development and deployment environment with distinct “no-code” and “low-code” components. Using the Alpha TransForm no-code product, business users and developers can take full advantage of all the capabilities of the smartphone to turn any form into a mobile app in minutes, and power users can add advanced app functionality with Alpha TransForm's built-in programming language. IT developers can use the Alpha Anywhere low-code environment to develop complex web or mobile business apps from scratch, integrate data with existing systems of record and workflows (including data collected via Alpha TransForm), and add additional security or authentication requirements to protect corporate data.