How is this working without a query attached?

💬 App Building
1

I created a new app from a database, and went through the prompts to set it up to search via a column. It worked well (Though the code had DB_name.Table_name when only Table_name would work correctly. Just removed DB_name) -- The table updated in real time with the search results.

The new app's query code isn't actually attached to the proper. Keep that in mind.

I took that query code from the new app (right) and put it into another, pre-existing app (left), made sure the settings were mostly similar (Cosmetic options probably vary a bit) - The table does not update in real time with the search results.

  • How is the new app working without the query code being attached to an event handler?

  • Do I need to delete an initial query that refreshes the table to get this to show the search results in real time?

Check out a video demo here:

2

Hey there @runtcpip!

  • When a query is set to "Run automatically when inputs change" then any change to a value that's referenced using {{}} in the query code (or settings) will cause the query to run, meaning it doesn't necessarily need to be attached to an event handler. In your case, since {{ searchBar.value }} is one of your query inputs it runs whenever you type something into that field!
  • To show the search results in real time you just need to make sure you're passing those results to the "Data" field of you table (i.e. {{ textInput12SubmitHandler.data }})

Do you already have things configured accordingly?

3

Absolutely fabulous, the ( {{ textInput12SubmitHandler.data }}) in the Data field worked! Thank you.

But what if I need more than one code in the Data field (i.e, refreshing the table when I submit something via a form to the underlying DB?) The success event handler doesn't run, even when I set it to my query that refreshes the table.

4

That's a great question!

From what I've seen people will build something like a SQL query that takes multiple components (search bars, etc.) into account and then pass its data to their table. It sounds like you're looking to set up multiple SQL queries to feed into a single table component though which sounds interesting!

Tables can only reference one place to get data from, but you could have that point to something like a JavaScript query that conditionally passes different data depending on how it's triggered. By referencing the triggeredById variable you can see where the query has been triggered from and do something like:

if(triggeredById === "button1") return query1.trigger();
if(triggeredById === "button2") return query2.trigger();
if(triggeredById === "button3") return query3.trigger();

That will both trigger the desired query and pass along its data. So, in your table, you'd be referencing something like:

And then you'd attach event handlers to your components to trigger dataSelector instead of triggering the individual queries:

It's a bit of a departure from the pattern I was alluding to above since it's no longer relying on queries that "Run automatically when inputs change" and relying on event handlers instead. It sounds like that might be what you've been looking for from the beginning though :sweat_smile:

I've included an example JSON you can import and play around with! Let me know if that helps :slightly_smiling_face:

table_with_multiple_datasources (1).json (20.1 KB)

1 Like
5

Ooh, interesting. Thank you!