List Control - Grouping Part 1

UX Component

In this document and accompanying video we will discuss how to add group breaks to a List Control on a UX Component.


Watch Video - 1


In our example we have a simple list based on a customer table from the Northwind database.  The data has been grouped by country, and in addition to the group heading we also have a summary value showing the number of records in each group.

(Note: Northwind is a sample Microsoft Access database that is shipped with Alpha Anywhere.  It can be found in the 'MDBFiles' folder in the folder where Alpha Anywhere is installed):




Let's take a look at how that was done.  We will start with a list of the same data, but without any group breaks.  The data is being sorted by Customerid, which is the default order for this table: 




Click the Design tab, then List properties:




When the List Builder window opens, scroll down and turn on Has group breaks, then click Break field.  The Select Break Field window will open and we will choose Country:




We can also customize the group header.  If we do not create a group header template Alpha Five will automatically create a group break as shown below:




But we can customize the header by clicking Group header template:




When the Group Header Template window opens we will type Country: and then click Insert <BreakValue> Placeholder which will automatically insert the placeholder for the break expression:




We then type open paren, ( , then click Insert summary value:




The Insert Summary Field window will open and we will select Country, then count as the Summary type:




The summary value is inserted, and when we display our list our group heading will have the static text "Country:", followed by the value of the break field, followed by the count:




Click OK, then the Working Preview tab to see that our list now has group breaks.  We see that the break field value in the header is all in upper case because we made it case insensitive, so Alpha Five converted the country name to upper case before computing the break:




Let's edit that by clicking the Design tab, then List properties to bring up the List Builder window again.  Click Group header template to edit our template:




Inside the curly brackets we can put any Xbasic expression.  We will type lower, which converts the whole string to lower case.  Then f_upper which converts the lower case string to a first letter capital:




Click the Working Preview tab to see that our group headings now have only the first letter of the country capitalized.  The data is also sorted by country because when we add group breaks the data is automatically sorted by the breaks: