JavaScript

UX Component Methods

IN THIS PAGE

Placeholders
Properties

Description

Placeholders, properties, and methods that can be used on the client-side to interact with UX components.

Discussion

JavaScript can be used on the client to manipulate the UX component using the {dialog.object} JavaScript object. {dialog.object} is a placeholder that is replaced with the actual JavaScript object at run-time. Methods on this object are available for manipulating the UX, including methods for saving and restoring data; working with Lists, Repeating Sections, Panels, Windows, and other controls; interacting directly with the DOM; calling into the Cordova framework; and more.

In addition, there are numerous other placeholders available to use with your component that are replaced for you at run-time, allowing you to reference things such as the UX component's alias, the name of the stylesheet in use, embedded components, and more. See Placeholders below for a list of what is available.

Name: Description
Application Repository Methods: UX component methods for reading and writing information to and from the application repository.
Callback Methods: UX component methods for making Ajax Callbacks and client-side calls to web services.
Chart Methods: UX component methods for manipulating chart controls.
Control Methods: UX component methods for working with Data Controls, action sheets, buttons, ink, PDF Viewer, captchas, dropdown boxes, and more.
Data Binding Methods: UX component methods for a submitting, resetting, and populating a data bound UX.
Data Cache and Data Series Methods: UX component methods for reading and refreshing the Client-side Data Cache and Data Series.
Data Validation Methods: Methods for setting errors and running data validation in a UX Component.
Editor and Editor Set Methods: Methods for working with Editors and Editor Sets in a UX Component.
FormView Methods: UX component methods for manipulating FormView controls.
General Methods: General methods for working with state information, embedded components, simulating online status, inspecting the application environment, and more.
GraphQL Methods: Methods for querying GraphQL.
IndexedDB Methods: Methods for storing, retrieving, and removing data in IndexedDB
List Control Methods: UX component methods for working with List.
Local Storage Methods: Methods for saving data to and loading data from Local Storage in a UX Component.
Integrated Login Methods: Login and Logout methods. For use with a UX component with Integrated Login.
Mobile Methods: JavaScript methods for working with Mobile applications distributed using Alpha Launch or as Cordova apps.
Other Methods: Methods for saving debugging output and converting JSON to Excel format.
Panel Methods: Methods for navigating panels in a UX component.
Payment Processing Methods: Stripe API methods.
UX Progress Bar Methods: UX component methods for displaying and updating a simple progress bar.
Repeating Section Methods: Methods for manipulating Repeating Sections in a UX component.
Responsive Layout Methods: Methods for triggering responsive layout rules and getting layout (e.g. screen size) information.
Tab and Accordion Methods: UX component methods for the Tab Control and Accordion Control.
Window, Container, and Message Methods: Methods for working with Windows, Containers, and Messages including Transient and Dropdown Messages in a UX Component.

Placeholders

Placeholders are dynamic objects that can be used JavaScript code to reference objects that are defined by the Application Server.

Placeholder: Description
{dialog.ComponentName}: Gets replaced with the alias of the UX Component. For example, if the UX alias is 'DLG1', then is replaced with 'DLG1'.
{dialog.ControlIdEscaped}: The control Id of the control. Special characters in the id are Javascript escaped. You must use this placeholder (and not {dialog.ControlId}) if you want to use this placeholder in a selector (such as JQuery - jQuery('#{dialog.controlIDEscaped}') )
{dialog.ControlId}: The control Id of the control. Note: See comment on {dialog.ControlIDEscaped}.
{dialog.EmbeddedCustomComponent_[Alias]}: Used to get the Object name of an embedded Custom Component. Replace [Alias] with the alias you specified for the embedded Custom Component object. You can use this placeholder to execute methods on the embedded Custom Component.
{dialog.EmbeddedUX_[UXAlias]}: Used to get the Object name of an embedded UX Component. Replace [UXAlias] with the alias you specified for the embedded UX object. You can use this placeholder to execute methods on the embedded UX.
{dialog.EmbeddedGrid_[GridAlias]}: Used to get the Object name of an embedded Grid Component. Replace [GridAlias] with the alias you specified for the embedded Grid object. You can use this placeholder to execute methods on the embedded Grid.
{dialog.listId}: For use with the List control. Gets replaced with the ID of the current List control.
{dialog.object}: Gets replaced with the name of the Javascript UX Component Object. For example, if the UX alias is 'DLG1', then is replaced with 'DLG1_DlgObj'. Use this placeholder when you want to call a method of the UX Object. e.g. {Dialog.Object}.submit(), to submit the UX to the server.
{dialog.Style}: Gets replaced with the style name of the UX. For example, if the style is 'GlassOlive', then gets replaced with 'GlassOlive'.

Properties

_dataSeriesDataObject

Object containing data series that have been published to the client. See the Publish data to client-side UX Component property to learn more. Has the following properties:

<SeriesName>ObjectArray

Contains the data in a series. Replace <SeriesName> with the name of the series. E.g. {dialog.object}._dataSeriesData.Names. If the series does not have a named subseries, the object will be an array. Otherwise, <SeriesName> will contain one or more subseries properties containing the data in the series:

<SubSeries1>String: A CR-LF delimited string of values for a data series sub-series. Replace <SubSeries1> with the name of the subseries. E.g. {dialog.object}._dataSeriesData.Names.Firstname
<SubSeriesN>String: One or more additional properties containing a CR-LF delimited string of values for a data series sub-series. Replace <SubSeriesN> with the name of the subseries. E.g. {dialog.object}._dataSeriesData.Names.Lastname

_rsOverwriteRowMsgstring

Message shown to user when data in a Repeating Section is copied into a dirty row. If not set, the default message "Overwrite existing data in row?" is used.

_localStorageSettingsObject

Local storage settings for the UX Component.

ajaxCallbackTimeoutnumber

The maximum number of milliseconds to wait for a response from an ajax callback to the server. This property can be set in the onRenderComplete event.

dialogIdString

The UX Component name. Equivalent to {dialog.componentName}. Prefer to use {dialog.componentName}.

originalValuesJSON array

Contains the original values for the controls in the UX Component. Values are stored in a JSON array. The contents of the array are dependent on the structure of the component.

The {dialog.object}.resetForm() uses the values stored in originalValues to reset the controls in the UX component to their original state. You can change the data in this object to modify the original values for controls.

Show data in the originalValues property

var origValues = {dialog.object}.originalValues;
// Show values in a popup window
alert(JSON.stringify(origValues));

If you return JavaScript to set the row count and values of a Repeating Section in the onDialogInitialize event, you must set the original values manually. See onDialogInitialize for more information.

Original values are not default values.

stateInfoObject

A JSON object containing state information. Can be used to read and set state information for the component. See also getStateInfo() and setStateInfo().

Report an issue with this page