Set a value in the „Search Field“ from a previous page (Interactive Grid #4)

As already mentioned, we share with you some interesting tips and tricks that have always helped us in the development process.

Let's move on tip four :-) 

#4 Set a value in the „Search Field“ from a previous page

For this example we have first installed the sample dataset "Customer Orders" (SQL Workshop > Utilities > Sample Datasets). When this is done, we create an application with an interactive grid. As source we use the table "Customers". Then we specify the column type for "FULL_NAME" and "EMAIL_ADDRESS" as a link. As the link target we indicate the page to which the value should be transferred to the search field. By this done we are finished creating the first page. 

Now we create a second page with an interactive grid as modal dialog (can also be a normal page). This will be the page that we open by clicking on one of the link column. As source we use a SQL query with the following code:

select ORD.ORDER_ID,

       ORD.ORDER_DATETIME,

       CUS.FULL_NAME,

       CUS.EMAIL_ADDRESS,

       ORD.ORDER_STATUS

  from ORDERS ORD

  join CUSTOMERS CUS

    on ORD.CUSTOMER_ID = CUS.CUSTOMER_ID

After that, we assign a static-id to the Interactive Grid, so that we can address it via JavaScript without any problems. In our example this is "my_ig". To initialize the search value we need a page-item that we name "P2_SEARCH" and specify the column type to hidden.

So that the search field is set with the value of the previous page, we need two lines of javascript code to first set the value in the search field and then execute the search. Enter the following Code in the JavaScript Execute when Page Loads Editor:

apex.region("my_ig").call("getToolbar").toolbar("findElement", "search_field").val('&P2_SEARCH.');

apex.region("my_ig").call("getActions").invoke("search");

Finally, on the previous page we have to set the value in the two link columns. Click on link target and choose by "Name" the page-item "P2_SEARCH" and for the "Value" &FULL_NAME. (or &EMAIL_ADRESS.)

That's it...from now on you can click on a link column and set the value to the search field on the target page :-)

Optional hint:

If you set several search values one after the other, they will always be added. To clear the search field you can add a "close" button on the modal dialog page that triggers a dynamic action. Create a true action that execute a JavaScript Code with the following:

apex.region("my_ig").call("getActions").invoke('reset-report');

Finally to close the dialog create a second true action and set the action to "Close Dialog".

And here is the demo app.

We hope the tips and tricks will help you. 

If you have questions or suggestions, please leave us a comment ;-)