XE3 Visual LiveBindings: Lookup controls

Posted by on in Blogs
A lookup control displays a value that is different from the actual field value.

In this post, I modify the sample application built in the previous post about lookup lists.

The lookup list example ended with this design:

The lookup list ended with this form:

To demonstrate a lookup control, this form is changed so that the TLabeledEdit displays a color name instead of a color number. For example, "DarkGreen" is displayed instead of "25600".

To accomplish this, a "LookupDataSource" is configured in the object inspector.

First, show the LiveBindings designer by selecting the "View/LiveBindings designer" command. Click the line connecting LabeledEditColor1.Text and PrototypeBindSource1.Text to select the binding component.

The properties of LinkControlToField1 are shown in the object inspector:

Using the object inspector, change properties of LinkControlToField1 to use a "LookupDataSource":

  1. Set "LookupDataSource" to PrototypeBindSourceFill

  2. Set "LookupKeyFieldName" to "AColor"

  3. Set "LookupValueFieldName" to "AColorName"

After configuring the "LookupDataSource", the LiveBindings designer shows the relationship between the data sources and the TLabeledEdit as follows.

The form designer looks like this, with the TLabeledEdit displaying a color name rather a color number:

The source for this sample is available here. See LookupEditVCL.dpr.

A "LookupDataSource" can also be used with links between component properties and fields. For example, in this form, the property TLabel.Caption displays a color name using a lookup.

The "LookupDataSource" for a TLinkPropertyToField component is configured using the object inspector, just as the TLinkControlToField component is configured.

The source for this sample is available here. See LookupLabelVCL.dpr.


Check out more tips and tricks in this development video: