Table sort on column click in react for fetch from other data source

Anyone know how to get the table sort by column click on react if your table data source is a "Fetch from other sources"?

Hi Jason,

For that you have to add onsort action on your table.

When you add this it will automatically create a new action with initial sort logic and also ceates some local variabe to manage sorting. 

At the end of this action you have to refresh your Fetch Data Action. Abviously your fetch data action has to use these local variables while fetching data to get the correct date from whereever you get fetching it.

Nikhil Gaur wrote:

Hi Jason,

For that you have to add onsort action on your table.

When you add this it will automatically create a new action with initial sort logic and also ceates some local variabe to manage sorting. 

At the end of this action you have to refresh your Fetch Data Action. Abviously your fetch data action has to use these local variables while fetching data to get the correct date from whereever you get fetching it.

Nikhil - I did that - but A) it seems like it is not actually rerunning the fetch from other data source and B) even when I did a listsort by the sortby variable it was creating the table didn't update.


Jason Herrington wrote:

Nikhil Gaur wrote:

Hi Jason,

For that you have to add onsort action on your table.

When you add this it will automatically create a new action with initial sort logic and also ceates some local variabe to manage sorting. 

At the end of this action you have to refresh your Fetch Data Action. Abviously your fetch data action has to use these local variables while fetching data to get the correct date from whereever you get fetching it.

Nikhil - I did that - but A) it seems like it is not actually rerunning the fetch from other data source and B) even when I did a listsort by the sortby variable it was creating the table didn't update.


If possible share your sample oml or create a minimal oml with this issue and share so that I can check.


Hi Jason,

Adding to what Nikhil suggested, you also need to set the attribute at which you need to do the sorting.

Add the OnSort event.


And Refresh the dataSource at the end.


And also pass the "TableSort" variable to dynamic sorting.



I have also attached the sample oml, where data is fetched from OtherSource and is bind to table.


Hope this helps you.!

Regards,

LK

Lakshmi Kumar Yadav wrote:

Hi Jason,

Adding to what Nikhil suggested, you also need to set the attribute at which you need to do the sorting.

Add the OnSort event.


And Refresh the dataSource at the end.


And also pass the "TableSort" variable to dynamic sorting.



I have also attached the sample oml, where data is fetched from OtherSource and is bind to table.


Hope this helps you.!

Regards,

LK

My only concern with the above is that effectively it recalcs all the fields - because in my fetch from other data source I have several aggregates which then are combined into one list coming out of the fetch from other data source.  I wanted to see if I could just capture which column they click, do a client list sort on that list and then refresh the table?  That way I am not completely recalculating all the data by refreshing the whole fetch from other data.


Hi Jason,

Have you tried using "ListSort" client action which is available under system module and pass your final list to it as source and use the column to sortby.



Hope this helps you,

Kind Regards,

LK

Lakshmi Kumar Yadav wrote:

Hi Jason,

Have you tried using "ListSort" client action which is available under system module and pass your final list to it as source and use the column to sortby.



Hope this helps you,

Kind Regards,

LK

Lakshmi, I did try that however apparently doing a list sort is not enough of a change to get react to refresh the table itself.  How can I force a refresh of the table via a client action without refreshing the whole "fetch from other source"?


So an update to this - I was able to get it to work by doing the following:

making an onsort action - and doing a listsort then after the list sort save the "fetch from other source" output list to itself.  HOWEVER, if I do the listsort sort by input being the "sortby" input to the action - it doesn't work!  If I hard code the value on the sort it works.  Only change I do is change that hard coded value to "sortby" (no quotes) - the sort no longer works.  I did debug and the sortby value is getting the correct text into it - but the listsort action seems to not like it.

OK - so I found what is going on.  The "By" input to system component listsort ISN'T text.  Its a generic type.  

If you go to a table in react and create the generic list sort action, it makes the input to the client action "By" a type text.  When you go to the listsort action you CAN select sortby to be the input.  However, it doesn't work.  If you go to the by input of listsort and double click it to open the expression editor, you can put in "if(sortby="PI"," and then hit control-space to open up the auto complete I then see the green box and PI which I can select.  For the false I just selected another one.  That works!  So the ultimate fix for this is that OutSystems needs to redo the input to listsosort on their side such that it will take text input and convert that to one of the generic types if the names match up.  That is the only way it will work dynamically.  Otherwise you have to go to each listsort by input and do a bunch of IF statements to convert your text input into one of the generic types.