In this document and accompanying video we will discuss how the data in a List Control in a UX Component can be conditionally styled based on other data in the row.
In this example we have a simple List Component. We have specified that if the Country is equal to UK the font will be blue. If the country is Germany the Customerid will be underlined:
And if the Country is USA the font will be red, City will be bold and in italics:
So there are four different conditional styles being applied, and in each case a different method is being used to apply the conditional style. Let's take a look at how we do this. Click on the Design tab, then the smart field for List properties:
First let's look at Conditional Row Styles. There are two different ways in which the row style can be set: Server-side computation and Client-side computation. While the result might be the same for using each of these styles, the significant difference is how the condition is expressed. Click on Server-side computation:
The conditional expression, Country = "USA", is Xbasic code. We can write any Xbasic that we want, and call any Xbasic functions to compute this expression:
Click on the expression to bring up the Edit Condition window. We can change font color, underline, set other style attributes, or insert any Xbasic function that we want:
Now click on Client-side computation:
Then click on the data.Country = 'UK'. We see that we are writing Javascript code. Click on Help on syntax for expression for help writing the code:
The syntax is initially based on a pseudo-syntax that Alpha Five will convert into Javascript:
We can click on Insert Function for a list of pseudo-functions that Alpha Five will translate into Javascript. Alternatively, we can directly type Javascript:
Our fieldnames will need to be expressed using the data. prefix because this is what the data looks like now on the client-side in the List Control. If we wanted to include any client-side computed columns in the expression then we would need to use a client-side conditional style calculation:
That is how we got our font to be red for the US customers, and blue for the UK customers in our list. Now let's look at how the City column was done:
Click on the Design tab, then List properties, then the Fields tab in the List Builder window. We want to look at the City column, so click City then Conditional style:
Click on the expression Country = "USA" to bring up the Edit Condition window. This is where we can specify that the font should be bold and in italics if the country is USA:
In the next document and accompanying video we will learn how we underlined the Customerid if the country is Germany using a client-side calculation.