Aliases & Placeholders
Description
Aliases & placeholders let you reference objects in the UX Component without requiring you know their generated IDs.
Every component in Alpha Anywhere, whether it is a Grid, UX, or Custom component, has an alias. The alias is a unique name given to the component at run-time, so it can be referenced in javascript. In Working and Live Preview, the alias defaults to a known value ("DLG1" for UX components.) When you insert a UX component in an .a5w page or as an embedded object on another UX component, however, Alpha Anywhere will prompt you for an alias for the UX component.
Aliases are used to create unique IDs for the UX component and its controls. If you inspect the code for your components in a web browser, you will see the UX component's alias is used as part of the ID for all of the elements on the page. If you want to interact with an element on the page in your UX component, you need the alias. Since the alias in Working Preview isn't the same as the alias used when your UX component is published, you need a way to reference the alias in your javascript. To do this, use placeholders.
Placeholders act as substitutes for various properties and objects in a component. The UX component alias, for example, is used to determine the IDs of controls in the UX component as well as the name of the UX component javascript object, which contains javascript methods for interacting with the UX component. There are placeholders for other information about the UX component, such as the CSS style used, embedded components, or the full ID for a control. You can find a list of available placeholders in the Insert Placeholder window.
Insert Placeholder provides a description of available placeholders along with some examples. Insert Placeholder can be found in the javascript editor. It will either be located at the bottom of the editor as a link called "Insert placeholder..." or found under the "Insert..." button found in a toolbar located at the top of the editor
The placeholders you will most frequently encounter are {dialog.object} and {dialog.componentName}. {dialog.object} is the javascript object that contains methods and properties for manipulating and querying the UX component. {dialog.componentName} is the alias for the UX component, which was defined when the UX was either embedded in an .a5w page, another component, or opened using Action Javascript. {dialog.componentName} becomes important when you want to reference elements in the UX component. The UX component uses the alias as part of the ID for elements on the page, in part to ensure IDs are unique. You can use methods in {dialog.object} get pointers to controls in your component (eg, {dialog.object}.getPointer), but other elements in the DOM can only be accessed using $() (a shorthand for document.getElementById) or similar methods.
You may also want to specify IDs for objects in Action Javascripts or free-form HTML so you can reference them. For example, you can specify an ID for the window containing a UX component in the "Open a UX Component" Action Javascript. Specifying an ID for the window allows you to acquire a pointer to the window object so you can call methods, such as hide(), on that window. You need to guarantee your window ID is unique, however. If multiple instances of your UX component will be present on the same page, you can use {dialog.componentName} to create a unique window ID for each instance of the UX component. Without {dialog.ComponentName}, you could potentially create a scenario where both instances of the UX try to update the same window.
Not all placeholder objects are available in all contexts. For example, {dialog.ControlID} and {dialog.ControlIDEscaped} are only used in Control Javascript for a control. In Control Javascript, you can specify javascript for a control to add third-party features like jQuery's datepicker. {dialog.ControlIDEscaped} is provided to make it easier for initializing a custom javascript control. Embedding a jQuery date picker is an example of a custom control.
var ele = jQuery('#{dialog.controlIDEscaped}');If you tried to use this same code in a Client-Side javascript event, such as onRenderComplete, Alpha doesn't know what to do with the placeholder {dialog.controlIDEscaped}. {dialog.controlIDEscaped} has been used outside the context Alpha expects --- the Control Javascript property. If you wanted to reference the same control using jQuery elsewhere, you would need to construct the ID manually. You can use {dialog.componentName} to help re-create the ID.
var ele = jQuery('{dialog.componentName}\\.V\\.R1\\.TODAY');List objects also have several placeholders which, like {dialog.controlIDEscaped}, can only be used in javascript inside the list control.
Embedded components can be referenced using placeholders as well. If you embed a UX component in your UX component, you can use the {dialog.EmbeddedUX_[UXAlias]} to get a pointer to the embedded UX component's {dialog.object} object. You can treat {dialog.EmbeddedUX_[UXAlias]} the same way you treat {dialog.object}. It will have all the same methods, allowing you to interact with the embedded UX component directly. Embedded object placeholders can only be used if you specified an explicit alias for the component. This is also true if you want to use {dialog.object}.getChildObject() method to get a pointer to your embedded component.