In this document and accompanying video we will show how computed columns can be added to the List Control.
In this example we have a list that is displaying Firstname and Lastname as two separate columns but let's assume we would like to define a computed column that combines Firstname and Lastname into a single field:
To do that we can define the calculation to occur either server-side or client-side. If we want to do it server-side we would create a custom control, as we showed in a previous video. If we would like it to be client-side we would click on the Design tab, then List properties to bring us to the List Builder:
When the List Builder window opens click on the List Properties tab, then Computed colums:
Since this will be a client-side calculation the calculation will be done using Javascript. When the Client-side Calculated Fields window opens we can see examples of the required syntax by clicking on Click here for more info and examples:
We can see that a reference to any particular field is prefixed with "data", so we would need "data.Firstname" and "data.Lastname." We will then define a new column called "data.Fullname":
When we close that window we can define our new column in the Client-side Calculated Fields window. We type data.FN (Fullname) =, then click on Insert field name to insert Firstname automatically:
We then type + ' ' + (to leave a space), then use Insert field name again to insert Lastname:
We now have our client-side calculation and we have defined a new column called FN:
If we click on the List Layout tab we see FN is listed under Available Fields, and is described as "(Virtual)" which indicates that it is a computed column. Click on FN to add it to Columns in List:
Click save then the Working Preview tab to see our new column, Fn:
We can also define this using a custom control in which case the calculation would be done server-side using Xbasic.
The columns that are used in the calculation do not actually have to appear in the list itself. To do that click on the Design tab, then List properties, then the List Layout tab. Remove Firstname and Lastname by clicking on them and then the back arrow, or the Un-select field(s) button:
Now we only have FN listed. Let's move it to the top by clicking on the up arrow:
Now when we click on the Working Preview tab we see that the Firstname and Lastname columns and data, which are used as part of this calculation, are not displayed in the list:
What we have shown in this example is a client-side computed field but we could easily create a server-side computed field by clicking on the Design tab, then List properties, then the Fields tab. Click on Add Item and choose Custom Control:
