How to store/save a previous set of form inputs as a 'save search' function?

[mgaussie]

Hi all,

I have a form with 29+ inputs that I’m using to create a search query to an external API. I’d like to provide the end user with the ability to ‘save’ their search, which is essentially a combination of the form inputs - so the user can then use these again in the future.

For these to be re-used in the future, I imagine the best approach is to create a savedSearch DB table - which I’ve done, and have a field for every form field that can be used.

Then when the user selects a specific search I imagine I can just bind the value to the form input on the page - essentially creating a ‘saved search’.

What I’m struggling with is how to get the current search form fields from the form and into the DB. The most obvious solution was to on form submit to send the input values to an array, and then send that array data via a form input, or a $_GET to a SC. - I just can’t seem to find a way to transfer the form input values anywhere.

If anyone has any suggestions to guide me in the right direction, I’d appreciate it. Also VERY open to a better way to create a ‘saved’ search as above!

Matt

[sid]

Hi,
If the form fields are static, the table you create to save a “template/saved” search should have the same fields as columns. Then, you insert query in Wappler can make use of the CONDITION column to save only the search values which have been submitted.

For updating said saved search, you just have to bind all fields, and those submitted will be set and those not submitted will get set as NULL in the DB.

[mgaussie]

Hey Sid!

So the ‘Save Search’ input into the DB is not part of the actual form submit, it’s a separate action that the user can choose to take - which is what makes this more complicated.

Right now, they can submit the search and it’ll query the API etc… but, then there is a ‘save’ button - which I want the action to save whatever is currently in the form, without submitting the form - as they will likely already have done that.

So my challenge isn’t so much inputting data into a DB, but getting the values/data from the form when it’s not part of the Server Connect / Submit or Success action.

[sid]

You can submit the form even on click of the Save Search button.

1. Just add another hidden field say “savingSearch”.
2. On click of the button, first set this fields value to “1”.
3. Then in the same click event, also configure form.submit() event.
4. In the server action, perform both conditionally using this input.
5. On success of the form submission, if the “savingSearch” == “1”, just reset it and show user appropriate message, else it will do what regular form submission success would do.

[mgaussie]

Got it, thanks sid, and that’s smart and would do the trick.

I’d like to try and avoid adding additional step to the main form submit server actions, however as the ratio would be something like 1,000 to 1 in terms of uses for search vs uses for save search but with this I can get it working before finding another option!

[Teodor]

I saw you other comment in the data store topic. So indeed, why not use data store for this? Define your data store schema (i.e. 29 variables - one for each input).
You can either:

• store the inputs values on server connect form submit
  or
• store the inputs values on some other dynamic event like button click

Both are using the same logic. On (dynami_event_here) use insert, or if the search can be edited by the user use update or insert option:

There you can bind dynamic values to the data store variables:

Select your input > value:

So do this for all the inputs

Then on the page use dynamic values for the inputs and assign the values from the data store.

[sid]

How would this data store be sent to a server connect then? To save in the DB?

[Teodor]

Why store in the db at all?

[Dave]

@sid

How would this data store be sent to a server connect then? To save in the DB?

Myself, @max_gb, @Antony and @ben (and a few others) have had success.

A bit of guidance needed - Datastore to server action

We have just managed to do this. Will do a write up later. Quite simple, all came down to input names in our circumstance (finally we bound dynamic names to each input using the index). In the Multi-Insert (the array within the SC Action) the ‘record array’ variables must be named the same as the local storage items. That is about it… And obviously the insert variables must be named the same as the local storage items…

How Can I Pass an Array to a Server Action to Write to the Database?

Perquisites: App Connect Data Store component added, ID has been set to: responses Set the Data Store Schema, added 1 variable called: attendee_id For the purposes of the demo, I have setup a flow to insert two records to the data store on page load, my code for this is: (This will be replaced with your own method for your app) <body is="dmx-app" id="test" dmx-on:load="run([{run:{action:`responses.insert({attendee_id: 2})`}},{run:{action:`responses.insert({attendee_id: 3})`}}])"> Form A f…

Copy data from Data Store into database

Serverside: Use Database Multi Insert: [image] This will give to $_POST values: [image] Clientside: Use the Form Generator to produce the form, bind the values from the Data Store to the value of the inputs. [image]

That should get you on your way @sid

[sid]

Thanks for the links. I think I read Ben’s answer a while ago. Had forgotton.

The context in which @Teodor provided this as a solution, I was hoping there was a direct way to do this, instead of the repeat work-around.
I haven’t seen a reply from the Wappler team on this.

In context of the requirement here, it would be much much simpler to create a single hidden variable and use that in a condition on server action end.
With data store, first the user will have to create a new data store, setup the schema, then insert the values on click of the button, then setup the repeat logic that everyone has suggested, then build another server action to actually process that data and save in the DB.

Although there would be some similar steps with the solution I have suggested, but its any day simpler than Data Store in my opinion, for this context at least.

[sid]

That’s what the requirement of the question is.

[Teodor]

I got confused by his two posts the one here and the other one here:

Docs for Data Store Component

@Teodor - just came across this looking for a solution to something. I have a form, 29 inputs - relating to my ElasticSearch, as you know. I want to provide our end user with the option to ‘store’ a search, which can be any number of combinations from the 29 filters. I’ve been exploring the Data Store, and reading through this post. It looks like I can set an event > add record and even update/add record for the Data Store on form submit/success easily enough. However, what I don’t quite unde…

So it was not really clear to me if he wants to store everything in a database or in a data store

[sid]

I think he got confused too - trying to explore the options.

But if you could please confirm - the repeat is the best approach to store data-store in a database for now?

[Teodor]

@sid

But if you could please confirm - the repeat is the best approach to store data-store in a database for now?

Yes

[Antony]

@mgaussie

Right now, they can submit the search and it’ll query the API etc… but, then there is a ‘save’ button - which I want the action to save whatever is currently in the form, without submitting the form - as they will likely already have done that.

Hey there @mgaussie…

If I understand correctly, then I would just have a server action I call via GET.

So if your form is like this:

form id=mega_search
   input id=mega_search1
   input id=mega_search2
etc...

Then I’d have a server action / server connect “save_search” with $GET parameters like this:

form_field1
form_field2
etc...

Then when they click the [Save Search] button it just calls the server connect and passes in the values of:

save_search.load({form_field1: mega_search1.value, form_field2: mega_search2.value...})

Which you then save to the database in the server action.

I hope that helps!

Antony.

[mgaussie]

Hey all, thank you for all the input in this post.

@sid - I didn’t get confused at all, just looking for the right solution with limited info/documentation. I know what I need to achieve but the problem is the values aren’t passing through to the Server Connect, and i’d like to avoid the overhead included in the Server Connect with your suggestion (although your suggestion will work).

Thanks @Antony - this seems like the perfect solution, but the problem is the values just won’t pass through to the server action.

I’ve setup a new Server Action, trigger the action on button click, load the form values into the $_GET fields and then choose those new $_GET fields for the input, but it just won’t pass the values!

@Teodor - I was just exploring the Data Store as an option to solve this, I need somehow to get the form values into ‘something’ that I can then use as values in a Server Connect action, so data store seemed like a good option to temporarily hold these values to complete the action, or in advance of a user completing the action.

[Antony]

Hey @mgaussie…

I think the problem is you need to specify the input values in the format

formname.inputname.value

[mgaussie]

Hey @Antony - I believe I am doing that:

Form.card1_collapse1.input_currentTitle.value

I’ve even checked data on the page using dmx.app.data to ensure that the value does indeed get attached to the input, and it’s there - and uses the exact same structure - so i’m a little lost!

[mgaussie]

@Antony - got it. When using the data pickers, it was including the card1_collapse1 in the path, as the input is within the card1_collapse1. However, removing this made it work. Thank you for your help!!

@Teodor - i don’t know if this is worth looking into as a potential bug? Using the data picker - this failed, but when manually changing what the data picker creates (as above) it works.

[mgaussie]

@Teodor - still looking at DataStore for other use cases - in your image, you show the values I can input into - no doubt you created those in the Data Store schema?

I’ve created variables in the Schema, but when I go to input - it’s empty. Is this a bug?

My schema created in the Data Store:

Available inputs when I do a Dynamic Event:

Does this look like another bug? If so - I’ll add.