In this document and accompanying video we will discuss how to define Custom Controls to display data in the List Control.
The Custom Control in the UX Component is just like the Custom Control in the Grid Component in that it allows you to define an Xbasic function to compute data to display in the list.
In our example we have a simple list displaying some static data. We would like to define a new Custom Control that combines data from the Firstname and Lastname fields, then displays it in a new column in the list. Start by clicking on the Design tab, then List properties:
Click on the Fields tab, then the Add Item button to add a new field. We will choose Custom Control from the list of available fields:
We will call it CC1 when the Name window opens:
Now we will define the Xbasic function that computes the data for our new Custom Control. Click the smart field next to Definition:
We see that in the function prototype we are told that we need to return a value called CC1_render that has some HTML in it. Click on the Insert button to see that in defining this function we have access to these fields from the current row:
Let's specify the HTML by removing this text:
Then typing "Fullname : " + then clicking the Insert button and choosing data.Firstname:
After "Firstname" is inserted we will type + " " + for a space then click the Insert button again and this time choose data.Lastname:
We can make the full name bold by adding <b> and + "</b>". Now we have the HTML that we will be rendering. This is the Xbasic function that will return the data for this Custom Control. The field values from the current row are available to this Xbasic function as it computes the value:
Now that we have defined our Custom Control let's click on the List Layout tab, then click on CC1 under the Available Fields list to add it to Columns in List so that it will be displayed when we run our list:
And let's change the width of our list from 6 inches to 10 inches just to make it easier to see all of the data:
Click on the Working Preview tab to see that our Custom Control has computed data for this column from information that was in the current row. Of course, since this is an Xbasic function that has been called for each row in the list we could create arbitrarily complex Xbasic to return the HTML for this list column. We could be displaying tables of data, or practically anything that returns some HTML for display in the current column. The Custom Control feature is an extremely powerful addition for creating highly customized views of data in the List Control:
