{dialog.object} Methods

Description

The UX component provides its own set of methods and properties for interacting with the controls on the component. These methods are accessed using the {dialog.object} placeholder.

{dialog.object} includes methods for getting and setting values, acquiring pointers to controls and object, modifying the state of controls, and more. Most methods are documented in the Insert Method dialog. The Insert Method dialog can be accessed via the javascript editor's "Insert..." menu in Javascript Functions or Client-Side Events. It may also be listed as a link at the bottom of the javascript editor elsewhere in the UX component.

image27.png

Insert Method contains a listing of functions available in the UX component along with documentation about what the functions do and examples of how to use them. Example code for methods in Insert Method can be copied to the clipboard using the "Copy example to clipboard" link. If you don't need the full example but want to insert a method into your script, select the method to insert and click the Insert button.

Insert Method lists the methods you are most likely to encounter or need. It doesn't list every possible method available in {dialog.object}. If you want a list of all methods in {dialog.object}, you can inspect the {dialog.object} using a debugging tool such as Google Chrome's debugger.

Alpha Anywhere also provides contextual help in the Javascript editor for methods and placeholders. The auto-complete feature will suggest possible methods or placeholders as you type.

image16.png

Additionally, some methods include access to tools to help define parameters. For example, the help popup for {dialog.object}.getValue() and {dialog.object}.setValue() includes access to a context menu that lists all possible controls in the UX component that can be accessed using these methods. The context menu can be accessed using the right mouse button or holding the control and down arrow key.

image17.png

When writing javascript to interact with your UX component, prefer to use methods in {dialog.object} over native javascript or methods found in Alpha's Core Library. {dialog.object} methods handle updating the UX component's state -- such as flagging the UX component dirty, triggering Client Side Expressions, or calling Client-Side Events. Client Side Expressions can include references to the state of the UX component, such as whether or not the UX component is dirty.

image24.png

The UX component becomes dirty when data in any editable control is changed from its original value. If you programmatically set the value in the text control using a method such as $svs(), the UX component won't know that the data value changed and won't update the enabled state of the button. $svs('{dialog.componentName}.V.R1.NAME','Alice');

image23.png

If you use {dialog.object}.setValue(), however, the UX component will flag the text control as dirty, indicating that the control's data value has been modified. This will, in turn, trigger the "Say hello" button to become enabled.

{dialog.object}.setValue('NAME','Edna');
image11.png

Methods in {dialog.object} are more than just wrappers around native javascript operations. They do the extra work to update the UX component's state so behaviors dependent on that information know when changes occur.