Reactive Web Apps: Filter data inside of a local (List) variable?

Hi there!

I'm a beginning OutSystems developer working in Reactive Web Apps.
We're working on a screen that gets a list of data through an API.

This data should then be able to be filtered inside of the screen (through a search, and two dropdowns).
I've created a local list variable, of the same structure that we use to map the Output of the API on. I've assigned this local list variable with the data coming from the API call. The local list variable is used to show the data in a table on the screen.

But now, my question is: how can I best create the filters, so the data gets filtered on a screen?

Thanks in advance!
Marleen

Hi Marleen,

Do I understand correct you first get the 'full' set of data from the REST API, and from there on you only want to user to be able to filter the set of data received from the initial REST API call? Or do you want to pass the filter criteria to the REST API?

Regards,

Daniel

Daniël Kuhlmann wrote:

Hi Marleen,

Do I understand correct you first get the 'full' set of data from the REST API, and from there on you only want to user to be able to filter the set of data received from the initial REST API call? Or do you want to pass the filter criteria to the REST API?

Regards,

Daniel

Hi Daniël,

Thanks for your response!
The first option: filter the set of date received from the initial REST API call (without passing the filter criterea on to the API)

Thanks,

Marleen

I would save the result of the API in a local list variable named ApiResultList

Than have another list variable named FilteredList, that would contain the filtered result of the list received from the REST API. Bind this widget to your table widget.

Then have client screen action to filter the ApiResultList based on the user filter criteria. Bind this action to the filter widgets or filter button.


Hi Daniël,

Thanks for your info.
One follow-up question: Is there a way to use aggregrates to filter the data inside this local variable, like I'm used to when fetching data from a database with a filter? Or will I need to program the list filter steps manually, clearing the list first, then using if's and switches to fill it again (for example)?

Thanks!

Hi,

You can filter lists using ListFilter function (available as client- and server actions). Basically you filter the ApiResultList and it returns a newly popuplated FilteredList.

Alternatively if you need more advanced filter options that what ListFilter provides you can filter with following steps:

  1. Call ListClear to empty FilteredList
  2. Loop over ApiResultList using a For-each 
  3. Per item decide if it needs to be appened to FilteredList using the ListAppend action

Then there is another option to use for example a Forge component like: 

https://www.outsystems.com/forge/component-overview/1293/dynamic-linq

Regards,

Daniel

Hi Daniël,

Thanks, I'm trying to get the first approach to work: using the ListFilter function client action.

Here's my action:


I think something's going wrong in the assign, or the table though.


Here's my regular screen (without applying filters):


and here's the result for when I search for the letter 'b': 3x the first list item


When running the debugger, everything (including the assign to the FilteredList local list variable) seems to be working well, however the debugger crashes when the action ends.

Hi,

Your logic is wrong.

First of all in this scenario no need to clear the List. The ListFilter always returns a new list.

Second, the assign statement is not needed and causes problems. You should not assign lists, also in your case it is not necessary.

Just assign the FilteredApiResultList.FilteredList to the Table widget Source property.

Regards,

Daniel


Hi Daniël,

Thanks so much for taking the time to look at my logic. I'm definitely a beginner, and there's much to learn! :)

I'm trying to assign the Table widget Source property with FilteredApiResultList.FilteredList like you said, however the Table widget doesn't recognize the FilteredApiResultList.FilteredList because the ListFilter is inside my 'OnSort' client action.

This is why I thought to assign a local variable with the list.
Should I use 'ListAppend' to assign it instead?

Ah you are right, that is my mistake.

What you can do is define a local list variable FilteredList at the screen level with the same definition.

Then in you client action do a AppendAll from FilteredApiResultList.FilteredList to the FilteredList.

As FilteredList is now withing the scope of the screen and thus accessible for the Table widget.

Thank you Daniël, it didn't fullly work yet - the correct amount of items are displayed, but not the correct items.


I'm calling it quits for now (Monday, a colleague is back from holiday who is a more senior OutSystems developer :) )

I want to thank you for your understanding, and effort to get the filter working :) When it's fixed, I'll respond here and mark one of your responses (the most appropriate) as the solution.

Thanks again!

if you can share an oml, I can have a look at it.