Category: Question and Answers
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

Set search field of a table from Javascript

Issue

I need to access a page with a large table, where selecting a row updates a detail table. I can enter this page normally, but I also need to come from a different page with a stored value search. I can pass the stored value and query the DB, but I want to show the user that the table is only showing a subset of results. Is there a way to set the value shown in the search box of a table from Javascript?

Resolution

The solution is to use the storedValue as the Default Search Text property of the table widget. This can be set using Javascript by accessing the widget's properties and setting the value of the Default Search Text property to the storedValue. Here's an example code snippet:

const myTable = await $appsmith
                    .getPageWidget("page1", "table1");
myTable.setProperty("defaultSearchText", storedValue);

This code retrieves the table widget on a page named "page1" with a widget ID of "table1" and sets the Default Search Text property to the storedValue. This way, when the user navigates to the page with the search already set, the table will display the filtered results and the search box will show the value of storedValue.