Sorting and filtering table results is a commonly requested feature and is important to do right. Being able to track sorting and filtering in the URL is ideal, and this solution allows for a seamless user experience. Technically, the solution below applies to any lists or tables that need sorting and filtering, not just Backbone Collection View.
Here is the example code block:
addSortOrFilter: function () {
//load in the "UrlHelper" module in your file header
let UrlHelper = _.has(UrlHelperModule, "UrlHelper")
? UrlHelperModule.UrlHelper
: UrlHelperModule;
//grab the existing URL
let url = Backbone.history.fragment;
//use this function to remove a URL parameter
url = UrlHelper.removeUrlParameter(url, "groupValue");
//use this function to set/overwrite a URL parameter
url = UrlHelper.setUrlParameter(url, "order", "inverse");
//run this function to seamlessly refresh the page with the new URL
Backbone.history.navigate(url, { trigger: true });
},
The code block above should often be defined as an event listener, perhaps on a click event or change to a dropdown. Line 17 will effectively re-render the view. You can then grab the URL parameters in the view’s initialize function so that each time the URL changes, the new parameters are grabbed, and the correct data is fetched.
initialize: function (options) {
//get params from the url
const params = Utils.parseUrlOptions(options.routerArguments[1]);
//set view attributes as needed based on the parameters
this.sort = params["sort"] || "";
}
Best practice: Utilizing the above solution with a view that has access to “beforeShowContent” allows for a very clean user experience!
For more detail, see the tutorial article How to Make SuiteCommerce Site Wait for Data Before a Page Loads!
This function allows you to fetch data from the server before your view loads.
beforeShowContent: function beforeShowContent() {
return this.collection.fetch({
data: {
sort: this.sort
},
killerId: AjaxRequestsKiller.getKillerId(),
});
},
Related Article: How to Force a Backbone Model to "Save" Synchronously
We like to update our blogs and articles to make sure they help resolve any troubleshooting difficulties you are having. Sometimes, there is a related feature to enable or a field to fill out that we miss during the instructions. If this article didn't resolve the issue, please use the chat and let us know so that we can update this article!
If you liked this article, you'll LOVE our book on SuiteCommerce! Order the free SuiteCommerce book today, and we'll even pay for shipping!
If you have general questions about SuiteCommerce or more specific questions about how our team can support your business as you implement NetSuite or SuiteCommerce, feel free to contact us anytime. Anchor Group is a certified Oracle NetSuite Alliance Partner and Commerce Partner equipped to handle all kinds of NetSuite and SuiteCommerce projects, large or small!
We are a premium SuiteCommerce agency that creates powerful customer portals. Unlike our competitors, we have already solved your problems.
Tagged with Training