Rather than requiring the user to click a button to select a company and pass their CustomerID to the getDataForChart function, we will use an AJAX callback to call do this from the Spin List control.

Observe as the instructor defines the callback.

  1. In the left-side pane, click Controls.
  2. Click the customerIDHolderBox control.
  3. For this control, define an onChange Event (it is in the JavaScript group).
    1. Add a new Action, an Ajax Callback.
    2. For Function name, enter passThisCustomerIDin.
    3. Click the Create function prototype hyperlink. This will generate a lot of well-written code we can take advantage of.
    4. Click .
    5. Click .
    6. Enter the comment Pass the selected CustomerID to the SQL statements.
    7. Save the onChange Event.
  4. Now we will write the callback. In the left-side pane, click Xbasic functions.
  5. The Xbasic Functions script window appears. Paste in all the code you copied.
  6. On line 4 (which is open), enter (on one line):

passThisCustomerIDin = getDataForChart(e.dataSubmitted.customerIDHolderBox)

The e object describes the current UX Component. It contains everything about the UX Component, including the data a user may enter or select. One of its properties is dataSubmitted, which can refer to a table field, or to some other control value, as we did here.

Remember that when we first started writing the function we set up the getDataForChart function to receive the selected customer’s CustomerID field value as an input parameter and then used it as an argument for the SQL statements.

Now you define the callback.

Touching up the interface
  1. Hide the customerIDHolderBox and Button controls.
  2. Make the width of the letterSlider and companyNameSpin controls 100%.