List Control - Custom Data Source, Part 1

UX Component

In a previous document and video we looked at how the data source for the List Control can be a static data source, a SQL query, or a DBF query.  In this document and accompanying video we will learn how to use the Xbasic or custom data source.


Watch Video - Custom Data Source - Part 1


When we define a Custom Data Source all that we need to do is define the name of an Xbasic function that will get called.  This Xbasic function is expected to return a CR-LF delimited list of data that we would like to display in the list.  In this example we have defined getData:




When we click on getData the Custom Function window opens.  Click on More info about the Xbasic function:




We can see that the Xbasic Function is expected to return data in the form of a CR-LF delimited list of records with the first row of the return data being the field names in the data (Firstname, Lastname, etc.):




But the function can also return data in JSON format as well.  In this example we can see the data has been returned as an array of JSON objects, and in this case the JSON objects have value for each column that we would like to display in the list:




In this example we have defined that this data source has a function called getData, so there will be an Xbasic function that will call to populate this list.

If we click on the Fields tab in the List Builder window we will see the name of the columns that the function has returned:




Click on the List Layout tab to see the columns that we would like displayed in our list:




And under the List Properties tab we have increased the Width from 4 inches to 8 inches:




Run the list by clicking on the Working Preview tab.  Our example is a list that is displaying GM stock price data that has been retrieved from Yahoo by calling the Yahoo web servers:




Now let's look at the Xbasic function by clicking on the Design tab, then Xbasic functions.  We see our function, getData, highlighted at the top.  The function takes as input the e object.  For this example we have hardcoded the ticker to be GM but it could be passed in by reading another control on the screen:




Here we are constructing the URL for the Yahoo web servers' call, so we construct it with the month, day number and year for the time period in which we want to retrieve data.  We make the call to the Yahoo web servers using the http_get_page2 Xbasic function which returns some data to us:




The returned data is CHR (10) delimited, not CR-LF delimited so we clean it up and leave the data in pipe "|" delimited values, not comma "," delimited values.  We will also sort the data in ascending order, and add the column headings (Date|Open|High, etc.) to the first row.  Below that is the code to return the data: