SuperNimbusKnowledge Base

Retool Modules

Creating Modules

Retool modules are reusable groups of components and queries that can be shared across apps or used multiple times in a single app. This allows large, complex apps to be broken into smaller, more maintainable parts which can be used again without the extra time to set these components up again from scratch.

Modules can either be created from scratch in the place where apps are created, or a group of existing components can be duplicated into a module. Note, a business plan is required to create more than 5 modules.

We will create a ‘Search Bar’ module by selecting (holding down ‘ctrl’ button) the email, player name, date filter and search button components and clicking ‘duplicate to module’.

After naming it ‘searchBarModule’ , it will open in the editor. Module components can be added and edited in the same way as in an app.

Our ‘get_players’ query currently references the app components. In order to use the new module, we need to specify inputs and outputs. Selecting the module container, click on ‘Define inputs in Module Settings’.

Add four outputs named ‘email’, ‘playerName’, ‘startDate’, ‘endDate’ and reference the component values in the output values.

{{ playerEmailSearchTxt.value }}
{{ playerNameSearchTxt.value }}
{{ loginDateRng.value.start }}
{{ loginDateRng.value.end }}

Next we need to add a single input called ‘get_players’, setting the type to ‘Query’.

This will open the left code panel showing a new ‘module input’ query resource.

If we click on the search button, we see that the click event handler is still set to the get_players query, which is now the module input query rather than the main app query.

Save your work in the module and return to the test app.

Refresh the page to access the new module.

Note
If any changes are made to the module, the main app must be refreshed to apply the changes.

In the ‘Add’ panel on the top left, select ‘Modules’ and drag a new search bar under the main app container. Selecting it, we see on the top right a dropdown to assign an app query to the input query. Assign ‘get_players’ to it. Also, rename the component to ‘searchBar’.

Next we are going to update the SQL statement to reference the module outputs rather than the components.

SELECT player_id, last_login, player_email, player_name, access_type 
FROM players 
WHERE
  CASE
    WHEN {{searchBar.email}} <> '' THEN player_email = {{searchBar.email}}
    WHEN {{searchBar.playerName}} <> '' THEN player_name = {{searchBar.playerName}}
    WHEN {{searchBar.endDate}} <> '' AND {{searchBar.endDate}} <> '' 
      THEN last_login BETWEEN {{searchBar.startDate == '' ? new Date(0) : searchBar.startDate}} 
                                            AND {{searchBar.endDate == '' ? new Date() : searchBar.endDate}}
    ELSE TRUE
  END
ORDER BY last_login DESC
LIMIT {{playerTable.pagination.pageSize}}
OFFSET {{playerTable.pagination.offset}}

Note that now all the outputs that were created now appear in the Retool intelli-sense as a property.

To test the module, input a known player email to the search bar and that record should be returned.

Delete the old components inside the search bar container and move the search bar module inside.

Finally, when reloading the page, note that the behavior is that data is fetched with the default parameters and searching happens automatically when email or name is inputted. This is because we have the query set to run when inputs change, so we do need the search button.

Going back to the module, delete the search button, then return to the test app and reload. Our app is now ready for use.

Summary

Now we have simplified our application with a reusable module that can be used in other Retool applications.

From here, we will look at the Retool Workflow feature for task automation.

Jump to section