220
Views
8
Comments
Solved
How to add dynamic sorting to API data bound to table records?
Application Type
Traditional Web
Service Studio Version
11.53.39 (Build 61952)

Hi, I'm new to Outsystems and have done the Developing Web Apps and am currently trying to finish the Integrating with Web Service course.

I'm trying to add sorting by column to my table records, but I realize that using RichWidgets\List_SortColumn is not an option as DynamicSorting is only available on aggregate and I'm using the API Response as my Source Record. 

I've browsed through the forums for similar questions and applied them to my app but I'm having trouble understanding and making them to work. When I clicked on the column header, the web shows that there was a loading process, but no sorting happens. Any kind of help or explanation would be greatly appreciated! Thank you in advance!

  1. Here's the property of my table records: 
  2. I tried passing on the column name as InputParameter for the OnNotify action in RichWidgets\List_SortColumn
  3. Then use ListSort to sort the TableRecords list:  


I fetched my data from Outsystems Contact API using the GET method.

  • Here's an example of the JSON response provided in the documentation:
  • The structure in my app that holds the response:  


  • The API method that my app consumed:  


  •  I ran a debug and make sure the InputParamater holds the column name properly: 
2018-10-29 08-31-03
João Marques
 
MVP
Solution

Hi StillLearning,


Take a look at the working example OML in attachment.

I'm saving the fields and ascend / descend order in a session variable to be able to keep the behaviour of swapping the sort direction upon clicking twice on the same column.


Kind Regards,
João

TraditionalWebSandbox.oml
2017-06-21 13-04-28
Mikko Nieminen

Your table records widget seems to be using data from GetContacts response (executed in Preparation) and in the OnNotify action, you are doing an another call to that same API, hence the naming GetContacts2. Even if your data is properly fetched and sorted inside OnNotify action, it is not assigned to the GetContacts.Response dataset. I don't recall any way to "refresh" API calls similarly to refreshing aggregates or sql queries, but assigning the results from OnNotify ListSort to the original GetContacts response before refreshing the table should/could help.

UserImage.jpg
Dawn_

I see! I didn't realize that.

Would you mind explaining how do I assign the result from OnNotify ListSort to the original GetContacts response? I'm guessing I should be doing it in my OnNotify action, but I don't know how to access the result of OnNotify ListSort.

2018-10-29 08-31-03
João Marques
 
MVP

Hi StillLearning,


The RichWidgets List_SortColumn widget is used to dinamically inject the column name in the SQL instruction, hence you specify the column name in the SQL syntax - {Contact}.[Name] in your example. 

Unfortunately, ListSort does not accept dynamic attributes, so you would have to have a Switch and apply a different ListSort for each single attribute.


Kind Regards,
João

UserImage.jpg
Dawn_

Hi João Marques,

Does this mean that List_SortColumn can't be used when dealing with data fetched from API? 

I tried your suggestion and make 2 switches for attribute Name and Company, but the sorting still couldn't work. Is it perhaps because I'm passing the SortBy InputParameter from List_SortColumn? Or am I doing something wrong?

Respectfully,
StillLearning


2018-10-29 08-31-03
João Marques
 
MVP
Solution

Hi StillLearning,


Take a look at the working example OML in attachment.

I'm saving the fields and ascend / descend order in a session variable to be able to keep the behaviour of swapping the sort direction upon clicking twice on the same column.


Kind Regards,
João

TraditionalWebSandbox.oml
UserImage.jpg
Dawn_

Hi João Marques, 

Storing the API response into local variable works perfectly! Thank you so much!

Sincerely,
StillLearning

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Hi StillLearning,

Please refer to my Medium article "Paginating, sorting and filtering data from a Data Action". It has all the information you need.

 

UserImage.jpg
Dawn_

Hi Kilian,

I've read your article and it was really helpful, but I was having trouble adapting it to Traditional Web App. I've solved my issue, but will definitely going back to your article when I'm developing Reactive App. Thanks!

Best regards,
StillLearning

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.