Question
Services Australia
AU
Last activity: 16 Nov 2017 0:14 EST
How to sort list data page using javascript
How to sort list data page using JavaScript, which will run on mobile. I know we can use grid to apply sort by optimize for mobile, but we are using RDLs to populate the data and we don't have sort functionality available OOTB to apply on RDLs.
-
Like (0)
-
Share this page Facebook Twitter LinkedIn Email Copying... Copied!
Accepted Solution
Services Australia
AU
instead of using above code, which is not working at my end, I tried different approach which solved my issue. below is the code that I used.
function D_UserWorkList_Filter( dpPage, params ){
var Urgency = params.SearchUrgency ;
var cc=pega.u.ClientCache;
var UserWorkList = dpPage.put( "pxResults",[] );
var UserWorkListIter = cc.find("D_pyUserWorkList.pxResults").iterator();
var SortList = new Array();
while(UserWorkListIter.hasNext()){
var wlPg = UserWorkListIter.next();
if(Urgency!="" && wlPg.get("pxUrgencyAssign").getValue() == Urgency)
{
var value ={
"Urgency":wlPg.get("pxUrgencyAssign").getValue(),
"ID":wlPg.get("pxRefObjectInsName").getValue()
};
SortList.push(value);// put the values in array to sort
}
}
SortList.sort(function(a, b)
{
return a.Urgency - b.Urgency;
});
UserWorkList = dpPage.put( "pxResults",[] );
for (i = 0; i <= SortList.length; i++) {
var param = SortList[i].ID;
UserWorkListIter = cc.find("D_pyUserWorkList.pxResults").iterator();
while(UserWorkListIter.hasNext()){
var wlPg = UserWorkListIter.next();
if(wlPg.get("pxRefObjectInsName").getValue() == param)
{
instead of using above code, which is not working at my end, I tried different approach which solved my issue. below is the code that I used.
function D_UserWorkList_Filter( dpPage, params ){
var Urgency = params.SearchUrgency ;
var cc=pega.u.ClientCache;
var UserWorkList = dpPage.put( "pxResults",[] );
var UserWorkListIter = cc.find("D_pyUserWorkList.pxResults").iterator();
var SortList = new Array();
while(UserWorkListIter.hasNext()){
var wlPg = UserWorkListIter.next();
if(Urgency!="" && wlPg.get("pxUrgencyAssign").getValue() == Urgency)
{
var value ={
"Urgency":wlPg.get("pxUrgencyAssign").getValue(),
"ID":wlPg.get("pxRefObjectInsName").getValue()
};
SortList.push(value);// put the values in array to sort
}
}
SortList.sort(function(a, b)
{
return a.Urgency - b.Urgency;
});
UserWorkList = dpPage.put( "pxResults",[] );
for (i = 0; i <= SortList.length; i++) {
var param = SortList[i].ID;
UserWorkListIter = cc.find("D_pyUserWorkList.pxResults").iterator();
while(UserWorkListIter.hasNext()){
var wlPg = UserWorkListIter.next();
if(wlPg.get("pxRefObjectInsName").getValue() == param)
{
UserWorkList.add().adoptJSON(wlPg.getJSON());
}
}
}
}
Pegasystems Inc.
IN
I'm assuming your application is offline-enabled. Are you using RDL for something that grids don't support?
If you're on Pega platform 7.3 or beyond, you can stay with grid because grids (Responsive, Mobile mode) supports majority of functionality that RDL provides. I'd advise you go with sorting JS for RDL only if you hit major roadblocks with grids.
Services Australia
AU
Yes it is offline enabled. I am using 7.2.1 and have implemented work List filter using Custom popular functions and would like to implement sort on filtered cases.
Pegasystems Inc.
IN
You can use same custom populator to sort data page. Once you have the filtered records, add the sorting code too.
function D_UserWorkListFiltered(dpPage, params){
var cc=pega.u.ClientCache;
var sortParam = params.sort;
var sortedPL = dpPage.put( "pxResults",[] );
var masterUserWork = cc.find("D_pyUserWorkList.pxResults").iterator();
while(masterUserWork.hasNext()){
var workPg = masterUserWork.next();
// Filter condition here
sortedPL.add().adoptJSON(workPg.getJSON());
}
//Sorting on task label
if(sortParam === "LABEL"){
var res = sortedPL.pxResults;
res.sort(function(a, b) {
var labelA = a.pxTaskLabel.toUpperCase(); // ignore upper and lowercase
var labelB = b.pxTaskLabel.toUpperCase(); // ignore upper and lowercase
if (labelA < labelB) {
return -1;
}
if (labelA > labelB) {
return 1;
}
// names must be equal
return 0;
});
}
}
Services Australia
AU
Thanks for providing the code, I tried below code, but it is not working to show the list in sorted order.
function D_UserWorkList_Filter( dpPage, params ){
var Urgency = params.SearchUrgency ;
var cc=pega.u.ClientCache;
var UserWorkList = dpPage.put( "pxResults",[] );
var UserWorkListIter = cc.find("D_pyUserWorkList.pxResults").iterator();
while(UserWorkListIter.hasNext()){
var wlPg = UserWorkListIter.next();
if(Urgency!="" && wlPg.get("pxUrgencyAssign").getValue() == Urgency)
{
UserWorkList.add().adoptJSON(wlPg.getJSON());
}
}
var res = UserWorkList.pxResults;
alert("Sort Started");
res.sort(function(a, b){return a.pxUrgencyAssign-b.pxUrgencyAssign});
alert("Sort Completed");
}
Pegasystems Inc.
IN
Can you give more information on what doesn't work? The alerts that you put, are they coming as expected.
Looking at the code, if SearchUrgency param value is say 40, you're adding all work with urgency 40 to the list. Then you're sorting by comparing same pxUrgencyAssign property value which will be 40 for every record, sorting will not take place in that case.
Services Australia
AU
yes I am getting same urgency value. but it shouldn't skip sort function. I am not getting the second alert (alert("Sort Completed");).
at the same time, after sort sorted data will be in res variable, how can we get that data to data page again to load on UI?
Pegasystems Inc.
IN
If you're not getting second alert, I'd assume you're getting JS errors while executing comparison. Can you put null checks around or debug and see if there is any other issue.
res variable is the updated DP in memory. D_UserWorkList_Filter and res are same.
Accepted Solution
Services Australia
AU
instead of using above code, which is not working at my end, I tried different approach which solved my issue. below is the code that I used.
function D_UserWorkList_Filter( dpPage, params ){
var Urgency = params.SearchUrgency ;
var cc=pega.u.ClientCache;
var UserWorkList = dpPage.put( "pxResults",[] );
var UserWorkListIter = cc.find("D_pyUserWorkList.pxResults").iterator();
var SortList = new Array();
while(UserWorkListIter.hasNext()){
var wlPg = UserWorkListIter.next();
if(Urgency!="" && wlPg.get("pxUrgencyAssign").getValue() == Urgency)
{
var value ={
"Urgency":wlPg.get("pxUrgencyAssign").getValue(),
"ID":wlPg.get("pxRefObjectInsName").getValue()
};
SortList.push(value);// put the values in array to sort
}
}
SortList.sort(function(a, b)
{
return a.Urgency - b.Urgency;
});
UserWorkList = dpPage.put( "pxResults",[] );
for (i = 0; i <= SortList.length; i++) {
var param = SortList[i].ID;
UserWorkListIter = cc.find("D_pyUserWorkList.pxResults").iterator();
while(UserWorkListIter.hasNext()){
var wlPg = UserWorkListIter.next();
if(wlPg.get("pxRefObjectInsName").getValue() == param)
{
instead of using above code, which is not working at my end, I tried different approach which solved my issue. below is the code that I used.
function D_UserWorkList_Filter( dpPage, params ){
var Urgency = params.SearchUrgency ;
var cc=pega.u.ClientCache;
var UserWorkList = dpPage.put( "pxResults",[] );
var UserWorkListIter = cc.find("D_pyUserWorkList.pxResults").iterator();
var SortList = new Array();
while(UserWorkListIter.hasNext()){
var wlPg = UserWorkListIter.next();
if(Urgency!="" && wlPg.get("pxUrgencyAssign").getValue() == Urgency)
{
var value ={
"Urgency":wlPg.get("pxUrgencyAssign").getValue(),
"ID":wlPg.get("pxRefObjectInsName").getValue()
};
SortList.push(value);// put the values in array to sort
}
}
SortList.sort(function(a, b)
{
return a.Urgency - b.Urgency;
});
UserWorkList = dpPage.put( "pxResults",[] );
for (i = 0; i <= SortList.length; i++) {
var param = SortList[i].ID;
UserWorkListIter = cc.find("D_pyUserWorkList.pxResults").iterator();
while(UserWorkListIter.hasNext()){
var wlPg = UserWorkListIter.next();
if(wlPg.get("pxRefObjectInsName").getValue() == param)
{
UserWorkList.add().adoptJSON(wlPg.getJSON());
}
}
}
}