I am using a listview to display data from the PostgreSQL database. I also have a form on that page that allows users to enter data that will appear in the list. Is there a way, once the data has been successfully submitted via the form to refresh the list so the user can see that their data entry was successful?
Hey @tomm,
Re-running the query (queries) that you are using as your listView's data source should do the trick.
You can also add an event handler to reset the state of the listview, .e.g listView1.reset();
A caution note, this refresh may not work properly when you're on edit mode. Try refreshing the page to see if that fixes it.
Hey @MiguelOrtiz,
I tried that. It didn't work. The data for the listview is in arrays that are being created by a transformer. I didn't see anything in the event handler that would run the transformer again and I really didn't see a way to do a page refresh either.
transformers should automatically 'refresh' when any of their inputs change, so if you reference something like {{ somedata.query }} within it then the output will refresh without needing to be triggered
I was trying to get it to refresh once a user enters new data through the form, so at that point, nothing in the transformer is being referenced.
Hey @tomm
Since you have a need to control when things happen, whatever transformer you are using should be shifted to work as JS Query set to run only when manually triggered. Then when your user does the form submission the success event of the query which enters the data triggers your List View source query.
@pyrrho, I'm afraid I'm not following. How do I shift the transformer to work as a JS Query?
@tomm -- basically, the transformer is just a query that is auto triggered when an referenced component/query changes.
Since you are working with a form, you have an entry point (the submit button) to manually trigger the query you would like to run.
Shifting from the transformer to a JS Query is mostly just copy/paste, however you'll need to remove any {{ }} from the code as the JS Query does not require the brackets. If you have a declaration like let myComponentData = {{myComponent.data}} it would just become let myComponentData = myComponent.data.
In your case, it seems like you should be able to just re-run your PostgreSQL query for your data source as the success event handler from your form submission. The success event of the PostgreSQL query should trigger the JS Query we are talking about, which returns the data for your List View to populate.
This way, whenever the PostgreSQL query succeeds the List View should get the latest results.
I'm curious what else is in the transformer that your setup didn't work as it seems like it should be doing what you want if you are able to refresh the data source as @MiguelOrtiz suggested.
@pyrrho, unfortunately, that did not seem to work. All I get now is a blank page. I assume the JS Query becomes the data source for the listview, correct?
Hey tomm,
Yeah the query should be used as the data source instead of the transformer. What does the query output look like when you run the query? Is there any information in the debug console related to the query or its values?
I think what happened is, because the JS Query was set to manual, it did not run when the page loaded. When I run it in the editor, everything comes up fine. It won't let me set it to automatic.
That is right. The query needs to be triggered (by the success event of the PostgreSQL query) and then it should run whenever the data source query succeeds.
A transformer is basically the "automatic" version (they aren't triggered).