With Retool introducing multi-page apps with local and global scope, it’s now easier than ever to build out complex internal apps and connect them in a single streamlined app infrastructure.

Nevertheless, as your app ecosystem grows, easy navigation becomes critical so that users can quickly find the information they need. The separation of Global and Page functionality in Retool means that by putting your data in the Global scope, you can apply actions from anywhere in your application.

One of our preferred uses of this functionality at Bold Tech is adding a Global Search. With Global Search, users can quickly search for items across multiple pages and entire datasets, and even take actions directly from a global modal. This mirrors the kind of functionality users will also be accustomed to using in common SaaS products, and so creates a more intuitive experience overall. 

Nevertheless, do bear in mind that loading all your data globally may hinder performance, so do consider performance when implementing this kind of functionality.

In this tutorial, we’ll show you how to build a Global Search feature for a CRM application in Retool, with built-in quick actions. 

Here’s how this will look:

Let’s get started.

Building the search modal UI

Let’s start by setting up the search bar in our app header. Add a text input and configure the placeholder settings to display like a search bar.

Next, we’ll add a modal to the Global Scope. This means the modal will open from any page in our multi-page app. When a user clicks into the search bar, this modal will open to allow for a deeper dive into the results. 

Pull another text input into this modal so that the user can continue to search from here.

Next, add an event handler to trigger the global search modal to open when the user interacts with the search bar, on Focus.

Set the action to Control Component, and choose the global search modal as the target component. Set the method to Show, ensuring that the modal opens when the search bar is clicked.

So that the user can continue typing their search as soon as the modal opens and doesn’t need to click into the new search bar, add another event handler that’s also triggered on focus, that sets the modal’s search bar with the ‘focus’ method.

Create quick actions from the search bar

Now that we have a global search modal that opens from any app, we can set up some Quick actions that allow users to access commonly used actions without needing to navigate to a new page.

We’ll set this up so the user can also search for the action. For this use case, we’ll allow users to ‘Add Order’ or ‘Add Task’. 

To set this up, first create a global variable to store search actions and to allow us to trigger specific actions based on what the user types. Add an array of objects to define actions. Each object should have:

• action: The type of action (e.g., ‘orders’, ‘tasks’).
• label: A descriptive name for the action.

Here’s an example of how it should look:

[
{ "action": "orders", "label": "Add Order" },
 { "action": "tasks", "label": "Add Task" }
]

Now that we’ve defined the actionSource variable, let’s display its data in a table inside the modal. This table component makes it easier to control which actions we display: it will display all actions when nothing has been searched, or only return relevant actions when a user types in the search bar.

To set the search functionality, add the text input value to the ‘Search term’.

Add a new column and change its type to Button. Customize the label or icon to make it clear that the action can be clicked. 

Now, let’s configure the table to run a script when a row is selected, which executes the action. Setting this action on Row Select makes the component feel like a more intuitive button list than a table. 

Add a new Event handler to the table components, set the event handler to trigger on Select Row and set the action to Run Script so you can write custom JavaScript.

In our app, we already have an ‘orderModal’ which contains the ‘Order’ form, and a drawer frame with our tasks form. 

if (currentSourceRow.action === "orders") {
 formState.setValue("Add")
 orderModal.show()
} else if (currentSourceRow.action === "tasks") {
 formState.setValue("Add")
 addTasksDrawer.show()
}

This script updates the form state and displays the relevant modal based on the selected action. 

Now, you have a simple Quick Action set up in your Global Search Modal that can easily be extended to more actions, or even added to other areas of your application to make actions even easier to find.

Setting up global search in your Retool application

Next, we’ll set up the search bar to return database items that correspond to our search.

First, we created a JavaScript transformer to format our data for the search. 

In this example, we filter our source data if the search term matches the first or last name of the customer. 

const allRows = {{sourceData.value}} || [];
const searchTerm = ({{modalGlobalSearch.value}} || "").toLowerCase();
if (!searchTerm) {
  return allRows;
}
return allRows.filter(person =>
  (person.firstName || "").toLowerCase().includes(searchTerm) ||
  (person.lastName  || "").toLowerCase().includes(searchTerm)
);

Next, add a container and a ListView to your Global Search modal. Connect the data source to the transformer you just created. 

In our example, we then used the ListView to display customer details in a card format, allowing users to quickly view key information in a clear and concise format. The values are based on the ‘item’ attributes and dynamically show according to the ListView data. 

Finally, to improve the UX and avoid empty containers being shown without explanation, set the search results container to hide when no search term has been entered, and the Actions to show ‘No matching actions’ when there are no matches.

And with that, you have the basic structure for a global search tool in Retool! 

You can extend this functionality by searching for data within clear categories, for example, returning records related to the person searched for, or by allowing users to jump to the correct page from this search page.

Wanna continue building in Retool? We have plenty of articles and tutorials about all things Retool and integrations into Retool, head to our blog to check them out!