Filtering from a Data View

Wappler General How To
#1

Hello,
I have a bootstrap 4 table which is outputting data from a Dataview which uses a JSON file. I wanted to add some filtering like in the "Real Estate’ demo so added a couple of custom select boxes containing Timezone and Course Type.

However, if I add data to the filter, nothing runs. As an example, my timezone values in the select are ALL, Europe, India, America/Canada so I tried adding timezone == “timezone.value” in the filer box but then the table doesn’t populate. If I add timezone == “Europe” then the table runs and only shows Europe. Could someone point put the obvious, please?
Thanks, Brian

#2

Try removing the quotes, I think this will make it appear as a literal rather than a value

#3

Screenshot 2020-03-27 at 11.15.17
Screenshot 2020-03-27 at 11.15.171012×373 31.7 KB
Hello Brian,

I hope you are well. Thank you for getting back to me.

I’ve tried but unfortunately, the table then doesn’t load. I’ve also tried brackets, single and double all to no avail. Just looking at the estate demo again to see what I must have missed.

Best regards,
Brian

#4

Please use a different name and id for the input. Now it’s using the same name as your timezone column…

#5

Hi Teodor,
I have just tried that and still had an issue. I then swapped the fields around so the select item came before the value and it worked!

Brian, Teodor, thank you both and have a good day!

#6

Hi Teodor,
Sorry for adding another question to this thread. The selects are working fine so I just wondered if there is a wildard setting I could use. For example,

Select Timezone Other USA/Canada ...etc

For the Other option, ideally, this would load all timezones but presently, it only loads zones where there is no data.

#7

Try setting the search term for “All” to “%”, this will search on the default wildcard for anything

#8

Hello Brian,
Thank you for getting back to me.

I tried the percentage but it still returned zero. I wondered if it was different when using a dataview. This is what I have at the moment.

<select id="select_tz" class="custom-select">
						<option selected="" value="1">Select Timezone</option>
						<option value="USA/Canada">USA/Canada</option>
						<option value="Europe">Europe</option>
						<option value="Australia">Australia</option>
						<option value="India">India</option>
						<option value="South Africa">South Africa</option>
						<option value="%">Other</option>
					</select>

Have a good weekend.
Cheers, Brian

#9

Sorry, i wrongly assumes the value was being send back to a server action. If it is within an App connect dataview then try the Javascript wildcard symbol with is an asterisk *

#10

Hi Brian, thanks again for looking at this. It seems that whatever is added as the option value is taken literally so *, $, % etc are looking for entries matching those exactly. If I enter “” then I see all entries that are blank. The database solution in your tutorial were much easier :slight_smile:

All the best,
Brian

#11

Have you tried a conditional statement (just guessing here).
Something like {{ condition != ‘’ ? condition : Null }}

#12

Hi Brian, ah, I had not thought of that. I’ll give it a go.
cheers,
Brian

#13

Hi Brian,
Sorry for the delay on getting back. I’ve not had much luck with this so have simplified the design to get round the problem. I have a bit more time to play with this now so hope to pick up more skills going through this forum.
Cheers,
Brian

1 Like