Bold Tech has been building internal tools on Retool for 5 years now, and to honour this occasion we're excited to share more about our story, and how Retool has shaped the way we work.

At Bold Tech, our mission has always been clear: reduce complexity, deliver impact, and make internal tools not just functional, but satisfying. Over five years and 50,000+ hours of development time, Retool has been a cornerstone of that mission.

From helping scale startups to transforming enterprise back offices, we’ve pushed the boundaries of what’s possible for internal tools and what can be done on the Retool platform itself. This blog post is a look back at the innovations, best practices, and UI craftsmanship that have defined our collaboration with Retool on this exciting anniversary and a preview of where we’re headed next.

Our beginnings

In 2020, after months of building on the platform and quickly becoming the top contributor on the Retool forum, Joey was introduced to Retool’s Growth team to support new enterprise customers - like Stripe - with their buildouts. At the time, Retool was still in its early growth phase and looking for a partner who could showcase the platform's full potential and build deep, trusted relationships with clients.

Fast forward a few years... Retool has steadily evolved into the business software powerhouse it is today and, with a rich legacy and deep-rooted expertise in the platform, Bold Tech has solidified its role as a key development partner. Having worked closely with Retool as it’s grown from a 40-person to a 400+-person company, Bold Tech brings a level of historical context and enterprise expertise that’s difficult to replicate.

In 2021, we launched our blog to share that expertise - collaborating with the Retool content team to publish tutorials, guides, and videos that help developers build faster and smarter on the platform.

Along the way, the Bold Tech team has produced tons of unique learning pieces for the Retool community. We've received great feedback from customers and developers on how our blog has helped them build better in Retool - a huge thanks to everyone who takes the time to read it.

Here are some of our favorites over the years:

Creating PDFs In Retool (4+ methods, updated for 2023)

For many companies looking for Retool apps, PDF end products are essential. Here are 4+ options to generate PDFs within Retool.

Bold Tech BlogJoey Karczewski

UX / UI Guides - Bold Tech Blog

User experience is just as important in internal tools as in external apps. We give tips, tricks, and best UX/UI practices when creating internal applications. Learn great layouts, performance tricks, and more. Learn to build better on platforms like Retool.

Bold Tech BlogJoey Karczewski

How to create great multi-page applications in Retool

Retool has just had a boost in speed and power, so switching between applications much more seamless and performant. In this article, we discuss how to make great multi-page applications with optimal performance and effective UI.

Bold Tech BlogSophie Becker

The clients that made it all happen

We’ve had the pleasure of working with incredible clients across a multitude of industries: Edtech giants like Seesaw, Fintech enterprises like Bilt, Ramp and Stripe. We’ve also supported plenty of plucky SMBs and start-ups with scaling their ideas, growing and developing increasingly complex, customized systems to support their unique and often-changing models.

We’re lucky to have worked closely with so many great teams and innovative companies, and we’ve learned tons about all the technology that goes into making them the well-oiled machines they need to be.

What’s more, our ever-growing portfolio of enterprise clients has allowed us to become specialists in large and secure internal infrastructures that require the highest levels of data compliance, so much so that we now have a dedicated DevOps engineer to support teams with complex deployment.

Bold Tech | Our Customers

Meet our customers. We are proud to share some of our client success stories, as well as our happy client testimonials.

Bold Technology Consulting Company Logo

Bold Tech: five years on

Now, Bold Tech is a tight-knit crew of 14 and has delivered over 50,000 hours of development work for more than 80 clients. This depth of hands-on experience has given the developers a deep understanding of the platform’s nuances—along with a toolkit of performance, security, and UX best practices that only come from time in the trenches.

What sets Bold Tech apart is how we select developers: each member is chosen not just for technical skill, but for their ability to translate complex business logic into effective, intuitive applications. We thrive on being dropped into unfamiliar, high-stakes challenges—and designing tools that solve them with clarity and precision, from UI to backend logic. We work to align ourselves as brains for hire that go beyond the typical task-based, agency-style engagements.

Special mention goes to Stefan, our Head of Development—a Retool-obsessed magician whose precision and creativity continue to push the platform’s limits.

While Bold Tech has long been a trusted center of excellence partner—known for building powerful, user-friendly internal tools on Retool—the scope of its work has expanded significantly in recent years. With thousands of hours of development and deep exposure to the technologies surrounding Retool in real-world environments, we now operate at a higher level of advisory—supporting clients not just in what they build, but in how they scale, secure, and structure their internal tooling.

Here is a selection of these new services we are proud to offer:

DevOps for Retool at Scale

Bold Tech helps organizations deploy, manage, and optimize their Retool instances across complex environments. From self-hosted setups to highly complex cloud configurations, we ensure that infrastructure is resilient, secure, and built for long-term maintainability.

Enterprise Permissioning Frameworks

Robust access control is critical for any serious Retool implementation. Bold Tech works with clients to design and implement permissioning models that map cleanly to organizational roles, compliance needs, and security best practices—ensuring the right people see the right data at the right time.

SaaS Product Architecture in Retool

For SaaS companies building customer-facing or operational tools directly within Retool, Bold Tech provides architectural guidance on how to structure multi-tenant apps, enforce data isolation, and streamline workflows. This goes beyond building fast—it’s about building responsibly, with scalability and product quality in mind.

Training & Enablement

Whether it’s onboarding new teams, documenting best practices, or running interactive workshops, Bold Tech helps clients level up their internal Retool fluency so they’re enabled to build better too.

Looking ahead

Looking ahead, Bold Tech remains as committed as ever to raising the bar for what internal tools can be. We’ve spent the last five years playing our part in Retool’s evolution from the inside—through code, content, and client outcomes—and we’re just getting started. As the complexity of modern businesses grows, so does our ambition to solve their hardest operational problems. Whether it’s standing up secure, enterprise-grade infrastructure or helping a founder turn their back-office chaos into clarity, Bold Tech is here to be more than a vendor—we’re your internal tools partner of record. Here’s to what we build next. 

We’ve moaned plenty before about button overload and offered several tricks for UI that keep your apps extra efficient, but in this tutorial, we’re going to address a common UI sticking point we see in many Retool apps: creating tidy options for multiple actions. Building dropdown buttons with actions in Retool helps keep your interface clean and user-friendly and is a really intuitive design pattern used in many web apps.

Instead of cluttering your UI with multiple buttons, you can group related actions—like Edit, Delete, or Disable User—into a single dropdown. This makes interacting with data much more streamlined. In Retool, you can do this with a neat trick involving a table custom column and an option list.

Here’s what this will look like when we’re done:

We’re also going to show you best practices for setting up your create and edit forms to be more maintainable and less prone to error.

Let’s jump in!

Configuring Dropdown Actions in Retool

To get started, click on + at the left side of your screen and drag a Table onto the editor to display your data.

Connect it to a data source: For this tutorial, we’ve used Retool’s sample data.

Add a column to your table, set the ID to "actions" and label it "Actions". Then, enable the Editable toggle for user selections. Set a placeholder like "View >>" to make the dropdown button visible in the table. We added this to the left-hand side of the table as this is a common design pattern to which users will be accustomed.

Next, to set the dropdown options, add an Add-on “Option-List” to the column. Configure the options by selecting Manual input, clicking the ➕to add a new option, then setting each option’s Value and Label.

For this example, we’ve added options like "Update", "Disable User", and "View User". Though it can be tempting to put all actions into a single dropdown on a webpage, it’s important to create logical lists and group similar actions, such as the user actions in this table. This is because otherwise, dropdowns can quickly become bloated with options, making it harder for the user to find the action they are looking for and slowing them down.

Finally, make sure to disable ‘Allow custom Values’ to prevent users from entering their own options.

Using event handlers to trigger actions

Add a modal frame to your app and call it something like addAndEditModal.

Next, let’s connect this modal up to our Actions column and our ‘Update’ button in the sourceTable. Head to the setting of your actions dropdown button.

• Click ➕ in Event Handlers.
• Set the event to Change cell to detect dropdown selection.
• Choose Run script as the action and paste the code below

const latestChange = sourceTable.changesetArray[sourceTable.changesetArray.length - 1];
if (latestChange && latestChange.id === sourceTable.selectedRow.id) {
const selectedAction = latestChange.actions;
if (selectedAction === "update") {
addAndEditForm.setData(sourceTable.selectedSourceRow);
addAndEditModal.show();
} else if (selectedAction === "disable") {
disableUser.trigger();
} else if (selectedAction === "view") {
userModal.show();
parentData.setValue(sourceTable.selectedRow);
}
sourceTable.clearChangeset();
}

What does this do? This listens for the most recent dropdown selection (latestChange) and checks if it matches the currently selected row. It proceeds to run the appropriate action based on the user’s selection

Update: Prefills the form with row data and opens the modal

Disable: Runs the disableUser query

View: Opens a user modal and sets row data into a parentData state

Lastly, we clear the table’s  changesetArray to prevent stale state

Now, when a user selects an option from the Actions dropdown, the system will dynamically update and trigger the correct and expected action

Best practices for forms: dynamic create/edit

Since building in Retool is so quick and easy, it’s also very easy to create more elements than you need and forget coding best practices. As most Add and Edit forms contain the same values, it’s best to build a single form that changes dynamically (where needed) according to the action you are looking to execute.

We already have our ‘update’ functionality, so next, add a Button component and name it clearly, like "addUser", and configure the event handler to:

• Open the modal using: addAndEditModal.show() - just like we did for our update action
• Reset the form’s data by setting it to an empty object {}
  

In the title of your modal, you can use the markdown “ ### {{ addAndUpdateForm.initialData?.id != null ? "Update" : "Add" }} User”. This ensures that the title will dynamically display to match the selected action.

Now, to set up our form modal, pull in a form component and click Generate Form from Table to take advantage of Retool’s automated form generator to quickly create your form.

Select sourceTable as the data source and choose the fields you would like to include in your form.

Congratulations! You have successfully generated your form.

In the same way, you can also customize the Submit button to change its text based on formState.value, i.e. whether it’s Adding or Updating a user. Use the following expression to update the button text when the form is opened for updating a user: {{ addAndUpdateForm.initialData?.id != null ? "Update" : "Submit" }}.

Next, we’ll need two event handlers to trigger our Edit and Create queries respectively. Once you’ve set up two queries to either add or update a row in your database, add an Event Handler to the Submit button. Set the event type to Submit, choose Control Query as the action, and select updateData.trigger() to update user details.

Use an Only run when condition to ensure this action runs specifically for updates: {{ !addAndUpdateForm.initialData?.id }}

Similarly, add another Event Handler for new data entries. Set the event to Submit, choose Control Query as the action, and select the appropriate query (e.g., addData.trigger()).

Use an Only run when condition to ensure that the event runs only when "Add" is selected:  {{ addAndUpdateForm.initialData?.id }}. Now, the correct query will also fire depending on whether the form is the add or update version.

With these steps, you have successfully implemented Dropdown Actions in Retool! 🎉

Now, when users select an option from the Actions dropdown, the system dynamically updates formState, and the corresponding modal or function is triggered automatically.

Happy Retooling! 🚀

Managing permissions in complex systems is notoriously challenging, and Retool can be no different. If approached without a deeper understanding of how Retool permissions work, it's easy to get your apps, resource and user access in a tangle. We've worked with many organizations struggling to regain control over convoluted permissioning setups, particularly when their app infrastructure has scaled faster than they first expected.

For this reason, we always advocate for companies to - where possible - implement a Retool-friendly permissions structure from the very beginning that allows for scale. Careful planning and a better knowledge of the intricacies of the Retool Permissions settings is essential for Enterprise deployments.

In our next few Retool for Enterprise articles, we will be focusing specifically on permissions, covering the fundamentals here first, before discussing the different approaches you can take and how you can apply them in Retool.

Need more help than this article? Reach out to us!

Retool pricing plans and permissions features

Firstly, it's important to know that your permission features depends on your Retool pricing plan.

For small teams: The Free and Teams plans are suitable for smaller teams who don’t have a significant need for granular permissions. The Free plan does not offer permission features, so each user has full access, meaning all users can build and edit apps without role distinctions.

This article is written for larger organizations on Retool who need more complex permissioning structures, so we’ll be assuming readers have the Business plan or Enterprise. Here are the key distinctions between those plans when it comes to permissions:

Business Plan: Suited for larger organizations, the business plan allows you to create new permission groups instead of relying on the Viewer, Editor and Admin groups. This is the minimum plan that we would recommend for teams with more granular permissions requirements.

Enterprise Plan: For those on Enterprise plans, you get access to enterprise-grade features like pushing groups from Okta and environment-level source control. The ability to differentiate environment permissions is particularly important for QA teams to have access only to staging resources.

Permissioning in Retool: The fundamentals

For you to make the right choice when choosing a permissioning pattern (which we'll talk more about in Permissions Part II), it's essential to understand Retool’s multiple layers of permissions. Though the Permissions UI in the environment settings can seem straightforward, it’s important to understand the nuances of each setting as you use them.

The apps, resources and workflow tabs allow you to define ‘Use’, ‘Edit’, and ‘Own’ access for users, but these settings mean different things for each tab, and these settings impact each other.

An example. If you give someone ‘use’ access to an app, but they don't have ‘use’ access to the resource inside of it, the queries that use that resource will not execute and will produce an error response. So, if a user has ‘use’ access to 2 out of 3 resources that are used in an app, the first two will work as expected, but the third (without ‘use’ access) will consistently fail.

To give you a better understanding of these granular settings, we’ll quickly run through what each of these permission types mean, as well as what settings to look out for in the ‘additional’ tab.

Resource permissions

In custom groups (outside of the editor, viewer and admin groups), you can specify exactly what type of access the group has to each resource in your environment. Although there are three boxes to toggle between, there are technically four states, as none selected means ‘no access’. You can only select one permission type, as each type builds on the permission access of the former.

Here’s what those permission types really mean when it comes to working with or using resources:

• Nothing toggled state - the user can’t run the resource even if they have access to an application that uses it. When performing an action like reading or writing data that is contingent on the resource, it will display an error message similar to: “you do not have access to  {{uuid}} resource”.
• Use - if the resource setting is toggled to Use, this means that the user, if they have access to an app, can run any queries connected to that resource within the application. Importantly - though they can run queries connected to the resource in ‘User’ mode, they cannot perform any edits on the query in ‘Edit’ mode, even if they have edit access to the app it uses.
• Edit - the Edit toggle includes the same access as Use but also allows the user to edit and create queries for the resource in the ‘Editor’ mode inside of Retool. Here, they can create, edit and delete any queries made against the resource within an application they have edit access to. Something to note here is that they can also see the resource’s configuration inside the resource page inside Retool (though cannot edit them).
• Own - Own includes all access in Use and Edit but also allows the user to edit the configuration of the resource (the connection settings), rename, and move the resource around into different folders. This means effectively giving this group managerial access over the resource.

When managing resource permissions, it’s essential to be wary of the ‘Query library’ setting in the Additional tab, as this can potentially overwrite resource access. We talk more about this in the ‘Additional tab’ section below.

App permissions

Similarly to the resource permissioning, the application section allows No access, Use, Edit and Own permissions, but note that the ability to use the applications  also depends on the access these users have to the resources included in apps.

• Nothing toggled state - if the user gets routed to this app or page, they will get an error message that says they don’t have access to the app. They will not see the app in the root directory.
• Use - The Use toggle means that the user group can only open the application in ‘User mode’. However, they will also need the correct permissioning (at least Use) to the app's respective resources to perform the queries within the app.
• Edit - This gives the same access as Use, but the edit toggle here means that this group can also access the application in ‘Editor mode’. This means that in ‘User mode’ they will see the black Retool header bar and the toggle to Edit the app in the right-hand corner. Once in ‘Editor mode’ they can run queries in the code tab for the resources for which they have Use access, and edit the ones for which they have Edit access. They can also delete these applications.
• Own -  similarly to the resources, Own is predominantly the administrative toggle for applications. ‘Owners’ have all access from Use and Edit, but this setting allows these users to rename these apps, reorganize them in the Retool directory folders and export them to JSON or Toolscript.
  

Workflow permissions

Workflow permissions work similarly to the App and Resource permissions, with a few small but crucial differences. Ultimately, Workflows are typically a chain of actions with a single trigger, and this trigger determines the access to run the workflow. If a user has some kind of access to trigger it, the workflow will execute regardless of the other permissions that user may have.

Keep in mind: users who have Use access to an application as well as Use access to a Workflow, but who might not have underlying resource access, can still trigger and run a workflow that includes those resources.

• Nothing toggled state - The Workflow is not visible in the Workflow section, they cannot run the Workflow from within the queries section of the Retool editor, nor can they trigger the workflow.
• Use - groups with Use access can press the play button to execute the Workflow or trigger it from an app, but cannot edit any part of the workflow in 'Editor mode'. As noted above, they do not also need resource access to trigger a workflow that uses a resource.
• Edit - groups with Edit access can trigger the workflow but they can also edit it. Importantly however, Editors can’t edit or create any steps including resources they don’t have access to edit. So, in order to properly create and edit Workflows, Editors need Edit access to all resources involved.
• Own - 'Owners' have all the permissions above, but can also rename or delete Workflows.
  

Additional tab: Essential errors to avoid

⚠️ Beware: Often overlooked, the ‘Additional’ tab section has a few potential security risks.

The first is the Query Library. If this Query Library checkbox is toggled on for a group, this means that they can perform shared queries and potentially run queries from within the query library page that they don’t necessarily have access to via the resource permissions we went through above.

‘Allow access to unpublished releases’ is the one of the riskiest settings in the Additional settings tab that often goes unnoticed. Allowing access to unpublished releases allows a user to go back in history and potentially run previously deleted queries from previous versions of the application. By default this is toggled on and often goes unchecked when launching an application. For large orgs it’s very easy for this to cause a large security issue, especially as users can accidentally gain access to older releases without realizing.

Finally, and probably most importantly is the ‘View audit logs’ toggle. If switched on, this allows a user to go to the audit log page and query the audit logs. The audit logs include the data that has been returned from the query, which means they can show PII and other sensitive data to users auditing, without recording what data was shown to them. It's essential that this toggle is toggled off for end users so that they can’t access secure data without this being logged.

We talk a little more about security tips like these in the Enterprise Security Checklist we recently released with the Retool Center of Excellence team.

Essential tips for permissioning in Retool

Now we've run through the fundamentals of Permissions in the Retool UI, here are six essential tips for working with the system best.

1. All Users: When you add a new user to your Retool environment, they will automatically be added to the All Users group. This is why it’s best practice to not set any permissions via this group, as it can be hard to maintain securely. The All Users group should only give access to the platform and should have all settings in ‘Additional’ (as mentioned previously) toggled off.
2. Editor and Viewer groups: These groups should also be avoided for large deployments as the permissions and security becomes difficult to manage as engineering teams and users grow.
   - If any user is in the Editor group, they have edit access to all apps and resources, which is generally unsuitable as your infrastructure grows. This actually also gives them Own settings for all resources, exposing the resource configuration and connection settings.
   - Likewise, anyone in the Viewer default group has full access to apps and resources, and can therefore perform any action across any app in that environment. These groups are often used at the beginning of Retool buildouts as they allow for simpler structures, but it’s best to move away from them as soon as you can.
3. Release versions toggled off: We already mentioned the ‘Release versions’ toggle in the ‘Additional’ section, but we’ll put it here again for good measure as this setting is toggled on by default. When making any new group, always ensure this has been switched off before continuing.
4. Retool Enterprise plan: For those on the Enterprise plan, you can also configure all of these permissions on the environment level. In the permissions settings you can therefore click the ‘show’ toggle for each resource or app and decide the specific environment resource (e.g. staging vs production). This is particularly useful for QA teams because they can be given access to staging resources without exposing production data.
5. User group admins: A group admin can add or remove users (members) in their groups, but they can’t change any of the actual granular access settings to apps, workflows or resources. Therefore, it makes most sense to use the User group admin role to assign non-technical managers the ability to manage their team, not to engineers who need to access the permissions settings themselves.
6. Folders: be wary with giving access on a folder-level, as any new app added to that folder will inherit those permissions, and this is where mistakes can easily be made. When applications, resources or workflows are placed within folders, you can define access to the parent folder or the nested objects specifically within them. We suggest sticking to a single pattern: either sticking to folder level access or single page access. If you do apply permissions via folders, you must have a rigid folder organization system to ensure no mistakes are made.  
   

That’s it for the fundamentals of Permissions in Retool - but we have plenty more to say! In Part II, we’ll offer some suggestions for approaches to permissions in Retool that Enterprise organizations can use to ensure watertight internal app infrastructures. We’ll specifically focus on the importance of formatting your permissions groups carefully. Stay tuned!

In the final release of our Retool UI inspiration series, we recreated the dark and moody Steam interface using just Retool (and a touch of CSS).

It’s quite uncommon to see dark modes in Retool, and Steam’s dark, layered design and functional layout inspired us to explore how Retool’s features can bring a similar interface to life.

You can play with his Retool version of the Steam UI yourself.

There are four key features that are particularly unique about this UI design in Retool:

1. Using a container to create a sticky footer for the whole Retool page
2. Using custom CSS to eliminate the repeated scroll bars on Window (a particular Bold Tech pet peeve)
3. Applying gradient backgrounds to containers to create a more three-dimensional graphic design
4. Double top navigation bars for primary and secondary menu
   

Creating a sticky footer

One of our favorite elements of this UI design is the sticky footer at the bottom of the page. This isn’t something that Retool natively offers in the main canvas, and can be a really useful addition to many Retool apps with the need for additional navigation options.

To do this, we used a container within the body of the canvas and ticked the ‘expand content to fit’ to avoid padding from shifting everything about.

We then set up the container with a footer option and added some necessary buttons.

We also love this unique design of having a photo background and near-transparent container on top - this could be a great option for profile pages where it’s nice to add a personal touch for users.

Here’s the custom CSS we used to get it:

}
._retool-profileContainer {
background-image: url("https://picsum.photos/id/301/800/600");
background-repeat: no-repeat;
background-size: cover;
}

Using Custom CSS to adapt Windows Scrollbars

Bold Tech does a collective sigh when we hear our clients work on Windows… not because we’re Apple fanatics, but because Windows doesn’t properly hide scrollbars when they’re not in use. This means that containers and tables appear cluttered with multiple scroll bars all showing simultaneously and often confusing the user.

But thank the heavens for Mitchel, because with this Steam design, he figured out a way to hide these additional scrollbars with a little CSS trick.

This custom CSS adjusts the scrollbar’s width, track, and color, improving the look and feel across the app.

/* width */
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: clear;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #606774;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #BCBCBC;
}

Applying Gradient Backgrounds to Containers

Steam’s design includes subtle gradients and background visuals, which gives a sleek look we don’t often see in apps in Retool. We replicated this in Retool by applying radial gradients with a little custom CSS.

As well as looking great, this is a subtle yet effective way of drawing the user’s eye to the most important elements of the app that they need to interact with. You’ll notice that the areas of the app without this glow seem to disappear more into the background, which is a great way to decentralize those secondary features and allow users to focus on primary actions.

With this code you can tweak the colors and percentages to get the effect you’re looking for.

/* News Container */
._retool-newsContainer {
background-image: radial-gradient(
ellipse 60% 50% at 60% 110%,
steelblue 50%,
#464B53 95%
);
}
._retool-achievementsContainer {
background-image: radial-gradient(
circle farthest-side at 40% 150%,
steelblue 40%,
transparent 60%
);
}
._retool-underglowContainer {
background-image: radial-gradient(
circle farthest-side at 40% 250%,
steelblue 40%,
transparent 80%
);

Double navigation bar

Steam’s interface uses a primary and secondary navigation bar at the top of the page, which creates a structured way to organize lots of navigation options without being overwhelming. We replicated this in Retool with stacked navigation containers.

The use of a larger font for the lower navigation is also a unique design choice that can be really useful for certain UIs - particularly when the secondary navigation is actually more important than the higher-level options in the first, top one.  

That’s the last in our quick series of UI-inspiration buildouts in Retool! While we don’t expect you to go building the next YouTube, Steam, Hubspot (or even Retool) on Retool itself anytime soon, we hope you enjoyed the exercise of pushing the limits of Retool for some cool out-of-the-box UI thinking - we certainly have!

Download the sample toolscript

The Toolbox newsletter members can download the JSON and import it directly into their Retool environment to test it out ⬇️⬇️⬇️

With an ever-expanding portfolio of prominent enterprise clients, Retool has firmly established itself as a powerful platform uniquely suited to meet the complex needs of large organizations looking to accelerate the development of their business software.

Nevertheless, it's remarkable how many large, technical Enterprises today use Retool for their internal tools yet still rely on guidance from dispersed Retool forum threads to manage their instances.

As a Retool-focused development agency, we talk to Enterprise teams each day who are unsure of how to create scalable application infrastructures in Retool. While Retool is an incredible tool that has enabled their teams to build fast and iterate even faster, engineering managers often find their teams losing control of a disorganized web of applications, with no real accountability for maintenance, nor consistent organization.  

Since we’ve worked with dozens of Enterprise companies to manage and improve their Retool app infrastructure, in this series of blog posts we hope to demystify some of the most Retool misunderstandings and paint a clearer picture of how to manage your instance properly, avoiding common anti-patterns we see in large-scale Retool deployments.

To start, we’re going to focus on the basics of Retool for Enterprises, including what solutions Retool provides for Enterprise companies, what pricing plan they might need (hint: it’s not always Enterprise), and whether or not cloud or self-hosting is more suitable for large infrastructures.

Let’s dive in.

How does Retool cater to the needs of enterprise businesses?

Contrary to some expectations, and unlike most no- or low-code tools, Retool is very well-suited to large-scale Enterprise use cases and even mission-critical tools.

Retool has long targeted the needs of large tech companies to ensure their product is suitable for larger-scale deployments with increased security needs. Some of these features include Okta support, SCM provider support, and audit trails.  

But, most importantly, Retool’s core philosophy is to provide a tool that expedites development time for developers, not to provide a low-code tool for business users, an essential consideration for Enterprise teams.

So what can Enterprise companies expect from using Retool?  

A space for engineers to interact with resources quickly and securely

For enterprises, Retool greatly reduces friction when creating and interacting with business resources and integrations.

Retool simplifies connecting to enterprise resources by configuring database and API connections with a single, secure authentication setup, which minimizes the need for manual connection management.

Thanks to Retool’s centralized configuration, developers can quickly access data across different sources without setting up application-specific authentication layers or repeatedly managing credentials across all of their internal tools.

Retool also provides an intuitive interface for managing detailed permissions, making it easy to access resources in a compliant and secure way. Managers can adjust permissions quickly and flexibly as needed across each Retool Space.

An opportunity to reduce SaaS seats and sprawl

A successful approach for many large enterprises using Retool is to leverage the platform to reduce the number of SaaS licenses required across their teams. By consolidating applications, companies can avoid paying for multiple seats on platforms that some employees rarely use directly. Instead of maintaining individual licenses for tools like Airtable, Salesforce, and Zendesk, enterprises can streamline access and control costs.

With Retool, teams can pull data from these external platforms via APIs and present it in custom-built applications tailored to specific job functions. This means that employees who don’t need to work directly within each tool can still access the necessary data to perform their tasks efficiently—all within Retool. This approach not only reduces expenses but also simplifies workflows, enabling better focus on essential operations.

A platform to expedite development speed and cut engineering costs

Instead of relying on traditional development methods, like a Django Admin portal or a custom internal application built with PHP, teams can use Retool to build such apps much faster and maintain them more easily. Retool offers an excellent way to modernize outdated legacy software with more agile, iterative solutions, while also consolidating your tech stack into a single, centralized, and highly manageable system. For enterprises, Retool also significantly lowers the cost of building temporary internal apps for short-term projects.

What’s more, Retool is packed with security features that meet most requirements of Enterprise deployments, including self-hosting, Git source control, custom SSO, testing options, and more.

Now we’ve covered some of the principal benefits of Retool for Enterprise companies, let’s take a closer look at the pricing plans and the considerations for Enterprises with potentially large deployments.

What Retool plan do I need? Business vs Enterprise plans

First things first, ignore the label: Enterprise companies aren’t obliged to pay for an Enterprise plan straight away. For larger companies with higher security concerns, it boils down to a couple of core features that determine whether you’ll need to be on either the Business or Enterprise plan. These features mostly revolve around security, Retool support level and data compliance requirements.

Regardless of your long-term needs, however, we typically suggest to our clients in an early adoption phase with Retool to start on the business plan. The business plan has all of Retool’s core features, and starting on a lower plan will give you a better understanding of how the platform is structured before committing to a larger investment. Retool will always be on hand to help upgrade you to Enterprise when the time comes, so there’s no real loss in gaining a base-level understanding of the platform and ensuring the best product fit before seeking out Enterprise pricing from their sales team.

It’s important to note here that the Business plan has all the in-app permission levels of the Enterprise plan, aside from environment permissioning. This means that even before you make the jump to the Enterprise plan, you can begin implementing these permissions from the offset whilst on the business plan. Starting with this basic structure will put you in the best place to implement more complex permissioning infrastructure if you move to the Enterprise tier (which can be overwhelming at first).

Even if you start using Retool on the business tier, it’s important to be aware of the Enterprise-only features that you may require in the future, to make sure you’re best prepared for an eventual upgrade if needed. Let’s take a closer look at the most commonly required Enterprise features.

Key features that push companies to the Retool Enterprise Plan

In our experience, here are the most common limitations of the business plan that typically force a company to seek out the Enterprise plan in Retool.

100 user limit on Self-Hosted - For on-prem deployments, Retool is limited to a maximum of 100 users on both the Teams and Business plans. If your company requires your deployment to be managed on-prem, you’ll need to consider if and when you’ll hit that 100 user limit. We’ll dig more into Cloud vs Self-hosted in the next section.

Custom SSO - If your company needs to integrate with Okta or any other SAML SSO provider, you will have to upgrade to a Retool Enterprise plan.

Source Control through your SCM Provider - Retool offers native versioning, which you can read more about here. But, you do have to be on Enterprise to manage your versioning through Github or your company's SCM provider.

Resource environment permissions - A common development pattern for high-security deployments is to give certain developers access only to a secure staging environment, thereby not exposing any PII or production data whilst they are developing. On the business plan, it’s possible to configure different resource environments, but you can’t manage permissions on an environment level. To do this kind of environment permissioning on the business plan, you would need a multi-instance deployment.

Retool Spaces - Retool recently released Retool Spaces as a way of segmenting your teams into separate instances, whilst still managing them through a single, overarching admin instance. It’s still possible to create a similar effect on other plans through proper permission management, but Spaces makes these full team separations straightforward and easier to manage.

Now that we’ve run through the essentials, what are some additional features on the Retool Enterprise plan that may be beneficial to companies?

Nice-to-have Enterprise Retool features

We wouldn’t really consider these features necessities that should dictate your upgrade to an Enterprise plan, but they can certainly be useful additions if you are already on the plan.

We call these features the ‘Nice-to-haves’:

Analytics & audit Logs - Retool has created a usage analytics page where admins can see app saves and views. This is useful for tracking adoption of apps across teams. Nevertheless, at this time we find this page to be quite limited. You can actually create your own analytics and audit log pages on-prem by querying the audit trail events table. We’ll be writing about this in another article in the series.

As self-hosted plans with 100+ users are the most common feature that pushes Enterprises into the Enterprise plan, let’s dive a little deeper into the pros and cons of each.

Full Retool API Access- Retool API is a way to programmatically manage different parts of your Retool environment. It’s technically in Beta as of November 2024, but several of our enterprise clients have been using it for the past six months. Through the API, the individual responsible for the deployment can manage themes, source control, spaces, as well as user permissions through an API endpoint. This can be extremely useful for having full operational control over your environment. But we’ve noted that since you can still interact with all of these environment level features without API access, this is more of a nice-to-have.

Cloud vs Self Hosted Deployment of Retool: Migration challenges

Enterprises typically know from the outset whether they’ll need to host their Retool deployment on the cloud or on-prem. The real question is often whether they need to start with on prem immediately, and making the right choice here is crucial.

If at any point, Retool is likely to become a large deployment and a high level of security is essential to you, we would highly suggest starting with the self-hosted version of Retool from the beginning. Starting with Retool already On-prem (even before upgrading to Enterprise) prevents you from facing a long and complicated migration period from Cloud to Self-hosted when the time does come.

We ourselves have helped Enterprises manage large-scale migrations from Retool Cloud to Self-hosted deployments, and these projects often transpire into months of complication.   Starting with self-hosted Retool from the offset is a great way to reduce complexities and tech-debt if you are certain that you will need it in the future.

Retool provides set-up documentation for deploying within your VPC or whatever format that abides to your company’s standard. If you start with this from the offset, it will save you the struggle of matching versioning, recreating permission sets, and migrating between the instances.

As of 2024, Retool introduced Retool ‘Stable Releases’ to self-hosted. Stable releases are quarterly releases that trail behind their cloud deployments by a couple of versions and promote application stability since they have been more thoroughly tested on the cloud’s most recent release. For mission-critical workloads, having a stable release on self-hosted provides more peace of mind that a new release won’t break your application, and for such usecases we would suggest an on-prem deployment. On Cloud versions of Retool you don’t have the choice to upgrade your environment as this is done automatically, which can cause problems if bugs occur.

So there were some of the basics of Retool for Enterprise. In the rest of the series we’ll be discussing topics like:

• Advanced, scalable permissions
• Resource handling
• Complex deployment handling
• Source control
• Multipage apps
• Environment variables
  

And more. Keep an eye on our blog for more info or sign up to our newsletter to be the first to know.

We’re not entirely sure if the Retool community is ready for this… but we’re doing it anyway. In the next of our Retool UI-inspiration series (where we use Retool to replicate well-known UIs we like) we created the ultimate Retool UI dupe - it’s Retool. On Retool. No guts, no glory.

Here’s what it looks like:

Don’t believe us that this isn’t just… Retool? Have a play around and see for yourself.

And, if you’re feeling really daring, members of our newsletter can download the JSON to blow their minds in edit mode too.

Once you’ve got your head around the Retool-ception, keep reading for some key UI pattern takeaways from this most monumental UI endeavor yet.

Key disclaimer: Yes, this was Stefan, and no, he cannot be stopped.

Closable Notification Containers

Why not have notifications in your Retool apps? Using the Retool style of container you can set up notifications for your users that alert them to new features, important announcements and updates, that can quickly be closed away when read. This is particularly useful for the Home pages of multi-page dashboards.

In Retool, (real Retool, not Retool on Retool) you can natively perform this use experience by using the setHidden event handler and the close button. You can use a listview with a setHidden event handler on each container to surface and hide notifications that might be relevant to the end user.

Minimalistic and well-styled listviews

We bet you didn’t think that our app menu was a built in a listview! The Listview is a little neglected as a component: we often find that, since listviews take longer to configure, people don’t fully stylize them and their Listviews end up looking like clunky cards rather than tidy lists.

In this app we used all kinds of stylistic tricks to hide the fact that this list is made of a list view component - download the app to find out how! Listviews can be more flexible than tables, since you can use any component within them and there can be more options for editability. Plus, a well-styled Listview can look very beautiful too.

Subtle user feedback: container hovers

One of our favorite things to do when developing in Retool is to use design patterns that are 99% invisible but still highly effective in guiding the user experience. In the top right-hand corner you can see the outline change on hover. There’s a reason Retool uses this: this kind of subtle feedback helps users understand the UI intuitively without needing instructions or feeling overwhelmed with repetitive buttons or text. They might realize something is clickable that wasn’t obvious before or notice a button better.

To achieve this, we can write a short snippet in the button’s ‘border’ styling, to change the border color on hover.

The ‘hovered’ attribute can be so useful in Retool apps and deserves much more usage: drop shadows on containers and buttons, background color changes, and more.

Interested in playing around with how we did this in your own environment? Members can download the Toolscript below to import it directly into their Retool environment.

In the rest of this UI inspiration series, we recreate some of our favorite application UI's, like Steam, Reddit, YouTube and even Retool itself. Make sure to check them out!

Download the sample toolscript

The Toolbox newsletter members can download the JSON and import it directly into their Retool environment to test it out ⬇️⬇️⬇️

We’re back once again to bust the myth that cool and complex UIs aren’t possible in Retool. With this week’s release, we’re sharing one of our proudest UI replicas: YouTube, but - you guessed it - in Retool.

You might not be looking to take on the Google giant with a video platform competitor built on Retool any time soon, but this example does show that there are some really unique UI features that you can build with a little tweaking of Retool’s native components.

You can play with the Retube here.

Let’s go through some of our highlights and discuss how we might apply them to other Retool apps.

Retool 'popovers'

Our favorite UI feature in this replica is the popover effect on menu items. A ‘popover’ is a technical view, often a summary or a menu, that appears over other content when people click it. It’s a great way to optimize screen space with information that doesn’t need to be used at all times and is also very familiar to people as a common UI pattern across many highly used web apps like YouTube.

This is not a UI style that we see in Retool very often, and that’s because frankly, this is a really sneaky hack. In short (we’ll share a more detailed tutorial in the next few weeks), the way you can achieve this style of UI is by placing your summary into a container body, with a toggle button set to show/hide the body, and then placing that into another container’s header box. In this app, you can see this effect in the notifications section, add new video button, and the search bar.

It’s not a perfect option yet, and some additional tweaks need to be made to make this as seamless a user experience as possible, but it can nevertheless be a great option in many Retool app UIs.

Centralized search bar

We see a lot of Retool apps with the same search bar style: placed to the top-left side of a table with several dropdown filters. Shake it up! Placing a centered search with filters underneath as tabs is a common UI pattern in web applications outside of Retool, and one that ought to be used more in Retool apps too.  This style of search and filter is easy to achieve using the tabs component (set to pills) and can be more intuitive for users who use platforms like AirBnb or YouTube often.

In terms of filtering views, tabs are a great way to create a single-click style of common filters that doesn’t require users to constantly scroll through long dropdown lists. As you can see in the YouTube replica, even having more than a dozen options can still look tidy when presented in the right way. Note, this is best reserved for UIs where filtering is one of the key functions users will be performing (as in YouTube) since otherwise, this style of UI can be overly busy.

Creating a collapsible sidebar in Retool

Another one of our features to highlight in this YouTube replica is the collapsible sidebar. This option to dynamically hide or show the sidebar navigation by the hamburger icon is a really familiar UI style that users will typically instinctively recognize, and can be a great way to give users the option for more screen space when needed. Don’t forget to place the toggle button in the header frame to ensure it’s always shown!

To build this in Retool, we simply set the sidebar frame’s hidden attribute by the true/false value of the hamburger toggle button. The toggle button is the best component to use in boolean functionality since these values are natively built into the component’s settings and therefore require less messing around.

Interested in playing around with how we did this in your own environment? Members can download the Toolscript below to import it directly into their Retool environment.

In the rest of this UI inspiration series, we recreate some of our favorite application UI's, like Steam, Reddit, YouTube and even Retool itself. Make sure to check them out!

Download the sample toolscript

The Toolbox newsletter members can download the JSON and import it directly into their Retool environment to test it out ⬇️⬇️⬇️

In the next of our Retool UI inspiration series, we’ve built a Reddit replica that would be sure to fool any keen Redditor (until they clicked something at least!). Reddit’s UX/UI design is super minimalistic, allowing users to focus on the content over functionality. While you may be unlikely to build a social media platform in Retool, this style of UI might be most useful when building business software that revolves around information, such as sales CRMs or customer support tools.

Play around with it here!

Let’s break down this UI style a little and see how this might be useful when building in Retool.

Dark mode styling

Dark mode is a relatively under-utilized way of styling apps in Retool, but using an example like Reddit shows how slick it can look when used effectively. Using the orange as an accent color for key action buttons and tags is also an effective color palette.

Here is the theme we used for this example which you can copy directly to your app theme settings:

Primary: D93900

Secondary text: 758791

Canvas & primary surface: 0F1113

Secondary surface: 2B3236

We also used high-pixel border radiuses to create rounded inputs for buttons and the search bar for example.

The font type here is Open Sans, but we used custom CSS to change the appearance of the nav text for instance:

Columns of scrollable information

One UI element we particularly enjoy about Reddit - like other social media platforms - is its ability to show different areas of functionality and data on the same page without overwhelming them.

The three columns of functionality (navigation, forum content, and forum info overview) are visually distinct and individually scrollable to improve navigation of different data without leaving the page.

Okay - disclaimer - there’s a little cheating in here when it comes to the comments section, where this kind of UI is just not possible without extensive custom code. Nevertheless, some of the styling was easily replicated in Retool, such as the highlighted content in the right column which we built with a listview component, using a combination of avatar, link and text components.

We did something a little like this column layout in our Hubspot UI inspiration piece, using three columns to show company and deal data on the same page, but designed in a way to be easily hidden and ignored if not necessary.

Navigation bar

Retool’s native navigation bar is a little limited in terms of styling, so we had to get creative with this neat style of organization for site pages. To create this dropdown menu we simply used a collapsible container that allowed us greater control over text spacing and additional components like icons if needed.

The Home and Popular items are composed of text components and HTML for the icons, which you can group to set an event handler ‘on click’, effectively turning anything into a clickable ‘button’ in Retool.

One key style feature we used throughout this UI was the .hovered attribute on components like the collapsible container. This attribute allows you to change the ‘Background’ styling according to whether the user hovers on the component, mimicking a lot of commonly-used UX design across the web and creating a highly professional-looking app.

Interesting in playing around with how we did this in your own environment? Members can download the JSON below to import it directly into their Retool.

In the rest of this UI inspiration series, we recreate some of our favorite application UI's, like Steam, Reddit, YouTube and even Retool itself. Make sure to check them out!

Download the sample toolscript

The Toolbox newsletter members can download the JSON and import it directly into their Retool environment to test it out ⬇️⬇️⬇️

In this tutorial, we’ll show you how to set up a map inside Retool that allows you to highlight general location boundaries using the OpenStreetMap API.

While this might seem like some highly complex functionality, in Retool it’s a 3-step process to get this up and running.

In this guide, we’ll cover how to:

1. Integrate a map component within Retool.
2. Use the OpenStreetMap API to fetch and display GEOJSON data based on user input.
3. Define map center points and zoom levels dynamically, making the map both interactive and user-responsive.

You can play with the example app in our environment.

While we chose to use the OpenStreetMap API for this example, the ways in which we format the GEOJSON and employ the mapbox component can be extended to your own personal business usecase.

Example internal tools that could make use of the mapbox:

• Logistics teams can use maps to track real-time fleet locations in their internal tools to optimize delivery routes, and identify bottlenecks.
• In retail, store managers might employ a map in Retool to visualize customer demographics or sales data across different regions to tailor marketing strategies.
• Field service teams can assign technicians to jobs based on proximity of a Retool Mobile app, and real estate teams can analyze property locations alongside zoning or demographic data.

The Mapbox component in Retool: Pros and Cons

The native Mapbox component in Retool offers powerful capabilities for building interactive maps, giving users the ability to visualize and work with geospatial data. Built on top of the Mapbox Library, you can fully extend your applications to include complex map related workflows., you can display various map styles (such as satellite, streets, or custom themes) and overlay markers, shapes, and GEOJSON data. The component comes with some default variables and supports custom center points and zoom levels, allowing you to tailor the view based on user input or dynamic data sources.

You can also trigger interactions like clicking on map features to reveal detailed information, making it useful for use cases like visualizing real-time asset locations, plotting routes, or highlighting regions on a map. Mapbox's flexibility in Retool also extends to integrating with external APIs, enabling advanced geospatial data analysis directly within your internal tools.

The Mapbox component in Retool, while powerful, does have some limitations to consider:

1. Limited customization via Retool UI: Although you can adjust aspects like center point, zoom level, and map style, more advanced Mapbox configurations—such as detailed control over map layers or specific styling options—require custom JavaScript or external configuration, which might not be fully accessible through Retool's interface alone. Though, you can implement a simple Mapbox functionality inside of Retool’s custom component to get around this limitation.
2. No direct Tile layer customization: While the Mapbox component supports different map styles (e.g., streets, satellite), customizing tile layers beyond the provided Mapbox options may be challenging. You would need to implement a custom Retool component using the Mapbox to customize this yourself.
3. Performance concerns: Loading large amounts of geospatial data (e.g., numerous markers or complex GEOJSON files) can affect performance, leading to slower map rendering or user experience lags, especially in applications that require real-time data updates.

Now we know a bit more about the component, let’s get started with building out our map app.

Step 1: Generating GEOJSON Data for the Map

First things first, you need data to display on your map. We’ll use OpenStreetMap's API, a robust, open-source platform that supports global location data.

The key to getting this data is making an API call to OSM that retrieves GEOJSON data based on user input. Back in your app, first pull in a mapbox component and a text input.

Now, here’s the API call you’ll be using in Retool:

Copy code:

https://nominatim.openstreetmap.org/search?q={{ textInput1.value }}&format=geojson&polygon_geojson=1

The query (q) parameter will be linked to a text input box in your Retool app ({{ textInput1.value }}). The response format is set to GEOJSON, which will give us the data we need to display location information on the map. polygon_geojson=1 ensures that we also receive polygon data, which is important for visualizing boundaries and areas on the map.

You can now use this GEOJSON response to start building your map.

Next we’ll show you how we set the latitude and longitude for the center point.

Step 2: Defining the Center Point and Zoom Level

The next step is to dynamically set the map's center point and zoom level in the Mapbox component. This ensures that the map displays the location based on what the user inputs.

To achieve this, you’ll need a JavaScript query in Retool. Now, the code for this is fairly complex, but luckily for you we’ve sorted that out for you already:

Here’s the full JS query:

var geojson = generateGeoJson.data
function calculateBoundingBox(geojson) {
let minLat = Infinity, maxLat = -Infinity;
let minLng = Infinity, maxLng = -Infinity;
geojson.features.forEach(function(feature) {
const coords = feature.geometry.coordinates;
if (feature.geometry.type === "Point") {
const [lng, lat] = coords;
if (lat < minLat) minLat = lat;
if (lat > maxLat) maxLat = lat;
if (lng < minLng) minLng = lng;
if (lng > maxLng) maxLng = lng;
} else if (feature.geometry.type === "Polygon") {
coords[0].forEach(function([lng, lat]) {
if (lat < minLat) minLat = lat;
if (lat > maxLat) maxLat = lat;
if (lng < minLng) minLng = lng;
if (lng > maxLng) maxLng = lng;
});
}
});
return {
southwest: [minLng, minLat],
northeast: [maxLng, maxLat]
};
}
// Function to calculate the center point
function calculateCenter(bounds) {
const centerLng = (bounds.southwest[0] + bounds.northeast[0]) / 2;
const centerLat = (bounds.southwest[1] + bounds.northeast[1]) / 2;
return [centerLng, centerLat];
}
// Function to estimate zoom level based on the bounding box
function calculateZoom(bounds, mapWidth, mapHeight) {
const WORLD_DIM = { height: 256, width: 256 };
const ZOOM_MAX = 20;
function latRad(lat) {
const sin = Math.sin(lat * Math.PI / 180);
const radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
}
function zoom(mapPx, worldPx, fraction) {
return Math.floor(Math.log(mapPx / worldPx / fraction) / Math.LN2);
}
const latFraction = (latRad(bounds.northeast[1]) - latRad(bounds.southwest[1])) / Math.PI;
const lngDiff = bounds.northeast[0] - bounds.southwest[0];
const lngFraction = (lngDiff < 0 ? lngDiff + 360 : lngDiff) / 360;
const latZoom = zoom(mapHeight, WORLD_DIM.height, latFraction);
const lngZoom = zoom(mapWidth, WORLD_DIM.width, lngFraction);
return Math.min(latZoom, lngZoom, ZOOM_MAX);
}
// Calculate the bounding box
const bounds = calculateBoundingBox(geojson);
// Calculate the center point of the bounding box
const center = calculateCenter(bounds);
// Calculate zoom level (for example, assuming a map size of 800x600 pixels)
const mapWidth = 800;
const mapHeight = 600;
const zoomLevel = calculateZoom(bounds, mapWidth, mapHeight);
return {'center':center, 'zoomLevel':zoomLevel}

This script pulls the coordinates from the first feature in your GEOJSON response and uses them as the map’s center point.

We then referenced these as the center point in the mapbox component.

The zoom level is hardcoded to 16 in this example, but you can make it dynamic based on the size or type of the location.

To ensure the data updates when new text is searched, we set a success handler on the JS query to set the mapbox center values:

Step 3: Connecting the values to the Mapbox component

Now that we have both the GEOJSON data and the dynamic center point, it’s time to configure the map itself. Here’s what you need to do:

1. Reference the Center Point – In your Mapbox component, set the center point latitude and longitude to the centerPoint values you defined in the JavaScript query.

2. Load the GEOJSON – Use the GEOJSON data fetched from the OpenStreetMap API to display boundaries, markers, or other geographic features on the map.

3. Set Zoom Level – Link the zoom level from your JavaScript query to your map component to ensure that the map adjusts according to the user's input.

Putting it all together

At this point, you should have:

• A text input field where users can type a location (e.g., "New York").
• A JavaScript query that pulls GEOJSON data from the OSM API based on that input.
• Dynamic center points and zoom levels that adjust the map based on user searches.

This makes your map highly interactive and customized, perfect for internal tools that need to visualize location-based data in real-time.

By following these steps, you can build a dynamic map in Retool using the OpenStreetMap API. Retool’s Mapbox component is a powerful tool that allows you to go far beyond basic mapping, making it easy to overlay GEOJSON data, set zoom levels, and center points dynamically. Try it out for your next project to see how seamlessly you can integrate maps into your internal applications.

There's a tendency with Retool to think that it's only possible to create basic, unpolished internal apps (read: ugly apps with default Retool-blue buttons). While it's certainly not yet a pixel-perfect builder, with every release of new features it's getting easier and easier to create beautiful apps that just look like the favorites you use every day. What's even better is that implementing these practical, sleek features is still really fast.

For that reason, we've been working on some simple UI inspiration templates that prove just how beautiful and functional Retool can be with just a few creative uses of components.

For our first template: a Hubspot-inspired CRM UI (play with it here!).

Here are some of our favorite parts of this UI and how you can implement them with Retool.

Columns of information with a clean design

Since sales agents often need quick access to lots of info on the same screen, we recreated the Hubspot vertical view functionality with a mixture of the sidebar frame, split pane frame and containers, with the ability to hide these away too.

One of the things we particularly like about the Hubspot UI is how clean and simple the design and color choice is. The varied colors across columns helps visually differentiate the sections but also gives a clean and practical look to the app.

Categorizing and hiding data

For the card-like functionality of client task tracking and touchpoints, we used a listview component. For the toggle information on the right-hand side panel, we used toggle containers to hide away information until necessary.

This gives the user full control over how much data they see at once and allows fast, organized access to related information in one place, without needing to switch tabs or pages.

Varied button types for actions

One thing we particularly like about the Hubspot interface is the ease with which you can take action on an account. So we made an effort to replicate some of Hubspot's intuitive action features such as the icon button row, with simple icons that are obvious to users and reduce the amount of space used up by action buttons for these primary actions. Secondary actions are tucked away in the actions dropdown.

We also played with notification feature options in the navbar. Adding simple elements like notifications icons or captions to dropdowns with further information can be a great way to make apps feel more well-rounded and intuitive.

This app is a UI wireframe template inspired by Hubspot and created in Retool. You can adapt the template as you see fit for your CRM or Retool project.

Want to download the source code? Sign up to our newsletter below!

In the rest of this UI inspiration series, we recreate some of our favorite application UI's, like Steam, Reddit, YouTube and even Retool itself. Make sure to check them out!

In the final instalment (for now) of our Charting in Retool with Plotly series, we want to share our final tip to beat them all: a little AI chatbot helper that can get all your next Plotly endeavors off the ground, really fast.

We have already built a super useful AI chatbot that helps our team solve Retool problems quickly, using Retool Vectors to gather together resources for more informed and contextualized AI responses. We pull information in from the Retool Docs, Community, and our own blog.

Since charts can be such useful tools in internal business software, it’s always advantageous to build them fast. We use this AI tool to expedite the initial setup of charts we aren’t familiar with, as well as to generate quick lines of code to add customization features that make these charts stand out.

Members will get guides, tutorials and internal tool tips in 1-2 emails every month.

How to use the Plotly chatbot

The Plotly AI helper is a simple chatbot in a drawer frame in Retool. We set it up as a module so the chatbot can be pulled into multiple applications and used all over your apps when building.

The user simply prompts the chatbot with the kind of charts they need and, using our system prompts and connected vectors, the chatbot returns the code and the chart itself to preview.

You can ask the chatbot for different chart types, colors, annotations and code snippets to improve your charts. You can make the prompts even more specific by checking the Plotly docs first and making sure you use the correct terms.

Users can then copy the data object and layout object to their clipboards and paste them directly into the respective parts of the chart component in their app. And it’s really as simple as that!

How did we build it?

We built this much like our original AI chatbot, starting first with the Vectors to contextualize the information. In this case, we set up a vector to scan the Plotly docs online - you can see how to to do this to set up the module in your own environment. We also set up a vector to scrape the Retool docs.

Inside our Ai query, we made sure to include a specific prompt which we tested and refined to get the perfect result each time:

“You are a plotly chart assistant that will return a JSON object with 2 keys: 'data' and 'layout' ALWAYS between <code> and </code> tags.
If data is not provided please generate data so the chart can be rendered.
Provide additional tips how to enhance chart if asked for.”

We then connected the query to our Plotly and Retool Docs.

Once we get a response, we need to parse the data and use this to present the preview of the chart, and separate the data and layout objects to be copied into the chart component. We pulled in a chart component to the chatbot to present the preview. This is what our data object looks like, as it parses out the response from the AI bot.

(() => {  // Start of an Immediately Invoked Function Expression (IIFE)
try {  // Start of a try block to handle any potential errors
return JSON.parse( // Parse a JSON string into an object
bold_tech_plotly_helper.data // Access the data property from bold_tech_plotly_helper
?.split("<code>")?.[1] // Split the data string at <code> and take the second part
?.split("</code>")[0] // Split that part at </code> and take the first part
?.replaceAll("'", '"') // Replace all single quotes with double quotes to make it valid JSON
).data; // Return the 'data' property of the parsed object
} catch {  // If any error occurs in the try block, this catch block runs
return [ // Return a fallback data array with two scatter plots
{
"type": "scatter", // First scatter plot
"x": [1,1,2,2,1.5,1.5], // x-coordinates of the plot
"y": [2,3,3,2,2,1], // y-coordinates of the plot
"mode": "lines" // Display the plot as lines
},
{
"type": "scatter", // Second scatter plot
"x": [1.5,1.5], // x-coordinates of the plot
"y": [0,0.5], // y-coordinates of the plot
"mode": "lines" // Display the plot as lines
}
];
}
})() // Immediately invoke the function

And the layout object, which parses for the layout object, and sets the background to transparent, as well as allowing for an error option:

(() => {  // Start of an Immediately Invoked Function Expression (IIFE)
try {  // Start of a try block to handle any potential errors
return Object.assign( // Merge the parsed layout object with new properties
JSON.parse( // Parse a JSON string into an object
bold_tech_plotly_helper.data // Access the data property from bold_tech_plotly_helper
?.split("<code>")?.[1] // Split the data string at <code> and take the second part
?.split("</code>")[0] // Split that part at </code> and take the first part
?.replaceAll("'", '"') // Replace all single quotes with double quotes to make it valid JSON
).layout, // Access the layout property of the parsed object
{
"paper_bgcolor": "rgba(0,0,0,0)", // Set the background color of the paper to transparent
"plot_bgcolor": "rgba(0,0,0,0)" // Set the background color of the plot to transparent
}
);
} catch {  // If any error occurs in the try block, this catch block runs
return { // Return a fallback layout configuration
"xaxis": {
"showgrid": false, // Hide the grid on the x-axis
"zeroline": false, // Hide the zero line on the x-axis
"visible": false // Make the x-axis invisible
},
"yaxis": {
"showgrid": false, // Hide the grid on the y-axis
"zeroline": false, // Hide the zero line on the y-axis
"visible": false // Make the y-axis invisible
},
"title": {
"text": "Error - chart not generated", // Display an error message as the title
"font": {
"color": "red" // Set the color of the error message to red
}
},
"showlegend": false // Hide the legend
}
}
})() // Immediately invoke the function

Inside our chat window we have two buttons that appear to allow you to copy the objects to your clipboard.

{{JSON.stringify(JSON.parse(bold_tech_plotly_helper.data?.split("<code>")?.[1]?.split("</code>")?.[0]?.replaceAll("'",'"'))?.data)}}

{{JSON.stringify(JSON.parse(bold_tech_plotly_helper.data?.split("<code>")?.[1]?.split("</code>")?.[0]?.replaceAll("'",'"'))?.layout)}}

Our Should_hide variable checks if the AI query is fetching and shows the buttons and chart component once complete. This query also makes sure that the chart preview has an error value option if the AI query doesn't work properly.

To make sure they stay hidden until the AI query is complete, we added this value to each component in the ‘hidden’ value:

How to set it up in your environment

Setting up the Plotly AI helper in your own environment is as simple as downloading the typescript and importing it into your environment as a module. All you have to do to make sure it works is set up a Retool Vector to scan the Plotly docs by adding the URL ‘Plotly.com’. Like we did, you can also set up a Retool Docs vector that scans the Retool documentation too.

This will then crawl the domain for all URLs to formulate an accurate response.

Once that’s done, simply connect the Vectors in the AI query and you’re ready and raring to go!

Download the sample toolscript

The Toolbox newsletter members can download the JSON and import it directly into their Retool environment to test it out ⬇️⬇️⬇️

In Part I and Part II of our Charting in Retool with Plotly series, we explained how to go from basic charting options on a line chart (and how to add some cool features) to a complex Sankey chart generator - all in Retool.

In this part III, we’ll be focusing on leveraging the power of both platforms to create not only useful charts, but highly interactive ones that integrate seamlessly with your internal app toolset. Using the selectedPoints attribute of the chart component is a brilliant way to make your charts more understandable and more actionable.

We’ll be building this funnel chart for a sales app that tracks the number of deals in each status tag. Users can simply click into a bar in the funnel and a modal will show them detailed data for that status group. They can even highlight and select multiple statuses to see all data.

We also made this chart into a module that can be reused across multiple apps.

Let’s jump into how we built this.

Building a funnel chart in Plotly

This is what the Plotly data object for a basic funnel chart looks like:

[
{
"name": "sales",
"x": [
65,
29,
7,
3
],
"y": [
"Prospect",
"Negotiation",
"Contract",
"Won"
],
"type": "funnel"
}
]

We’re going to expand on this basic format with some more complex and dynamic data and interactivity.

For our sales funnel, we started by creating some mock data in a JS query. This defines data keys such as stages, owners, deal names and then sets a deal date and calculates the days in that stage. The for loop creates the full dataset according to the counts defined for each stage.

This JS query is the data we use for testing, and also allows us to export the full module as a JSON for you to download below and use straight away.

We also added a segmented control component above our chart to allow users to switch between number of deals (#) and the dollar value ($):

Next, we connected the data in our JS query and the switch functionality to the chart component in the data object. This is what it looks like:

This formats the deals data into grouped stages for the ‘x’ axis of the chart. If the segmented control value (sgMetric) is set to the number of deals (#), it groups the values by the stages defined, and counts the number of values in each group using .length. If the sgMetric is set to Value rather than the deal number, it groups and then sums the values in each stage to display the total dollar amount.

The keys are defined by the stage_order variable we defined, which looks like this:

{'Prospect':0,
'Negotiation':1,
'Contract':2,
'Won':3
}

Then, the layout object of the chart is straightforward and principally defines the colors, as well as the ability to select and drag on the chart:

{"title": {
"text": "",
"font": {
"color": "#3D3D3D",
"size": 16
}
},
"autosize":true,
"height":1000,
"font": {
"family": "var(--default-font, var(--sans-serif))",
"color": "#979797"
},
"showlegend": false,
"margin": {
"l": 72,
"r": 0,
"t": 0,
"b": 0,
},
"hovermode": "closest",
"hoverlabel": {
"bgcolor": "#000",
"bordercolor": "#000",
"font": {
"color": "#fff",
"family": "var(--default-font, var(--sans-serif))",
"size": 12
}
},
"clickmode": "select+event",
"dragmode": "select",
}

By adding  "clickmode": "select+event",  "dragmode": "select" to the layout object, we make it possible to open the modal and display a table filtered off the data.

Chart details modal

For the next steps, we set up the modal and detailed table view.

In the chart component, we set an event handler to trigger the modal to open on select.

In the modal, we added a table, search bar, titles and more. For the table, we filter the data from the selected points in the chart. The table reflects the data we set up in the JS query at the beginning, and we have formatted these to be currencies, avatars, and dates in the column settings.

The search bar searches all records in the table and is connected to the ‘search term’ value in the table component.

Using this filter will also apply multiple selected points, so users can drag over and select multiple stages at once and see all data for those tags.

Grouping functionality

We also used the recently-added grouping functionality to this modal, so that users can group the data in the table by the owner of that sales account.

To do this, we first had to figure out the column ID of the ‘owners’ column. You can inspect this in the State section and copying the code - the order of these columns is reflected in the order in which they are listed in the table component inspector.

We then added two event handlers to set and reverse this grouping. The first sets the grouping of the table by the ‘Owner’ column. This only runs if they aren’t grouped already using this code: {{!tblDeals.groupByColumns.map(x=>x.columnId).includes('6585e')}}

The other event handler performs the opposite and clears the grouping, if the groupByColumns value of the table is already set to Owners:

We also set the text and icon of the button to switch according to whether the grouping has been set.

Text: {{ tblDeals.groupByColumns.map(x=>x.columnId).includes('6585e')?'Clear Grouping':'Group by Owner'}}

Prefix icon: {{ tblDeals.groupByColumns.map(x=>x.columnId).includes('6585e')?"/icon:bold/interface-edit-select-area-circle-dash":"/icon:bold/interface-user-king-crown"}}

Statistics

Finally, to add additional info to the modal, we set up some statistics to summarize the data.

For the Deals in stage, this JS filters for the selected points and counts the length of the array it returns, to show the number of entries under this stage selection.

For the average size, the first JS script filters by the selected stage, and uses _.mean to find the average of the returned values.

{{_.mean(deals.data.filter(x=>x.stage==Object.keys(stage_order.value)[chartFunnel.selectedPoints[0].indices]).map(x=>x.value))}}

As in the first, the caption changes depending on whether one or more stages are selected.

The third statistic counts the number of days in the stage(s) selected. The code is very similar to the previous, but instead finds the mean of the ‘daysInStage’ value.

Finally we want to return the oldest deal in this stage and present how many days it has been there. For this we use the _.max Lodash function to find the highest value in the data and return it.

And with those final touches - we have a fully functioning funnel chart with an interactive data modal. Since we want to reuse this exact same UI in more of our apps (as we recognize the value of consistent UI!), for our next step, we will make this chart into a module that simply needs to be connected to data to be easily reused.

Creating a module

Using modules effectively is essential for building great applications in Retool. While caution should be exercised when it comes to which modules to build (we typically aim for navbars, forms and non mission-critical features such as this one) since performance can slow with too many modules in each app, using them well can make your internal app ecosystem much more scalable and easy to maintain in Retool.

Next, we’ll show you how simple it was to make this feature a module.

Making a chart into a reusable module

This works much the same way as the normal app did, but instead we have defined values for the inputs that can be configured and reused across our Retool environment.

When you set up a module, it gives you the global option to define inputs and outputs for this module. In this case, most importantly we have the deal_input - our deal data. We also have the option to set the title and the default input.

With modules, you can also connect test data in these places to make sure everything is working correctly. You can access these test values by selecting the moduleContainer in the component tree in the left-hand panel.

In our case, we set up another JS query with some mock data and connected this test data to the demo data as data_input:

This data is the same as we used in the first tutorial above, so all that we changed in the module was switching the references from deal.data, our previous demo data query, to deals_input.data, the name of our module input value. This way the data in the funnel chart input will automatically switch to whatever data it is connected to in each app.

Here you can see the module in use within an app. All we needed to do was pull in the module, and connect our chart data to the deal_input value in the module component. We set the title manually, but this could also be connected to dynamic data or inputs in the app.

This is a great example of using modules to create repeatable patterns in Retool development that ensure consistency and that code is not constantly repeated throughout apps (and therefore becomes hard to maintain).

Download the sample toolscript

The Toolbox newsletter members can download the JSON and import it directly into their Retool environment to test it out ⬇️⬇️⬇️

Members will get guides, tutorials and internal tool tips in 1-2 emails every month.

As part of our Charting in Retool series, we’re stretching the limits of Plotly to create some incredible and functional charts to use in our apps in Retool.

In Part I, we reviewed some of the Plotly basics and how to set up some functionality around the line/scatter graph type of chart. We showed you how, by coding with Plotly, it’s possible to create highly custom charts, with built-in functionality like range sliders, buttons, and annotations. Integrating these with your existing Retool apps makes these charts even more useful and interactive.

In Part II, we’ll be sharing a case study of how we built a complex Sankey generator with a super user-friendly interface. You can use it yourself at sankeygenerator.com.

Building complex charts in Retool with Plotly - building a Sankey generator

So from the simple charts in Part 1, we’re now moving to some much more advanced graphing, to share an app we built to create complex Sankey charts.

If you aren’t already familiar, Sankey charts are a way of visualizing flows of data across various stages, presenting a clear representation of the movement of numerical values (such as amounts of money) from a source to a target. Each stage of the process is represented by a node proportional to the numerical value.

You may see various Sankey diagrams used for visualizing personal finance, job searches, or breaking down complex budget flows within a company.

Play around with it yourself and see!

Note: Data is saved only on the front end and isn’t exposed to us internally.

How do Sankey Diagrams work?

There are many options out there for building Sankey diagrams, but few of them are intuitive to use and most offer a complex UI that requires a bit of a learning curve. For this reason, we focused on building a Sankey option with a UI that even a beginner could understand.

Sankey diagrams are often simple to understand, but it’s easy to hit some mental roadblocks once you start building one yourself.

Sankey diagrams can get really complex too - if we take a look at the Sankey diagram below from user ArciticDrag0n on Reddit as an example. There are tons of data points here, but at first glance it’s still easy to interpret the flow of this salary budget.

The style shown above is a common way of presenting data flow in a Sankey Diagram: on the left-hand side we show specific inputs or nodes that flow to the right. Gross Pay, Tax Return & Employer Match are all sources of income, and this total income is then broken down into its separate parts, in this case - taxes, net income, and a few other sub-nodes.

When programming a Sankey diagram, it’s easiest to think of the source as the from, the target as the to, and then the value is how much value flows between them.

This is not the only style of Sankey chart out there. Sankey chart flows can double back on themselves and represent more abstract flows of resources and values.

How did we build SankeyGenerator.com?

The Sankey generator consists of three sections and a Sankey canvas. The first section is a  home page where users can select and preview sample diagrams to be introduced to the tool.

The ‘Generate my Sankey’ button leads to the Create page, where users can configure their own Sankey diagram using a simple table layout, download their Sankey as a PDF or upload a previously configured Sankey diagram.

Finally, we have a canvas settings page where users can define font sizes, give their chart a title & more.

Let’s run through some of the core features of this app and talk a little about how we built it out.

Plotly Code

Sankey diagrams are natively included in Plotly using the ‘Sankey’ chart type, and they already offer some great built-in features.

Below is an example of a very basic Sankey diagram from the Plotly docs.

var data = {
type: "sankey",
orientation: "h",
node: {
pad: 15,
thickness: 30,
line: {
color: "black",
width: 0.5
},
label: ["A1", "A2", "B1", "B2", "C1", "C2"],
color: ["blue", "blue", "blue", "blue", "blue", "blue"]
},
link: {
source: [0,1,0,2,3,3],
target: [2,3,3,4,4,5],
value:  [8,4,2,8,4,2]
}
}
var data = [data]
var layout = {
title: "Basic Sankey",
font: {
size: 10
}
}
return {data, layout};

You can import this directly into a JS query in your Retool app, and set it up by linking to the data and object values in the chart component - as we showed in Part 1.  

What’s particularly nice about the Plotly code is that the node positions within the generator are completely dynamic, so you can move the nodes around to suit the presentation you are looking for. This kind of interactivity built-in is something we love about Plotly.

This is how the base data object of our Plotly code looks. Due to all the functionality in our app, our Plotly code is very complex, and we defined several variables and set functions above.

However, you can see that most importantly, under the ‘Link’ object, we define the sources, targets, and values of our nodes which we have mapped from our table.

We’ll explain this code as we show you some more features.

User interface

What’s most important about this app, is the ability for any user – whether familiar or unfamiliar with Sankey diagrams or code – to jump in and use it right away. That’s why we set the configuration interface up as a simple table.

The table that is shown is based on the values in the ‘sankey_input.value’, which defaults to the values in the selected template. This value is how we create actions such as adding and deleting nodes.

Users can add new nodes to this table and chart by selecting the from and to inputs and defining a value. The dropdown (select) components are defined by the values already in the table, but custom values are also allowed so that new sources and targets can be created.

When ‘Add node’ is clicked, the node is defined as a new value in the sankey_input variable and it will then appear in the table and Sankey diagram.

Users can delete a node by clicking the trash can in-line in the table. This is set as a row action in Retool.

Hovering over a row pulls up a row action and clicking on this action will delete the entire row and all of its parts. Deleting a row will also reevaluate all target node values to account for the deleted node and readjust the proportions of the nodes.

By clicking ‘More actions’ users can clear the entire table and start from scratch, and also view the table rows grouped by their source node to help them understand more complex tables. This simply switches a tabbed container to a different table view which is grouped by default.

Now let’s look at some more features that we built in to make this app more user-friendly.

Downloading the CSV template

If a user doesn’t have the chance to complete their chart, or wants to save their Sankey to edit later, they can click ‘download as template’ in the top right hand corner.

Download as template will save the Sankey configuration as a simple CSV which can then be reimported.

To upload a template, users just click on ‘More actions’ once more and select Upload. This opens a modal with a file dropzone.

Once a user drops their CSV file template here, a script uses this to set the value of sankey_input once more, clear the dropzone and close the modal. Then the user will have the same Sankey chart in their app once more.

Exporting the Sankey to PDF

While users can take a screenshot of their Sankey chart, it can be really useful to have as a handy PDF. So, in the top corner of the configuration we added an ‘Export Sankey as PDF’ button. This uses the Retool utils.downloadPage option. You can learn more about PDFs in Retool in our PDF guide.

This will automatically download the chart to a single-page PDF and set the file title to the title of the Sankey.

Customizing the Sankey diagram

Finally, it’s obviously important to most people that their Sankey diagrams suit their personal style, so that’s why we added some detailed configuration options.

On the design tab of the application, you can set the title, the background color, font height and color theme for the actual diagram itself. The title text and font size is then set in the Layout object of the Plotly chart.

We also added options to change the orientation and flip the data. The orientation is a simple boolean value inside the Plotly docs (see our first code image) and the flip option simply inverts the data throughout.

We set the color options using some color palettes. We start with three default palettes, which are defined in the color_v variable and presented in a Listview with a repeating color input component.

When a different color is selected from the color inputs, this sets the new value in the color_v variable. Finally, in our Sankey code, we defined the color variable as an array based on this variable called ‘color’ and, with a little tweaking, mapped this as the color options in the Sankey code.

Now, not only is it possible to build functional Sankey diagrams fast, they can be beautiful too!

While Retool is often seen as a product with limited charting options, we hope this proves the scope of what can be done with a little creativity in the Plotly code. Retool is a great platform for building intuitive, flexible UIs that can be quickly adjusted to user feedback and experience.

In the next part of our Plotly series, we’ll be sharing some more unexpected charting options that you can include in Retool to make your internal apps (or even external ones) even more powerful.

At Bold Tech, we think that Plotly Charts are a criminally underrated option in Retool. For that reason, we’ve spent some time digging into all the options available with Plotly and have come up with a whole series of design choices, ranging from simple to complex, to help Retool users integrate better data into their apps.

In this first part of the series, we’ll strip it back to basics with the line/scatter chart and add various features to make it more useful. This will also help to illustrate the structure of the data/layout objects in Plotly, which is often the biggest struggle for developers using it in Retool.

In the rest of this series of Plotly guides, we’ll show you how to make more advanced graphs and charts that might just rival those of your favorite BI tools.

Plotly in Retool: Pros and Cons

Pros

1. Plotly is hugely flexible and with a little tweaking you can get most of the results that you are looking for. This is very useful for consolidating your tech stack and removing costly BI seats for your organization.
2. You can build out niche use cases for your team based on interactive data already available in your apps.
3. Simple charts are really easy to build - and these tend to be the majority of use cases we see. For presenting these simple charts, paying for PowerBI or similar products might be overkill and Retool is a great alternative.
4. Annotations help add a lot of contextual information to chart formats.
5. The flexibility of Retool means you can build your charts specifically for the end user. For example, you might see that operations teams want to see data in a more action-focused format than team leaders, or even marketing teams, who might prefer detailed charts. With Retool you can present the data exactly how it suits these teams.
   

Cons

1. Development speed using Plotly is the major limitation compared to standard BI tools, and is typically slower than the speed of development you’d be used to in Retool too.
2. Nevertheless, Business Intelligence tools like Tableau are usually very expensive, so if you only use a limited selection of charts, you might find using Plotly in Retool a good way to save money.
3. Plotly can take a little time to get into and truly understand, and there is a steep learning curve to mastering the system that may not pay off if you are only looking to make a single chart.
   
   

Plotly Essentials

Retool has built in a UI layer for working with Plotly in Retool, but they are mostly limited to simple charts like bar graphs, line and pie charts, and scatter plots. Working with these options is simple and Retool does a lot of the heavy lifting for you, automatically offering the data as available in your data resource, and allowing you to sum, average, median your data, and more.

With more complex datasets, however, it can be tricky to format the data correctly in the spaces provided. In this case it can be more straightforward to format into a JavaScript query. The Retool UI also doesn’t leave much space for customization with the built-in options.

The key to learning how to use Plotly in Retool is understanding how to transfer their detailed documentation into the data and layout objects used in Retool.

Luckily, there is a simple trick that can help you get started with this for all the demo charts and their code that are available in the Plotly docs. All you need to do is copy and paste the example code into a JavaScript query and change the final line from Plotly.newPlot('myDiv', data, layout); to return {data, layout};.

You can then refer to these objects in the respective value boxes in the Retool chart component - switching the option to PlotlyJSON instead of the UI form, and referring to the attributes in your query.

This gives you a great starting point from which to understand how to manipulate the example charts that Plotly provides.

Here is an example of how the Plotly attributes are organized within the object.

data = [
{
type: 'scatter',  // all "scatter" attributes: https://plotly.com/javascript/reference/#scatter
x: [1, 2, 3],     // more about "x": https://plotly.com/javascript/reference#scatter-x
y: [3, 1, 6],     // #scatter-y
marker: {         // marker is an object, valid marker keys:https://plotly.com/javascript/reference #scatter-marker
color: 'rgb(16, 32, 77)' // more about "marker.color":https://plotly.com/javascript/reference#scatter-marker-color
}
},
{
type: 'bar',      // all "bar" chart attributes: https://plotly.com/javascript/reference#bar
x: [1, 2, 3],     // more about "x": https://plotly.com/javascript/reference#bar-x
y: [3, 1, 6],     // https://plotly.com/javascript/reference#bar-y
name: 'bar chart example' // https://plotly.com/javascript/reference#bar-name
}
];
layout = {                     // all "layout" attributes: https://plotly.com/javascript/reference#layout
title: 'simple example',  // more about "layout.title": https://plotly.com/javascript/reference#layout-title
xaxis: {                  // all "layout.xaxis" attributes: https://plotly.com/javascript/reference#layout-xaxis
title: 'time'         // more about "layout.xaxis.title": https://plotly.com/javascript/reference#layout-xaxis-title
},
annotations: [            // all "annotation" attributes: https://plotly.com/javascript/reference#layout-annotations
{
text: 'simple annotation',    // https://plotly.com/javascript/reference#layout-annotations-text
x: 0,                         // https://plotly.com/javascript/reference#layout-annotations-x
xref: 'paper',                // https://plotly.com/javascript/reference#layout-annotations-xref
y: 0,                         //https://plotly.com/javascript/reference #layout-annotations-y
yref: 'paper'                 // https://plotly.com/javascript/reference#layout-annotations-yref
}
]
}
return {data, layout}; // which formats this to be easily referenced from Retool.

Something that many developers using Plotly are unaware of, is the ‘Annotations’ options it offers. These annotations need to go in the ‘Layout’ object of the Plotly code as you can see in the example above. This can be helpful for adding useful contextual customizations to any chart.

Features such as subplot annotations can be particularly useful for highlighting certain data points. You can read more in their annotations section.

Scatter plot/line graph step-by-step

For this demonstration, we’ve used the scatter plot option as an illustration, as this trace type includes line charts, scatter charts, text charts, and bubble charts and the code can easily be used to create any of these examples.

Line charts are set by changing the ‘mode’ type from ‘markers’, a scatter plot, to ‘line’, or ‘lines+markers’ to combine the two. Bubble charts are achieved by setting ‘marker.size’ and/or ‘marker.color’ to numerical arrays.

Chart 1: Basic chart

To get started, we set up a simple line chart with some social media analytics data. In the code below, we have annotated the purpose and some of the customization options of this chart.

As you can see, the data object is where you’ll format your X and Y values, the type of graph and some of the color scheme (including the color of the line/scatter plots), as well as the format of the text in the hover label.

Data object:

// Format the data object from the dataset ‘YouTubeTotals’
let formattedData = formatDataAsObject({{youtubeTotals.data}});
// Create the chart data array
let chartData = [
{
"name": "Subscribers gained", // The name of the data series shown in the legend
"x": formattedData.Date, // X-axis data: array of dates from the formatted data object
"y": formattedData['subscribers_gained'], // Y-axis data: array of subscribers gained from the formatted data object
"type": "scatter", // Plot type: scatter plot
"mode": "line", // Display mode: ‘line’ for line chart, ‘markers’ displays points only, ‘lines+markers’ for both
"marker": {
"color": "#1E3A8A" // Marker color: blue shade
},
"hovertemplate": "<b>Date:</b> %{x}<br><b>Subscribers Gained:</b> %{y}<extra></extra>" // Hover template: customizes the information shown when hovering over points
}
];
// Return the chart data array for Plotly
return chartData;

Now, in the layout object, we can define more customization options. These typically include the title, legend, labels and their respective design options, such as font and color, and define the margins of the plot.

You can also define whether it’s possible to select points on the chart. This can be useful when using a chart to filter data in a table for instance, which is possible in Retool using the chart.selectedPoints attribute. Note, this is straightforward with scatter plots and bubble charts with clearly-defined markers, but requires some more complex code for line charts.

Layout object:

// Define the layout for the chart
let layout = {
"title": {
"text": "Daily Subscribers Gained", // Title text for the chart
"font": {
"color": "#3D3D3D", // Color of the title text
"size": 16 // Font size of the title text
}
},
"font": {
"family": "var(--default-font, var(--sans-serif))", // Default font family for the chart
"color": "#979797" // Default font color for the chart
},
"showlegend": true, // Display the legend
"legend": {
"xanchor": "center", // Anchor point for the x position of the legend
"x": 0.45, // X position of the legend
"y": -0.2, // Y position of the legend
"orientation": "h" // Orientation of the legend (horizontal)
},
"margin": {
"l": 16, // Left margin
"r": 24, // Right margin
"t": 24, // Top margin
"b": 32, // Bottom margin
"pad": 2 // Padding
},
"hovermode": "closest", // Hover mode: show information for the closest data point
"hoverlabel": {
"bgcolor": "#000", // Background color of the hover label
"bordercolor": "#000", // Border color of the hover label
"font": {
"color": "#fff", // Font color of the hover label
"family": "var(--default-font, var(--sans-serif))", // Font family of the hover label
"size": 12 // Font size of the hover label
}
},
"clickmode": "select+event", // Click mode: allow selection and trigger events
"dragmode": "select", // Drag mode: allow selection of data points
"xaxis": {
"title": {
"text": "Date", // Title text for the x-axis
"standoff": 6, // Standoff distance for the x-axis title
"font": {
"size": 12 // Font size for the x-axis title
}
},
"type": "-", // Axis type (default)
"tickformat": "", // Tick format (default)
"automargin": true, // Automatically adjust margins
"fixedrange": true, // Fixed range for the x-axis (no zooming)
"gridcolor": "#fff", // Grid color for the x-axis
"zerolinecolor": "#fff" // Zero line color for the x-axis
},
"yaxis": {
"title": {
"text": "Number of subscribers", // Title text for the y-axis
"standoff": 6, // Standoff distance for the y-axis title
"font": {
"size": 12 // Font size for the y-axis title
}
},
"type": "linear", // Axis type: linear
"tickformat": "", // Tick format (default)
"automargin": true, // Automatically adjust margins
"fixedrange": true, // Fixed range for the y-axis (no zooming)
"zerolinecolor": "#DEDEDE" // Zero line color for the y-axis
}
};
// Return the layout for Plotly
return layout;

Chart 2: Basic chart with trend line

For this chart version we have the same chart but have added a trendline that summarizes the values as an average of each month. To set up the trendline, you need to make these changes in the data object. In this chart, the layout object is exactly the same as in the first.

This trendline is just another line on the chart, so this method can also be used for adding a second line to the chart to represent different data.

In our case, we needed to first group months and calculate averages of each, so we initially had to define these variables and number formats and calculate the averages:

Data object:

// Format the data object
let data = formatDataAsObject({{youtubeTotals.data}});
// Convert dates and subscriber gains
let dates = data.Date.map(date => new Date(date)); 
// Convert subscriber gains to numbers
let subscribersGained = data.subscribers_gained.map(Number); // Ensures values are numbers
// Group data by month and year
let monthlyData = {};
dates.forEach((date, index) => {
let monthYear = `${date.getFullYear()}-${date.getMonth() + 1}`; // Format as YYYY-M
if (!monthlyData[monthYear]) {
monthlyData[monthYear] = [];
}
monthlyData[monthYear].push(subscribersGained[index]);
});
// Calculate the average for each month
let monthlyAverages = {};
for (let monthYear in monthlyData) {
monthlyAverages[monthYear] = _.mean(monthlyData[monthYear]);
}
// Prepare the data for the trend line
let trendLineX = [];
let trendLineY = [];
for (let monthYear in monthlyAverages) {
let [year, month] = monthYear.split("-");
let date = new Date(year, month - 1, 1); // Start of the month
trendLineX.push(date);
trendLineY.push(monthlyAverages[monthYear]);
}
// Main data series (scatter plot)
let plotData = [
{
name: "Subscribers gained",
x: dates,
y: subscribersGained,
type: "scatter",
mode: "line",
marker: {
color: "#1E3A8A"
},
hovertemplate: "<b>%{x}</b><br>%{fullData.name}: %{y}<extra></extra>"
}
];
// Conditional trend line addition with switch toggle
if ({{ trendlineChart2Switch.value }}) {
plotData.push({
name: "Monthly Average Line",
x: trendLineX,
y: trendLineY,
type: "scatter",
mode: "lines",
line: {
dash: "solid",
color: "#FF5733"
},
hoverinfo: "skip"
});
}
// Return the data for Plotly
return plotData;

Chart 3: Annotations

For this chart, we have replaced the trendline with an annotation that alerts the user to an event on the chart. For the sake of clarity in this first code, we manually coded in the annotation label and value, but you could use the annotations options to set dynamic values to automatically indicate values such as the highest or lowest with some JavaScript calculations.

The data object is the same as in the first chart, but we’ve changed the layout object by adding the ‘Annotations’ object within it. This ‘Annotations’ object comes in right at the end of our layout object code, after all the other code.

This is the annotations object to be added to the layout:

"annotations": [ // Unique to this chart: Annotations section
{
"x": "2023-06-03", // X position of the annotation
"y": 1691, // Y position of the annotation
"xref": "x", // X-axis reference
"yref": "y", // Y-axis reference
"text": "Special event", // Text of the annotation
"showarrow": true, // Show an arrow pointing to the annotation
"arrowhead": 7, // Arrowhead style
"ax": 150, // X offset of the arrow
"ay": 10, // Y offset of the arrow
"hovertext": "Special event on 2023-06-03: This event caused a significant increase in subscribers.", // Hover text for the annotation
"hoverlabel": {
"bgcolor": "#fff", // Background color of the hover label
"bordercolor": "#1E3A8A", // Border color of the hover label
"font": {
"color": "#1E3A8A" // Font color of the hover label
}
}
}
]

To take these annotations one step further, we’ve made some dynamic options based on some calculations. We included a multi-select component (named selectedAnnotations here) where users can decide which features to highlight.

When any of these are selected, a marker will show on the chart to point out the relevant value.

These are calculated in JavaScript queries that look for the minimum and maximum values using _.minBy and _.maxBy. These queries can be triggered to run on the value selection.

Min:

Max:

In the Plotly code, we then check if the multiselect (selectedAnnotations) includes the selected value, and then if so, sets that annotation on the chart. As before, this code is right at the end of our layout object.

if (selectedAnnotations.includes('maxSubscription')) {
annotations.push({
x: {{ findMaxSubscriptionDay.data.Date }},
y: {{ findMaxSubscriptionDay.data['subscribers_gained'] }},
xref: "x",
yref: "y",
text: "Max Subscription Event",
showarrow: true,
arrowhead: 4,
ax: 200,
ay: -20,
hovertext: "Max subscription on  + {{ findMaxSubscriptionDay.data.Date }} + : This event caused a significant increase in subscribers.",
hoverlabel: {
bgcolor: "#fff",
bordercolor: "#1E3A8A",
font: {
color: "#1E3A8A"
}
}
});
}
if (selectedAnnotations.includes('minSubscription')) {
annotations.push({
x: {{ findMinSubscriptionDay.data.Date }},
y: {{ findMinSubscriptionDay.data['subscribers_gained'] }},
xref: "x",
yref: "y",
text: "Lowest Subscription Event",
showarrow: true,
arrowhead: 4,
ax: 25,
ay: -100,
hovertext: "This was the day with the least subscribers on  + {{ findMinSubscriptionDay.data.Date }} + .",
hoverlabel: {
bgcolor: "#fff",
bordercolor: "#1E3A8A",
font: {
color: "#1E3A8A"
}
}
});
}

Chart 4: Color scale

In chart 4, we’re getting a little funky with our color scheme and have used the built-in color scale to add some interest to the chart. It’s not a major lift, but color can go a long way to making data easier to understand with a single glance. This might be particularly useful for bubble maps.

The color scale is defined in the data object under "colorscale": "Viridis".

return [
{
"name": "Subscribers gained",
"x": {{formatDataAsObject(youtubeTotals.data).Date}},
"y": {{formatDataAsObject(youtubeTotals.data)['subscribers_gained']}},
"type": "scatter",
"mode": "markers",
"marker": { // Marker customization
"color": {{formatDataAsObject(youtubeTotals.data)['subscribers_gained']}}, // Marker color based on subscribers gained
"colorscale": "Viridis", // Color scale for the markers
"showscale": true // Display color scale
},
"hovertemplate": "<b>%{x}</b><br>%{fullData.name}: %{y}<extra></extra>"
}
]

Chart 5: Range slider and time buttons

For our last addition, we’re adding a handy range-slider feature and some buttons to adjust the time span.

The data object is the same as in chart 1. For the layout object, everything we need here is under the ‘x-axis’ object. The range slider is a built-in option, and can be activated simply by setting ‘rangeslider’ to visible.

The integrated buttons are an additional UI feature that can save some screen real estate by keeping buttons on a Retool app to a minimum. It’s important to note however that the state of these buttons are not exposed to Retool, so can’t be used to filter more data in the app if needed. To filter data in both a chart and table, for instance, the buttons would need to be configured in Retool itself.

X-axis object: 
"xaxis": { // X-axis configuration
"rangeslider": {
"visible": true // Display range slider
},
"rangeselector": { // Range selector configuration
"buttons": [
{
"count": 7, // Number of units to go back
"label": "1w", // Button label
"step": "day", // Unit of time (e.g., "day", "month")
"stepmode": "backward" // Step mode (backward in time)
},
{
"count": 1,
"label": "1m",
"step": "month",
"stepmode": "backward"
},
{
"step": "all" // Button to view all data
}
]
}
},

Candlestick chart

Another similar option to the line and scatter graphs is the Candlestick chart. This chart gives you a clear overall trend line of values, and up close users can get a better understanding of the positive and negative values and their min/max values.

It’s a particularly common format in financial charts.

To illustrate this chart, we used the publicly available Bitcoin price data.

Data

// Accesses the nested historical data for BTC from the API response
let btcData = {{ getHistoricalData4BTC.data }};
// Converts timestamps to ISO date strings in 'YYYY-MM-DD' format
let btcDates = btcData.Data.Data.map(item => new Date(item.time * 1000).toISOString().split('T')[0]);
// Extracts the 'open' prices for each data point
let btcOpen = btcData.Data.Data.map(item => item.open);
// Extracts the 'high' prices for each data point
let btcHigh = btcData.Data.Data.map(item => item.high);
// Extracts the 'low' prices for each data point
let btcLow = btcData.Data.Data.map(item => item.low);
// Extracts the 'close' prices for each data point
let btcClose = btcData.Data.Data.map(item => item.close);
// Constructs a data series object for a candlestick chart
let btcDataSeries = {
x: btcDates,
open: btcOpen,
high: btcHigh,
low: btcLow,
close: btcClose,
type: 'candlestick',
name: 'BTC Price',
hovertemplate: `
<b>%{x}</b><br>
Open: %{open}<br>
High: %{high}<br>
Low: %{low}<br>
Close: %{close}<extra></extra>
`
};
// Returns the data series object as an array
return [btcDataSeries];

Layout

In this case, our layout object is very straightforward and mainly defines the labels, legends and color scheme. The range slider is set to visible as default, but can be added as in chart 5 and set to false if not required.

return {
title: {
text: "BTC Price Chart",
font: {
color: "#3D3D3D",
size: 16
}
},
font: {
family: "var(--default-font, var(--sans-serif))",
color: "#979797"
},
showlegend: true,
legend: {
xanchor: "center",
x: 0.45,
y: -0.2,
orientation: "h"
},
margin: {
l: 72,
r: 24,
t: 80,
b: 72,
pad: 2
},
hovermode: "closest",
hoverlabel: {
bgcolor: "#000",
bordercolor: "#000",
font: {
color: "#fff",
family: "var(--default-font, var(--sans-serif))",
size: 12
}
},
xaxis: {
title: {
text: "Date",
font: {
size: 12
}
},
type: "date",
automargin: true
},
yaxis: {
title: {
text: "Price (USD)",
standoff: 6,
font: {
size: 12
}
},
type: "linear",
automargin: true,
zerolinecolor: "#DEDEDE"
}
};

There you have several variations to improve your scatter/line charts in Retool with just a few simple tweaks! For our subscribers we’ve included links to these charts in Retool below.

In the next part of this series, we’ll be sharing how we built out a complex Sankey diagram in Retool.

Retool offers a native option for uploading and storing files within its environment. This works a little like an AWS S3 bucket and can be useful for integrating file storage into your business software and internal tools for no extra cost, though it does come with some limitations.

In this guide, we'll walk through the opportunities and limitations of Retool Storage, and how we recommend uploading, previewing, and removing files.

What is Retool Storage?

Here are the basics:

• Retool storage allows for document storage and predominantly supports saving images and PDFs.
• It’s only available for cloud-hosted Retool instances.
• Retool Storage includes up to 5 GB of storage per organization. Files can be up to 40 MB each. They do seem to have a hard limit here and you’d have to request more storage from the team rather than just pay for more.
• Files are only available to users by default, but can be made publicly available.
  

Benefits

• Retool Storage is free up to 5GB, which makes it a great solution for low-level storage requirements or simple add-ons to Retool applications that won’t cost a penny.
• Retool Storage works a lot like an AWS S3 bucket, but is easier to set up, cheaper, and easier to shut down too. Many people struggle to manage AWS buckets and accounts and find themselves overpaying for storage, so this can be a good option for ‘light’ document storage.
  

Limitations

• When uploading to Retool storage, the data saved against the file is quite limited: only name, type, sizeBytes, value, url. It’s not possible to save custom values such as the ID of the record you’d like to save it against (e.g. saving a profile picture against a user ID in your table). This means that in order to save additional data against a file, you need to save this in a separate DB, which can get disorganized quickly if not set up correctly. You would probably expect that this kind of connection would be a native experience so using Retool Storage might not be the fully-integrated time saver you would expect.
• Once uploaded, it can be confusing to retrieve the files again. When uploading multiple files, it’s not necessarily straightforward to pull these files back into the app to preview, you need to save they keys somewhere in your app or in your database to retrieve files again once uploaded.
• Permissioning is not as well developed for Retool Storage as for other aspects of the Retool environment, so it can be difficult to limit access for certain users to this storage, meaning almost anyone could upload, read and delete files. With S3, on the other hand, you can set up a connector with scoped access (like read-only) for certain users.
• Given the lack of organization around uploads, it works more like an S3 bucket where you can dump files into folders and retrieve all of them when needed. Organizing these files properly requires some pre-planning and additional scripts.
  
  

Overall, while Retool Storage works for simple use-cases, it does feel like an addition to the Retool ecosystem that would benefit from some TLC in order to be suitable for larger or more complex usecases, nor is it particularly enterprise-ready as a product. For this reason, we would recommend using Retool Storage more for smaller, side usecases (like storing logos, or non-essential product photos), rather than anything mission-critical.

For more mission-critical file storage or for storing larger files, we would probably still recommend using Amazon S3 or even consider using our Retool Database workaround for smaller files, which we explain below.

How to use Retool Storage

Retool Storage is relatively simple to work: all you need to do is connect a query to the Storage resource in your app, select an action and then connect it to your UI with event handlers.

You can even use the File button, upload and input to connect directly to Retool storage without creating a query, by selecting the Upload file to Retool Storage option.

The GetAllFiles action type with retrieve metadata such as file names, IDs, sizes, types, URLs, and created and modified dates. Using this query, it’s very simple to create a list of all available files for a user to select, for instance with a dropdown or to present them in a Listview.

Uploading files is also simple, and they can easily be organized into folders too. This can be organized dynamically by toggling the fx option and using JS.  

While the file is automatically uploaded into the Retool Storage without creating a separate query, there is no automatic behavior to pull the file back into the app and preview it if needed. One way to do this is using the fileID which is available in the fileButton component value. Note, this value will refresh on page load.

You can then retrieve the file ID from the file button once uploaded using {{fileButton1.value[0].fileId}}, or replace 0 with the index you need.

In order to permanently associate a file with a record in a table – which is a common pattern in Retool apps – you would need to add the file name or ID to a record in the database by creating a separate query. This can be done by triggering another query with an event handler in the fileButton to trigger a database update query with the file ID.

So, given the current limitations of Retool Storage and the relatively small max storage limit, we would suggest using it as an option predominantly to extend the free storage availability of Retool Database, which is currently set to 5GB max. Storing images and heavier files in Retool storage reduces the likelihood of maxing the RetoolDB limit, but the additional scripting needed to organize and filter files makes it less suitable for

If you’re looking to give it a go, Retool has a couple of detailed tutorials for creating a document storage CRUD using Retool Storage on their docs page.

Retool Storage quickstart | Retool Docs

Learn how to build apps for managing files using Retool Storage.

Docs

How to save files against a record in Retool

Since the current state of Retool Storage means that you need to write a separate query to associate a saved file to a record, it might make more sense for some users to just use the JSON column type in their database to store the document or image instead.

This is useful for organising files that are specifically associated to a single record in your database, but be aware that it might max out your Retool DB storage limit quickly if storing heavier files.

Setting up your database

You’ll need to set up a column type in your Retool Database table to save these files. This will just be made of one column - a JSON field type - which will save all of the necessary data for your file, including the base64 data which encodes your file.

Before proceeding with the file upload process, you need to add a JSON field type column to your table. Set the default value to be an empty array by using the box brackets ‘[]’. This setup allows for seamless storage of uploaded files within your database since all data will be included in this JSON object.

You will define the JSON value from your app, but using this method you can save custom values against the document that might be useful, such as:

• Record ID - e.g. number (whatever you are saving the file against, e.g. a user)
• Date updated
• Tags
• Associated Retool user
• And more.
  
  

Setting up your app

Now that you have the JSON column type available in your table, you just need to connect this to your Retool app. In this walkthrough, we have a simple table with products, against which we’d like to save both an invoice and a product image.

Upload process

First, we need a component that allows for file upload. You can either use the file button, file input, or the file dropzone.

In our table component, we added a custom column with the button type which triggers an upload/view modal to open.

In this modal we have a tabbed container which switches between the two previews, and the file upload sections, where we have a file dropzone to select the files to upload.

The upload button triggers our ‘upload’ query, which saves the document data back to the database in our JSON object.

First, we set up the apend data object as a separate script, which we called ‘apend_file’. Here, we pull in any existing data, then retrieved the values from the app that we would like to save to our new file data, and formatted them as an object. This object value is the one that we will use to save the document data back to our database. If no file exists, it will create a new one. With this query, the apend_file query is set up to save multiple documents per record, and saving a document will simply add it to the JSON.

const existingData =  get_file.data.files[0] 
const newFileData = {
"name": fileDropzone1.value[0].name,
"type": fileDropzone1.value[0].type,
"base64Data": fileDropzone1.value[0].base64Data,
"date": moment().format('YYYY-MM-DD'),
"product_id": table1.selectedSourceRow.product_id,
"user_uploaded": current_user.fullName
};
existingData.push(newFileData);
return existingData;

Setting up our apend query is now really simple, we just need to filter by the selected row ID, and pass in this data to the ‘files’ column.

On success, we set up two event handlers: one to trigger the get files query to refresh the data, and then cleared the dropzone value.

Our get_file query is very basic, simply pulling in the ‘files’ JSON object by the selected row:

SELECT files FROM orders WHERE id = {{ table1.selectedSourceRow.id }}

Connecting to the preview

Connecting to the preview is now really simple. Now, when a user clicks the ‘See files’ button in the table, we also set it up trigger the get_files query to run and refresh the data.

Now, inside our tabbed container we have one tab that allows users to preview PDF components (in this usecase, our invoices), and one with an image component to preview any images.

Users can select the available files from the dropdown. Our dropdown gives additional information about the files which would not be possible with the Retool Storage option, without additional scripts.

The data source filters the documents saved in the ‘files’ column by the ‘image/jpeg’ type. The image file object is then connected to the value of the dropdown (select) component.

The PDF works in the same way, but instead filters the data by type: application/pdf.

Delete files

Finally, we need the ability to delete files when needed. For this we added a button to the tabbed container that runs a script and then triggers the delete_file query.

await delete_file.trigger({additionalScope:{passed_name:select1.selectedItem.name}})

This query filters the selected item out of the JSON (in case there are multiple files) and removes it removes it from the JSON.

{{get_data.data.files[0].filter(obj => obj.name != passed_name) }}

If you would like to learn more about Retool, you can read more on our blog.

More in the What is... series:

• What is Retool?
• What is Retool Database?