Bind the controls on your UX to fields in one or more existing tables.

Description

This page contains two main parts. The first part allows you to bind an existing table, or tables, from a database to the UX component. The second part lets you map, or "bind", controls in the UX component to fields in the existing table(s). This binding can also be done from the Data Binding properties section of individual controls on the UX Controls page.

For a video example that explains how to bind a UX component to an existing table watch this video or follow the guides below.

Specify Tables

Use this command once you have designed your UX and added controls to it. This command allows you to bind the controls in your UX to fields in one or more tables. The binding information that you specify using this command can then be used in the 'afterDialogValidate' event to save the data that the user submitted to the tables.

Bind the Component to an Existing SQL Table 

  1. In the UX Builder open the Data Binding page from the main menu.

  2. On the Data Binding page click on the 'Bind the controls on your UX to fields in one or more existing tables'.

  3. Click the 'Specify Tables' button.

  4. In the lower left of the 'Select Table(s)' dialog click the 'Table type' dropdown and select 'SQL'.

  5. At the bottom of the 'Select Table(s)' dialog click the 'Select' button next to the SQL connection string textbox control.

  6. Create a connection string to the Northwind database and click OK.

  7. Click the 'Add table' button.

  8. Click the 'Select' button.

  9. Select a Table from the Northwind database, like the 'Customers' table, and click OK.

  10. Add an Alias for the table, such as 'customers', and click OK.

Bind UX Controls to the Specified Data Bound Table

Create The Controls to be Bound 

Once a link to an existing data bound table has been defined you can click the button shown below to match controls to fields in that table. This section is a continuation of the 'Specify Tables' section above it.

  1. It is necessary to first create the controls before they can be assigned. On the UX Controls page open the 'Data Controls' menu. Click on the [TextBox] option to add a textbox control to the component. Give this textbox the name and label of 'CustomerID'

  2. Add a second [TextBox] control to the component with the name and label 'Contact'.

  3. Add four more [TextBox] controls with the names 'Address', 'Company', 'City', and 'PostalCode' to the component. Set the label for each control to match the name.

  4. In the Data Controls menu click on the [DropdownBox] option to add a dropdown box control. Give this control the name and label of 'Country'.

  5. Highlight the dropdown box control in the controls tree. In the DropDownBox Properties section in the properties list on the right click the [...] button next to the 'Choices' property.

  6. Select the 'Static' in the 'Choices are' menu. In the Static Choices area create a list of countries to choose from when the dropdown box is clicked, like the incomplete list shown below. Each entry should be on its own line. Click OK

    Afghanistan
    Albania
    Algeria
    Andorra
    Angola
    Bahrain
    Bangladesh
    Barbados
    Belarus
    Belgium
    Belize
    Benin
    Bhutan
    Cambodia
    Cameroon
    Canada
    Chad
    Chile
    China
    Eritrea
    Estonia
    Ethiopia
    Finland
    France
    Haiti
    Jamaica
    Japan
    Jordan
    Liechtenstein
    Lithuania
    Luxembourg
    Marshall Islands
    Mauritania
    Mauritius
    Mexico
    Micronesia
    Namibia
    Nauru
    Nepal
    Netherlands
    Oman
    Pakistan
    Palau
    Panama
    Papua New Guinea
    Qatar
    Romania
    Russia
    Rwanda
    Saint Kitts and Nevis
    Saint Lucia
    Samoa 
    San Marino
    Taiwan
    Tajikistan
    Tanzania
    Thailand 
    Uganda
    Ukraine
    United Kingdom
    United States
    Vanuatu
    Venezuela
    Vietnam
    Yemen
    Zambia
    Zimbabwe
  7. Open the 'Defined Controls' menu and click the 'Submit-Reset' option to add an Submit button and a Reset button to the component.

  8. Highlight all of the data controls in the controls tree. Open the 'Containers' menu and click on the [Frame] option and click OK to add a frame around the controls.

Bind the Controls to the Table. 

  1. Open the 'Data Binding' page from the UX Builder's main menu. Click on the 'Bind the controls on your UX to fields in one or more existing tables' button.

  2. Click the 'Bind UX Component Controls to Table Fields' button.

  3. In the lower left corner of the 'Bind Controls to Fields' dialog click the 'Automatically map fields' button. Any fields that match the name of the controls you defined in the section above will be linked to those controls.

  4. Double click on the 'Contact' variable. From the list that appears select the 'ContactName' field and click OK.

  5. Double click on the 'Company' variable. From the list that appears select the 'CompanyName' field and click OK, OK, and OK again.

Filtering Controls in the List 

If your component has a large number of controls, the Filter can be used to search for controls. You can also sort the fields by clicking on the column header in the Bind Controls to Fields window.

Add a List Control to Display Changes 

You can also view changes using the debugger

  1. Open the UX Controls page again and again open the 'Data Controls' menu. Click on [List] to add a list control to the component.

  2. Highlight the list control. In the properties listed on the right click on the [...] button next to the 'List properties' property in the List Properties section. The List Builder should open.

  3. On the List Builder's 'Data Source' pane select 'SQL' in the 'Data Source Type' menu.

  4. In the pane's properties section click the [...] button next to the 'Connection string' property. Create a connection to the Northwind database.

  5. Click the [...] button next to the 'Table name' property. Select the 'Customers' table and click OK.

  6. Click the [...] button next to the 'Field list' property. Select the 'CompanyName', 'CustomerID', 'ContactName', 'Address', 'City', 'Country', and 'PostalCode' fields.

  7. Scroll down to the 'Return Value' section of the list. Click the dropdown next to the 'Return value type' property and select the 'PrimaryKey' option.

  8. Open the 'List Layout' pane. Use the blue > arrow to move all of the data fields from the 'Available Fields' list to the 'Columns in List' section. Click OK to close the list builder.

Save Changes on the Server 

  1. In the UX Builder's main menu in the 'Events' section open the 'Server-side' page. In the 'Server-Side Events' menu click on the 'afterDialogValidate' event.

  2. Place the cursor inside the function definition for the 'afterDialogValidate' event. Click on the 'Action Scripting' button in the top-right part of the toolbar.

  3. From the available actions select the 'Save Submitted Data to Table(s)' option and click OK.

  4. In the action's properties list under the 'Save Data' section click the dropdown next to the 'After submit action' property and select 'Enter another record'.

  5. Move down the action's properties list to the 'Refresh List Controls' section. Check the checkbox next to the 'Refresh List controls' property.

  6. Click the [...] button next to the 'List controls to refresh' property. Select the list you defined, in this case 'list1'. Click OK

  7. Run the component in Live Preview. Enter information into the fields inside the frame and click Submit.

    It might be necessary to adjust the toggle settings between controls and the width of the list control and the frame control on the UX Controls page
  8. The new data should appear in the existing customers table.