Using Core Libraries in Components

IN THIS PAGE

Prefer Component Methods When Available
Getting a Pointer to a Control
Use Placeholders

Description

The following best practices should be used when using core library functions in components.

Prefer Component Methods When Available

Check to see if there are any existing component methods to do what you want to do before using a method in the Core library to manipulate a control in a component. Controls in Grid and UX components are more complex than their underlying HTML representation. For example, in a Grid component, when the value changes for a textbox for a field in a Detail View, Alpha Anywhere will do the following:

Set the value in the field's textbox
Fetch the latest data for the record if no previous edits have been made to the record
Mark the field as modified
Enable/disable buttons to Save/Undo changes
Fire events to execute Action Javascript, initiate Ajax Callbacks, execute custom JavaScript, recompute computed controls, update dynamic styles, and revalidate client-side expressions (show/hide, enable/disable, readonly, etc) that reference the feild's value
Update the component's state information

Manipulating a control's value directly using a method such as $() bypasses these actions, eliminating many of the built-in features that Alpha Anywhere provides. Instead, the component's .setValue() method should be used. The .setValue() method allows you to change the value of a control and ensuring any functionality that is dependent on the value changing is processed. For example:

{grid.object}.setValue('G','FIRSTNAME',1,'Thomas');

Other methods exist for showing or hiding controls or setting other control properties. See the JavaScript method documentation for the Grid Component and UX Component to see what methods are available.

Getting a Pointer to a Control

Some components offer a method for getting a pointer to the control's HTML element. This method can be used to get the DOM element needed by the core library function:

ele = {dialog.object}.getPointer("FIRSNAME");

Use Placeholders

Most core functions require the id for the HTML element for the control you want to modify. The control id for a Component is typically a combination of the Component ID and Control Id. You can construct the id yourself using placeholders. For example:

id = "{grid.controlId}";
id = "{dialog.componentName}.V.R1.FIRSTNAME";
id = "{grid.componentName}.V.R{grid.rowNumber}.LASTNAME";