CustomControl

Description

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

Name
Description
Control Behavior Overrides - Customizing The Data Picker and Edit-Combo Behavior on a Phone

The UX component allows you to customize the behavior of certain controls based on the screen size of the device. For example, normally, the 'picker' for a date control, or an edit-combo control opens in a drop-down window, immediately under the control.

Creating a Custom Control Starting with a ViewBox Control

The easiest way to create a new Custom Control is to start by creating a ViewBox control and then once you are satisfied with the ViewBox control copy the generated Javascript from the ViewBox builder to the Custom control.

Contrast 'Custom Controls' in the 'Data Controls' section of the UX toolbox (discussed here) with 'Custom Controls' defined in the 'Other Controls' section of the the UX toolbar - search for 'UX Component - CustomControl - 'Other Controls' for more information.

'Data controls' are controls that have the concept of a control 'value'. These controls have a {dialog.object}.setValue() and {dialog.object}.getValue() method and when the UX is 'submitted' the value in these controls are submitted and are available in the e.datasubmitted object in your Xbasic event handlers.

Custom data controls are built using the ViewBox control. An understanding of how the ViewBox control works is essential before you can create a custom data bound control. For more information on the ViewBox control, click here.

To add a data bound Custom Control to a UX cpmponent, select the [CustomControl] item in the UX toolbox. To define the properties of the Custom Control click the smart field for the control properties. This will bring up the builder as shown below:

When you define a custom control you can specify the properties for the control 'now' (i.e. at design time), or you can generate the property settings at run-time using Xbasic. The 'Specify Now' option is rarely used because a Custom Control that uses the 'Specify Now' option is really no different than a ViewBox control and so there is little reason to use the Custom Control rather than the ViewBox. However, the option to generate the custom control definition at run-time using an Xbasic function is extremely powerful. and allows you to generate highly customized controls on your UX component.

See Also