I have a form, when a user presses enter on a typed/chosen selection from a form input I then store that to an array, and so I can display this as tags below the form input.
What I’d like to do is improve the way a user can go back to a search and save a search, the best way to do this will be with the page URL using queries.
Do you need to update the URL? Could you have a ‘save this query’ button, without redirecting, that either saves a copy of the direct URL to the DB for the user to access later or copy the url to the clipboard for the user to paste wherever they want?
I do need to update the URL as the user is updating their search live, e.g adding or removing a parameter from one of the inputs.
But, you’ve hit the nail on the head - I plan on using the full URL string to store in the DB as a ‘saved’ search. Then when the URL loads, I take the params from the URL and apply those to the arrays, and the inputs to create the same search.
What I can’t figure out is how to append/add/substract terms from the inputs. I’m thinking I’ll need a ‘goto’ URL type event for each change using the browser component?
So for our simplest search, we have say 6 inputs.
For each input we have a named array component. Whenever a user types/selects an input value and stores it (via enter, or on click) then we store that individual value in the array. We then display the selections beneath the field input using that same array.
On submit of form we then pass the array values via a hidden form input to our backend which then runs the query via JSON to an external API.
We aren’t currently saving a search in anyway, and it’s a negative UX when a user moves to another page and then goes back on the browser - they lose all of their search. If we can apply the search parameters to the URL dynamically, then we can more easily save a users search, plus if they hit back the search will just regenerate. I can get this working when I manually write the URL - but I’m a little stuck on how to generate the URL dynamically
Hey @bpj sorry for the delay - got late here yesterday. Here is a chunk of the code for the form but obviously not the whole form as it’s quite large! Perhaps might be easier to take a look at the staging environment?
Thanks for sharing that.
I would say that you could use the browser component but the goto parameter is going to be quite long, particularly for your most complex forms.
At the moment the fields are populating with query.curr_title for example. If you have multiple titles to search for, you have no way of reflecting that in the query string of the URL.
One option would be to change the inputs so the value is not set from the dmx-value, have as empty on load - use the removable tags to allow users to see what has been selected.
On page load use repeat through the query parameters with a flow and use.split(',') (will allow you to use a comma separated list for parameters that have multiple values) - add these to the relevant arrays using the array
Have the arrays reflected as ‘tags’ like you already have.
On enter, use the browser goto component and set up the URL: