SpringBot sorting on custom columns Data table list view

Assumptions

This lesson builds on the details covered in SpringBot add related entities to Data table list view.

Model

As this lesson builds on the SpringBot add related entities to Data table list view lesson we will be using the same model.

Background

Client-side

Sorting is built into the Data table extension, therefore the client-side supports sorting on all new columns.

Looking at the HeaderOption interface in our collection.component.ts found at clientside/src/app/lib/components/collection/collection.component.ts.

export interface HeaderOption {
    name: string;
    displayName: string;
    sortable: boolean;
    sourceDirectFromModel: boolean;
    valueSource?: string | (() => string);
    valueFunction?: (() => string) | ((any) => Observable<any>);
    // Type of the field. Used in the date/datetime/time
    type?: ModelPropertyType;
    doHide?: boolean;

    // % protected region % [Add additional properties to our header option here] off begin
    // % protected region % [Add additional properties to our header option here] end
}

Sorting is based on the name property. For bot written headers, each header name directly relates to an attribute on our entities.

Following on from this idea, we can also use related entities for sorting purposes, as was shown in the previous lesson, by adding a Species column. You would have noted that sorting works for the Species column and this is why.

Server-side

Sorting is managed by the entity services. In the case of our example, the FishService.java as found at serverside/src/main/java/<projectName>/services/FishService.java.

There are two methods of note in the FishService.java.

• findSortedPageWithQuery, and
• getSort

findSortedPageWithQuery

Placing a debugger inside this method and exploring the values of sortBy we something like the following:

This value is parsed to the getSort method.

getSort

All sorting is handled here, custom sorting can be defined by returning QSort. The QSort class is a QueryDSL utility which allows us to define more complex sorting.

Task

In the same manner that we added the new column in the previous article, lets add a new column which transforms the Name attribute of our Fish entity to be all upper case.

The primary file we will be working with for this task will be the fish-tile-crud-list.component.ts which can be found at clientside/src/app/tiles/crud/fish/list/fish-tile-crud-list.component.ts.

1. Find our sortedHeaderOptions method and place the following inside of it.

    headerOpts.push({
        name: 'customColumn',
        displayName: 'Upper Case Name',
        sortable: true,
        sourceDirectFromModel: true,
        type: ModelPropertyType.STRING,
        valueFunction: (model) => {
            return model.name.toUpperCase();
        }
    } as HeaderOption);
   

   Four properties which are imported to note on this,

   Property	Description
   name	The name of the column, this is used as the key for sorting so take note of it.
   sortable	Set to true to enable the client-side sorting.
   type	Set to ModelPropertyType.STRING to allow for a sync string type.
   valueFunction	This is where we transform our model.

2. We now need to show the server-side how to sort on the keycustomColumn. Open FishService.java found at serverside/src/main/java/<projectName>/services/FishService.java and activate the protected region in the getSort method called Customise your sort method here by returning early.

3. Place the following inside it:

    // % protected region % [Customise your sort method here by returning early] on begin
    var direction = currentOrder.getDirection();
    var key = currentOrder.getProperty();
   	
    if (key.equals("customColumn")) {
        var fishEntity = QFishEntity.fishEntity;
        return (direction.isAscending()) ? QSort.by(fishEntity.name.asc()) : QSort.by(fishEntity.name.desc());
    }
    // % protected region % [Customise your sort method here by returning early] end
   

   Our sortBy method will now appear as follows:

    private Sort getSort (Sort sortBy) {
            Iterator it = sortBy.iterator();
   	
            while (it.hasNext()) {
                Sort.Order currentOrder = (Sort.Order)it.next();
   	
                // % protected region % [Customise your sort method here by returning early] on begin
                var direction = currentOrder.getDirection();
                var key = currentOrder.getProperty();
   	
                if (key.equals("customColumn")) {
                    var fishEntity = QFishEntity.fishEntity;
                    return (direction.isAscending()) ? QSort.by(fishEntity.name.asc()) : QSort.by(fishEntity.name.desc());
                }
                // % protected region % [Customise your sort method here by returning early] end
            }
   	
            return sortBy;
        }
   

   We have now enabled sorting for our custom column.