Welcome to day five of the 12 Days of Retool! Yesterday, we looked at Four CRUD Operations, and how they usually map to HTTP verbs. If you missed that post, or any other post during the 12 Days of Retool, a full list of every post in the series can be found at the bottom of this page. Today, we are going to see five ways that you can use the newly released Sidebar frame in Retool to achieve different effects in your Retool apps.
The Sidebar frame provides a key missing piece of the layout puzzle in Retool applications. In many internal apps or apps with multiple screens and pages of content, a sidebar layout helps to manage the complexity by laying our information vertically, in a way that's easier to parse. Here are five examples of how you can use the Sidebar frame in your Retool apps.
A common use case for the Sidebar will be displaying complex and nested navigation structures for a Retool application.
When developing complex Retool apps with multiple pages, it is considered a best practice to break up your larger application into multiple smaller Retool apps, possibly grouped in a folder in the Retool UI. Building your applications this way has two primary advantages:
- Better performance: the less data binding expressions, queries, and overall components that are contained with a Retool app, the better that page will perform at runtime.
- Easier to reason about for developers: it will be easier for developers and maintainers to figure out what's going on in an application if it is broken down into smaller pieces with fewer moving parts.
To achieve this architecture in Retool, you can approach building your application as a collection of small apps, tied together through a Navigation component. At a high level, your approach to building apps this way would be:
- Create multiple small applications that implement the features of your overall functional offering, with an empty Sidebar frame
- Create a Module which defines the left navigation across all your smaller apps using the Navigation component
- Add your navigation module to the Sidebar frame for all your smaller apps
This approach works great for the Sidebar, but also works well for shared UI elements in the Header frame.
The Sidebar also works great as a collapsible container for search and filter options, or other UI components that don't need to be constantly visible.
Placing filter UI components in the Sidebar frees up more screen real estate for data. And because the Sidebar frame can be shown or hidden via JavaScript, you can create even more space for the main UI frame if needed.
The Sidebar also enables two forms of useful in-page navigation - tabs and scrolling navigation.
For pages that have a lot of content, the Sidebar can be used to show a tabbed UI that toggles visibility of multiple views in a Container. Similarly, you can use the Navigation component to control the scroll position of the page using the "Scroll Into View" action.
Finally, the left sidebar makes a great home for bookmarks and other user-generated preferences. In more complex console UIs (like the Google Cloud console or AWS console), the left navigation components often allow users to pin or otherwise bookmark their most commonly used navigation destinations.
Here's a simple Retool application that demonstrates this technique. You can play around with the app directly here. You can also import the app into your own Retool instance using the JSON app definition here.
In this sample, I use the header portion of the Sidebar frame to host a small UI for adding and displaying bookmarks. The body of the Sidebar contains a Navigation component which maps to each individual tab of the Tabbed Container in the Main content frame. When a user is viewing a different tab in the container, they can click a button in the top left to store a bookmark to this tab in a shorter list.
In this example, we use local storage to keep a list of bookmarked tabs chosen by the user. Our button executes a tiny bit of JavaScript to store the bookmark for us - it gets the key for the currently selected tab, and stores it in a JavaScript object.
1let bookmarks = localStorage.values.bookmarks || {};
2let currentItem = tabs1.value;
3
4bookmarks[currentItem] = true;
5
6localStorage.setValue('bookmarks', bookmarks);Note that accessing local storage in Retool is slightly different than the built-in browser API. To read values, we interact with the localStorage.values object rather than localStorage.getItem().
To display the bookmark list, we take advantage of the new "mapped mode" in the Navigation component, which allows us to create a dynamic list of nav items.
The Sidebar frame is a long awaited enhancement to the UI toolkit for Retool developers, enabling common UI patterns for lefthand navigation and filtering. You can use it in your Retool apps to execute a number of design patterns that will make your apps more usable.
I hope you enjoyed learning more about the Sidebar frame and Navigation component! Be sure to check the Retool blog tomorrow for our next 12 Days of Retool post on the newly launched Command Palette.
- Day 1: A parser for an abstract syntax tree
- Day 2: Two tuple hacks
- Day 3: Three equal signs
- Day 4: Four CRUD operations
- Day 5: Five Sidebar Wins
- Day 6: Six Commands in a Palette
- Day 7: Seven Big Fish Swimming
- Day 8: Eight Bits of Gaming
- Day 9: Nine Star Wars Movies
- Day 10: Ten Retool Videos
- Day 11: Eleven Best FIFA World Cup Games
- Day 12: Twelve Lines of AI Poetry
