Data Controls

Description

Data Controls are controls used to create interfaces for manipulating and editing data from a data source (e.g. SQL database, web service, static data, etc.)

Discussion

A Data Control is an interface, such as a TextBox or DropdownBox, that can be used to display and/or edit data from a data source (database, web service, etc.) The control in the UX Component is either generated as an HTML input control or as a more complex control - such as the List control - that contains multiple elements (toolbars, buttons, a custom client-side layout, etc) that can be used to interact with the data.

Name
Description
DropdownBox

The drop-down box control resembles the textbox control except that it has a button next to it. When a user clicks on a button, a list of choices are displayed. After user selects one of the choices, the selected value is used to fill in the drop-down. The choices defined for a drop-down control can be static, dynamic, or based on a variable.

Text Area

'Text Area' controls provide a large area where users of an application can write.

RadioButton

Radio button controls can make it easy for users of an application to quickly select items in a list. The size and appearance of radio controls can be modified easily using the Custom Appearance Designer and CSS.

CheckBox

The CheckBox control can be used to add checkboxes to an application. Multiple checkboxes can be specified as a single CheckBox control.

Label

Places a stand-alone label on the component. Most controls also come with their own label.

List Control

Information about the List Control.

ViewBox Control

The ViewBox is a control that displays hot HTML. The HTML can either be statically defined or dynamically defined using an HTML Template.

Image - Data Bound

Places a data-bound image control on the component. Data-bound means that the image data it tied, or bound, to a server-side database. The images on the server can then be used to populate the image data displayed on a client-side device, like a mobile phone. Images that are not data-bound can be add to a component using the [Image] control in the other controls section.

SignatureCapture

The Signature Capture control is used to capture a signature in an application.

QRCode

Quick Response Codes or QR codes are optical labels that contain data and that can be added to documents and/or websites. A device equipped with imaging capabilities, like a smart-phone camera, can then be used to access the information contained within these labels. One advantage to using QR Codes is that they have the ability to store a large amount of information about something in a very small space. Because they are machine readable, this information can be used by devices to side-step tasks that would take the users of an application considerable time to deal with. For example, a QR Code can contain a long URL which, when photographed using a phone, will automatically take users to a website; without the user typing in the URL. QR Codes are used extensively in tracking, product identification, and marketing.

Hidden

Adds a hidden control to a component. The control itself can not be seen by users. Hidden controls can be used to pass values to other parts of an application. For example, they can be used in connection with Server-side action-scripting to assign a group to a new user when the user creates a username and password.

Slider

The Slider Control can be used to set the value of either a single control or two controls (e.g. start and end values.)

Switch

Switch controls allow users to turn settings in an application on and off with the tap of a finger.

Spin List

The Spin List control allows the user to select from a pre-defined list of choices by swiping the control to 'spin' the list. The item the list stops on is the selected item. This is an ideal control for mobile applications because it is 'touch friendly'.

Calendar

Adds a calander to a component. The days of the week and the format of the calendar can be adjusted using the calendar's control properties and the settings in the '[Other Properties]' section of the UX Properties page.

Tree

Tree Controls are useful for organizing sibling and child items. This section looks at populating tree controls using Ajax and Javascript.

Map Control

Inserts a map control into a UX component.

Chart

A control for adding server-side Charts to a UX Component.

Ink

The ink control allows users to enter drawn data into a database and annotate images.

CustomControl

Data Bound Custom Controls are a powerful technique for creating custom controls on a UX component.

More Controls

Additional Data Controls

Button List

The Button List displays a series of buttons in either a vertical or horizontal orientation.

TextBox

TextBox controls provide an means to create new text that can be entered into other controls, such as a list control. Through its 'Lookup' properties, in the control properties list, a Textbox can also be used to create Edit-Combo boxes that display a list of choices that users can select from. You can also add buttons to a textbox that will allow you to clear entered data, search for entries in a list, filter a list, or run some customized javascript code or action.

 Working with Data Controls in Javascript

Javascript can be written to interact with a Data Control programmatically. This is done by calling methods on the UX Component object, which is represented in your javascript code using the {dialog.object} placeholder object. The following methods can be used to interact with Data Controls (click the method name for additional information):

UX Method
Description
getValue

Get the current value of the Data Control. Works with all Data Controls.

setValue

Set the current value of the Data Control. Works with all Data Controls.

setValueFrom

Sets the value in a target control with the value from a source control. This is the equivallent of calling getValue to get the value from one Data Control and then calling setValue to set the value in another Data Control. Works with all Data Controls.

setControlDisplay

Show or hide the Data Control.

setDisabled

Enable or disable the Data Control.

setFocus

Set the focus to the Data Control.

getPointer

Get a pointer to the DOM element for the Data Control.

getControl

Get a Javascript object for the Data Control that can be used to perform more complex operations or access/manipulate the Data Control's settings. This method is only available for more complex controls, such as a Slider, Date Picker, Map, List, ViewBox, etc. Basic controls, such as a TextBox or Label, do not have Javascript objects.

The methods above are not limited to Data Controls. Other controls can also be manipulated by these methods, however not every control is supported by all methods. For example, controls that do not have a value, such as a Container, cannot be used with the getValue or setValue methods.

Alpha Anywhere's popup help for javascript functions includes access to menus and builders that can be used to help write javascript code. If you are unsure if a control can be used with a method, the popup help for some methods includes the ability to display a list of IDs for the supported controls available in the UX Component.

Right-clicking the popup help for getControl will display a list of the controls that can be used with the method.