This document and accompanying video will continue our discussion on using custom data sources or Xbasic data sources to populate the list. In Part 1 we demonstrated how to make a call to the Yahoo web servers and retrieve the stock price data for GM, now let's change the ticker symbol to Yahoo (YHOO):
Watch Video - Custom Data Source - Part 2
Then run this by clicking the Working Preview tab. We see the Yahoo stock price data:
We can easily adjust the list height so that we can see more data without as much scrolling by clicking on the Design tab, then Controls. Under List Properties we will change Height from 3 inches to 6 inches. Click Save:
Now when we click the Working Preview tab we see more data:
An obvious enhancement might be to put a drop-down box at the top where the user can choose the ticker, making the call back to the Yahoo servers when the user changes the value in the drop-down box. To do this we click on the Design tab, then under Data Controls click on DropdownBox. The New Control window will open, and we will type in ticker to give our control a name:
When we click OK our control appears below list1, so we click the double up arrow to move the position of the drop-down box above the list of data:
Now let's define the choices for the ticker by clicking Choices under DropDownBox Properties:
When the Define Choices for 'ticker' (DropdownBox) opens, we type our choices GM, YHOO, GOOG, and AAPL:
Then we type GM under Default value so that when we run the component the drop-down box is initially populated:
Now we would like to adjust the onChange event of the ticker so that it makes an Ajax call back to refresh the list. The List Control has a method to refresh itself so we click onChange under Javascript:
When the Edit onChange Event window opens, switch to Text mode, then type the code as written below. What we are doing with this code is calling the refresh list data method of the component, and we are specifying which list (list1) we would like to refresh. When this method gets called an Ajax call back is going to be made to the Xbasic function that computes the data for the list:
Now by clicking Xbasic functions we would like to change the ticker from YHOO in this function to read the value of the ticker from the data that was submitted:
So we replace dim ticker as c = "YHOO" with the code below. What we are saying with this code is that if the value of the drop-down box was submitted, which will be true on all Ajax call backs but not the initial time we display the dialog, then we are going to read the value of the ticker from the submitted data:
Now we will add this code so that the first time we display the component, since the value of the drop-down box was not yet submitted, it will display GM:
When we click on the Working Preview tab we see GM displayed, then our other choices in the drop-down box. When we click on GOOG an Ajax call back will be made to the Yahoo servers to refresh the data and repopulate the list:
