Hi All,
Just playing around with some new UI, and wondering if you can set a number of conditions in the front end and then ‘apply’ them to filter a DB query?
So instead of having the standard input fields set up as GET variables in the SC query and it instantly filters as you type, have a form with a few variable that the user sets, and then they hit an APPLY button to submit the form and have it use them as variable to filter the query?
If so, what’s the way to go about it?
Hello,
Just create your POST vars in the server action and apply them in the conditions.
Then setup your form to be a “server connect form” and add a submit button there. On submit, the server action will be executed and the form values passed as POST vars will be sent to the server action.
That is what i tried to do first but didn’t get it working… i’ll try again though in case i missed something.
Make sure your POST var names are the same as the form input names and make sure your form method is set to POST.
yes, the usual stuff 
I’ll try and debug on my end see if i’m doing something wrong. Sounds like its perfectly doable by what you say, so i’ll just make sure its all right on my end. Thanks for the quick replies though Teodor
So it kind of works… When i submit the form it doesn’t fail, and if i look in the dev tools in chrome i can see that it is submitting ok and returning the filtered query:
But the query in app connect doesn’t get updated with the filtered results. It remains showing all results the same as when the page loads.
Am I missing something else?
NB. I did try to load the SC query on form success, but that didn’t work.
What are you doing exactly and what do you have on the page?
Is this supposed to be simply update record form?
So, the idea is to have to have a large table in one section that displays users and some information (name, user icon, team, email, phone number etc)
Next to that table would be a ‘Filters’ section that has a variety of different filters for the user to apply (Firstname, lastname, team, department etc)
Rather than have the database filter instantly as they type, it might be a better UX for them to apply the filters they want, and then hit an apply button to filter the query/table.
There seem to be two ways to apply filters, 1 where they are applied as soon as you press them, the other when you select a number of filters and apply them all at once. That is what i’m trying to achieve here.
Ah i thought you want to do something on the server side only.
In your case you will need to use GET vars then and don’t really need a form/submit.
So when the button is clicked, the input values are assigned as variable values and this reloads the server action with the filters applied.
Thanks Teodor. I’ll have to look into it tomorrow, sounds like it should work though. Have a good day!
Hey Philip,
Good question! Here are a couple of ways I do what you are looking to do.
First - Get all the items (say invoices) with a single server connect database call, and then filter them in the user interface using .where(). So for example, if you want all the invoices for a certain contact, you can say:
invoices.data.invoices.where(`contact`, input_search_contact.value, "==")
You can chain the .where clauses and they act as a AND function. For example:
invoices.data.invoices.where(`contact`, input_search_contact.value, "==").where(`is_deleted`, 1, "==")
Will find all the invoices for the contact where the is_deleted flad is set to 1.
Second - if you want to get really clever, you can read all of a data item into a local Data Store and then use that. The benefit is you can do really sophisticated searches, and create custom lists and things like that. You end up using flows to manage it all.
I do that with my contacts. I read them all in, and have extra fields is_searched and in_list in the Data Store. My user interface allows my users to create any number of search terms, like tag="tag1" AND gender="Male" AND region="North" and I have flows which sets the is_searchedfield accordingly and then displays the contacts using the.where()modifier looking foris_searched=1`.
I hope that helps!
Antony.
As you can see, there are a number of ways to do this.
I think the most ‘standard’ way is to use a form, as you originally suggested, but using GET, as Teodor mentioned. Where multiple fields are involved, this is the approach I would usually take - where the query should only be submitted when any relevant fields are completed.
@Antony I think you are talking about something different.
The question here is not how to filter the data, but how to NOT filter it on every keystroke and only when a button is clicked.
The steps i listed do exactly that.
One other thing which might be worth mentioning:
Where you do you want to filter on keystrokes, using the default settings will mean searching for 'wappler' will result in 7 database queries being executed - one for each letter. Adding a value (milliseconds) in the Debounce field will prevent queries executing until a pause (eg of half a second). This will result in far fewer queries being executed and probably much better performance.
Thanks for that @Teodor…
Yes, your steps answered the question…
But I was giving an alternative to the question!
I was giving some background on other ways to fetch and then filter data… so giving @Philip_J some more possibilities!
Morning all! Always nice to wake up to multiple solutions to a problem. After re-reading this I know exactly what Teo means and I’m sure that will work nicely.
I’d be interested to know a bit more about what you’re doing @Antony so I might on you. I also want my users to have a lot of control over viewing their data.
Cheers guys!
Hi Anthony,
Does this approach apply to my case e.g.
Question: Can I assign or use on the client side variable or where clause or flow from dynamic event as explained by you to filter data into the different tabs?
I currently have multiple database queries in server connect for each status on the same form tabs.
Thanks for your time.