A Flexible View Control for XPages Part 6 – Sorting
Posted: February 6, 2020 Filed under: Bootstrap, Custom Control, DataTables, Domino, JavaScript, jQuery, XPages | Tags: DataTables, Domino, jQuery, XPages 3 CommentsWhen I started building the Flexible View Control, one of the driving forces was to significantly reduce the amount of back-end Domino views that would collect in my applications. I was just as guilty as anyone of creating a new view with the same selection formula and columns as an existing view with the only difference being the column arrangement or how the new view was sorted/categorized.
Build a Client-Side Sorting Demo
If you’ve used DataTables then you know that by default DataTables makes sorting your data by any column very easy. As a result, The Flexible View Control, being a mashup of Domino XPages and DataTables, has advanced sorting capabilities baked in.
Create a new XPage
To demonstrate this, I start by making a copy of my viewBasic XPage and call it viewBasicSorting.
Since I want to re-use this new XPage for multiple demos, I’m making my viewKey dynamic by having it look for a querystring parameter to get its value:
This means anytime I load this XPage I need to supply the name of the desired View Definition in the url:
viewBasicSorting.xsp?viewdef=used-cars-sorting-default
Create the View Definition
Now I create my new View Definition. Note that we are using an existing view and existing rest service to fetch the data.
In the screenshot above, there is no value in the Client Sort (1) field, meaning when the DataTable is built client-side it will display in the order the data was loaded from the rest service. If your back-end data is sorted by the 1st column, then that is how the data will display in the constructed DataTable.
viewBasicSorting.xsp?viewdef=used-cars-sorting-default
Adding a client-side sort
But what if your users insist on another view that sorts by Price with the Price column being first? In Notes/Domino, you begrudgingly copy your view, move the Price column to the front and make sure it’s sorted. UGH!
This is where the “Flexible” part of the Flexible View Control comes in. All I have to do is create a new View Definition, point it to the same data, and simply drag the Price column to the top and designate that as the sort column in the Client Sort (1) field. In my case I want to sort it descending.
The results
Now, I can load my view viewBasicSorting XPage and simply change the viewdef url parameter to show a different “virtual view”, in this case By Price:
viewBasicSorting.xsp?viewdef=used-cars-sorting-byprice
Recap
Using one back-end view, and one XPage equipped with the Flexible View Control, we can display countless views to the front-end user by simply making a View Definition for each front-end view we need to display. Cool!
Advanced Sorting
When specifying the column to sort in a View Definition we use the Client Sort (1) field. But you may have noticed a field below that named Client Sort (2) and perhaps you wondered what purpose this serves.
DataTables has incredible advanced sorting capabilities, as the gif below illustrates.
To get the multiple column sorting capability in the Flexible View Control, we use the Client Sort (2) field. To demonstrate I created a new View Definition that points to the same Domino view we’ve been using. This time, I make the Client Sort (1) by Year (descending) and add Price as a secondary sort, also descending.
When I look at the By Year view I can see that it has a primary sort (by year) and secondary sort (by price).
Sorting Server-side
My preference is to do all sorting client-side and have my back-end views act as fairly static tables of data that are indexed well and can respond quickly to requests. The View Definition does have a “Server Sort” field but it currently is not operable.
However, if you do need to sort server side before returning data view a rest service or xAgent you can certainly do so.
To demonstrate sorting the price column I start by creating a new View Definition with pretty much all the defaults except I move the Price column to the first position (Note: the column you want to be the first sort does NOT have to be in the first position).
Next, I update the rest service that has been used repeatedly to look for the sortColumn and sortOrder query string parameters:
<xe:restService id="restService1" pathInfo="used-cars-phil-chevy-tahoe-basic"
state="false">
<xe:this.service>
<xe:viewJsonService systemColumns="2"
viewName="xspPhilPaChevTahoe" defaultColumns="true" count="1000">
<xe:this.databaseName><![CDATA[#{javascript:@DbName()[0]+"!!demos\\used_cars.nsf"}]]></xe:this.databaseName>
<xe:this.sortColumn><![CDATA[#{javascript:context.getUrlParameter("sortColumn")!="" ? context.getUrlParameter("sortColumn") : ""}]]></xe:this.sortColumn>
<xe:this.sortOrder><![CDATA[#{javascript:context.getUrlParameter("sortOrder")!="" ? context.getUrlParameter("sortOrder") : ""}]]></xe:this.sortOrder>
</xe:viewJsonService>
</xe:this.service>
</xe:restService>
Finally, the Flexible View Control has a queryString parameter that can be utilized to pass url parameters to the rest service being called to retrieve data.
context.getUrlParameter("viewdef") == "used-cars-sorting-server-byprice" ? "&sortColumn=PRICE&sortOrder=descending" : ""
The Results
viewBasicSorting.xsp?viewdef=used-cars-sorting-server-byprice
While we get the desired result, notice that there is no indication in the column header that Price is the sorted column. Only by examining the data can you determine that.
Dear Michael Smith.
With great pleasure and interest I watched your presentation about a work with Datatable and Rest Services. It’s grandiose.
Unfortunately, I didn’t find your another database with examples of Datatables.. In database you describe more than 20 examples of using of the datables and rest services. I watched a video demonstration of these examples, but unfortunately I could not find this database anywhere and look at the code.
Can I ask you to send this demo.nsf to me (please) in the email or give a link where it will be download. Thank you so much.
With great respect Oleg I.
Regard.
P.S. My email: arheo_pterix@list.ru
P.P.S. Sorry for writing my poor English.
LikeLike
Dear Michael!
Thank you for your presentation. Everything really works and is extremely interesting.
Could you show how you can use your flexible view control in a modal window, and is this even possible?
Looking forward to your thoughts.
Best Regards.
P.S. My email: arheo_pterix@list.ru
LikeLike
Oleg – Thanks for your question. I answered it on StackOverflow:
https://stackoverflow.com/questions/61061571/xpages-flexible-view-control
LikeLike