Filtering External API Datasource

Wappler General Need Help
1

First off, I do not have that much knowledge of APIs and using them in Wappler. I do this all the time with a filter and a query parameter in the server actions, but don’t know how on the API source. I searched and saw how to do sorting, which is awesome, but no filtering. I am trying to filter an API datasource with a basic text input value. When I type a value in the text box, it filters the API. The API, to my knowledge, does not have any query parameters. How do I do this completely on the client side? Can it be done?

Thanks,
Chris

2

I think you use the dataview component in app connect to filter the api source?

1 Like
3

I am using it to sort by headers, so possibly. I see some filter parameters but I’ve tried many different combinations on it with no luck.

4

i think you then have to use a repeat region and use the dataview component as the repeat data, not the api connection.

5

Right now I have an external API, and I have it connected to a dataview. I created a bootstrap table using the generator and using the dataview as a source. All that is working. I added a session storage manager for my sort and dir sessions and now I have sortable headers.All good so far. I just want to do some filtering of data. I tried using the Filter on the dataview:

filter=“ToteNumber.contains(Totenumber.value)”

where ToteNumber is the column in my Dataview and Totenumber.value is the value of my text input field I’m using.
And it does something… whenever I enter a value in the text field my grid does not return any rows. I clear it and it returns all rows so I think that may be my issue, something is not right there.

Thanks for your help on this.

6

@Teodor, any idea on what I’m missing or doing wrong?
I’m trying to filter the external API with the dataview. I have a column in my API called ToteNumber.

To filter I have a text field called Totenumber,

input id="Totenumber" name="Totenumber" type="text" class="form-control">

then I have this for my filter in the dataview:

filter="ToteNumber.contains(Totenumber.value)"

With noting in the text field, the table returns all rows. However If I enter anything in the text field, nothing is returned, even a valid filter value.

7

Please try:

filter="Totenumber.value ? ToteNumber.contains(Totenumber.value) : 'true'"

And probably it's not a great idea to have the column and search input have the same names...

8

That does not work either. Yes, it is a bad practiice on the naming. I just changed it to seachvalue

filter="searchvalue.value ? ToteNumber.contains(searchvalue.value) : 'true'"

9

Ah yes, my mistake, no need of ' ' around true:

filter="searchvalue.value ? ToteNumber.contains(searchvalue.value) : true"

10

Well that didn’t work either. Here is my page:
https://meijer.datatelematics.net/test.html

11

Works perfectly fine:

search
search1149×747 124 KB

12

Well shoot. I guess I need to restart my browser because it goes blank on anything.

So tell me, can you briefly explain why you had to use that statement with the “?” in it?

13

ok, I feel like an idiot. I was using lower case !

14

Well that’s a ternary operator … if there is a value in search, then filter the data source.

15

Thanks for the explanation. I will do some research on that.
Thanks for your help.

16

You can use the ‘to lowercase’ formatter on both expressions to make the search case insensitive.

17

Yep, works great! Thanks!

1 Like
18

5 posts were split to a new topic: Video capturing program