Placeholder

IN THIS PAGE

Properties that use a Placeholder Control
Using Javascript with the Placeholder Control

Description

Placeholder controls can be used to dynamically insert things into a component in a designated location.

Discussion

The Placeholder control is used to dynamically insert messages - such as an update indicating that a process completed or injecting debugging information for the List control - into the layout of the UX Component. They do not take any space in the layout until content is added to them. They are used when configuring Action Javascript, properties for controls such as the List or FormView, UX Component properties, and more.

Properties that use a Placeholder Control

This is a list of some properties that use the Placeholder control. This list is not exhaustive but highlights where Placeholder controls are commonly used in Alpha Anywhere applications.

Placeholder for UX Component validation error messages (UX Component)
Placeholder for login errors (UX Component)
Placeholder for progress display (List Control)
Placeholder for debugging info (List Control - Search Part)
Div id for Fade Out Message (Action Javascript)
Placeholder for progress indicator for File Upload (Action Javascript)

Using Javascript with the Placeholder Control

The Placeholder control is not a data control, but it's content can be manipulated using the {dialog.object}.getValue() and {dialog.object}.setValue() methods. Many {dialog.object} methods that take a UX Control ID as a parameter can be used with the Placeholder control.

There is no Javascript object that represents the Placeholder control, so the {dialog.object}.getControl() method will not return anything if passed an ID for a Placeholder. If you want to get a pointer to the DOM element for the Placeholder, use {dialog.object}.getPointer().

// Get the content of PLACEHOLDER_1
var content = {dialog.object}.getValue('PLACEHOLDER_1');

// Set the content of PLACEHOLDER_1
var html = "<p><strong>A Bold Statement!</strong></p>";
{dialog.object}.setValue('PLACEHOLDER_1',html);

// Hide PLACEHOLDER_1
{dialog.object}.setControlDisplay("PLACEHOLDER_1",false);

// Get a pointer to the DOM element for PLACEHOLDER_1
// and manipulate it directly:
var ele = {dialog.object}.getPointer('PLACEHOLDER_1');
if (ele) {
    ele.style.border = "2px solid black";
    alert(ele.innerHTML);
}