Using Core Libraries in Components

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";

See Also