Build React-like apps for internal tooling 10x faster with Retool

So what we're going to cover today is a little bit of intro about me, and then we'll go into what are some of the challenges related to building internal tools. And really that leads to kind of what the genesis of retool and what the tool is, how it works.

We'll also look at then a little bit more tactical stuff like how to connect to databases and API's and we'll build a simple kind of an admin app with a create read update and delete functionalities. And then we'll look at how you can use javascript in retool and a bunch of different areas and how you can import different libraries, use CSS, do some styling, and also how you can create your own custom react components or sort of bundles of components within retool which we call modules.

So a little bit about me, I am a developer advocate here. I've actually only been with the company about two months, but before I started, I found retool because I was building an internal tool for the last company I was at, which was a sort of a data piping and integration tool called Tray.io. And I built an internal operational interface for the sales and success teams to use to aggregate a bunch of customer data. And when I did that, I really fell in love with the tool because it saved me a ton of time and eventually just ended up joining retool because I thought it was really cool.

And so I spend most of my days figuring out how to bridge the gap between different developers and explain what we do in a way that helps people figure out how to build internal tools faster. Like a couple more intros Hi, Lucas. Hi, ji. Good to see you all here. And so I'm kind of a hacker at heart. I started programming in QBasic when I was a kid and, and eventually, you know, dabbled around in Visual Basic and and work for a while company building instrumentation automation tools for software and hardware for automating processes, but it had sort of a low code type of an interface. And, and I got really passionate about how do you use these sort of productivity enhancing abstractions for coding. And that's a big part of really what I love about retool and the last couple of companies I've worked at is, smarter visual abstractions that just allow you to create more and to build whatever tool it is you have in your mind. So that's kind of the heart of this for me.

And so the other thing I want to say is that this workshop is really conversational. I like to do these things in a very conversational way. So if you have any questions, feel free to drop them in the chat or in the discord and I will work them in as I'm going. And I also have my friend, Devin here from retool and he will be able to jump in in more depth if I can't get to it while we're going.

So what is retool? Why do we exist? We exist to help engineers create valuable software really fast. And that often takes the form of these internal tools where there's a really well scoped problem. And it's something that usually you just need to get done really quickly. Um so internal tools you're probably all familiar with them. Things like admin panels, CRUD interfaces, custom internal apps. Um these tend to fit into this realm of tools that you use internal to your organization but you can't find something maybe off the shelf like your CRMs or your marketing automation tools, your DevOps tools. And we're not talking about necessarily your your front-end you know your your public facing product or your marketing site. There's this whole section of tooling that needs to be built usually internally and use React or Vue or Angular for that. And types of tools that typically exist. Things for you know revenue forecasting and contract renewals and managing cohorts and vendors and doing customer support and procurement and inventory management.

So you might use some of these frameworks that already exist. But you tend to end up still having to build a whole lot of boilerplate code. Deva thanks for the intro good to see you. And so these these internal tools tend to be a really well-defined problem. There's some operational tasks that someone's probably doing pretty manually internally. And you just need some interface to the data to be able to modify it and to take action on it. And usually there's a lot of pressure with these things because they're blocking some sales or marketing or success or engineering process. And you just need to get it done to move the business forward. And since there's often internal users usually don't have the same stringent requirements that you would have with your public facing product. So it doesn't have to necessarily be designed quite as well, although you would like it to be really just needs to be practical and functional. The challenge that come up whenever you're building these tools from scratch is you end up building a lot of boilerplate code, especially in React, you know, to go find the right UI components, test them, make sure they work for what you need. You might be pushing into your standard kind of dev cycles and waiting on different teams to approve your code and the slowdowns can kind of get annoying over time. And to make it look good and and interface with the back end data well, you might need more expertise in CSS or consult with some other team that's better at back end interfaces. So this is why we built Retool. Retool actually emerged as an internal tool that the founders were building a FinTech startup in the UK. And as they were building this, they realized they needed all these tools to do know your customer checks and anti money laundering operations. And so as they were doing that, they built these sort of internal tool to build internal tools and very meta. I know. And as they were doing that, they just kept building and realize, oh, this is actually a more valuable thing. There's a whole lot of companies that have some JavaScript knowledge. They're familiar with these frameworks. But they just need to get it out the door really quickly. And so that was the sort of genesis of retool a few years ago. And since then, it's been growing really fast. And that's because there's a few components, this it, what it is, is a drag and drop interface that allows you to drag and drop these different UI components, and a whole bunch of pre built API and database connectors, which just save you a bunch of time connecting to these different data sources. And then the ability to write JavaScript or SQL anywhere across the app to actually implement the business logic. And so let's dive into a little walkthrough, and I'll walk you through it. And let me know if you have any questions as we go. So this is retool. So retool when you get in, you have various folders and apps that you've built. You also have this resources tab that allows you to go and create new database resources for whatever types of database you're working with, or connect to a custom API like a rest API or other API based services. Please drop in the chat, what typical databases or API as you work with or ones that you're considering in future internal tooling. And I'd love to see some examples of what people are working with. So you see, we have the different connectors here. If you were setting these up in your app, and you can go this, do this, too. If you want to follow along, just go to retool.com.

And you can go to try for free and do a free trial. And you can work along with me connect to any systems you have the credentials for. And that there'll probably be a fun way to really get the most out of this, you don't have to put a credit card in or anything, just drop in your email, that'll, it'll be pretty instant. Nice.

So once you set up a database resource, and whenever you create your account, we'll create some sandbox instances for you for a book like a Postgres database. So you have some data to work with. So even if you don't have a database right now, you can use the one that comes with the trial package. Once you set up a resource, you also have access to a query library where you can go and build shared queries that you can share across the apps.

But let's jump in and see what exactly an app is. So what I'm going to do is I'm going to create new, create a blank app, let's just say my Postgres admin panel, give it a name, just leave it on the root location. And when I create this app, I get to a blank canvas. So from here, I'll just empty it out. So we have this canvas, and we can go in and drag and drop different components. So let these be things you're familiar with things like a table. So just go and drag and drop this. And this is all on a grid here. That will resize with the browser. And so you get some level of responsiveness out of the box. And you can customize some things, but usually it doesn't matter a whole lot for internal tools.

And so I dropped in this table, I can also go in and say, drop in, say buttons for creating different things. Let's see text inputs, I wanted to add, say a search bar or let's see. Text field for header and you can use some markdown in here and say hey, my admin panel. But there's a whole bunch of other things, things like containers that you can use to aggregate other components, you can also drop in charts, key value maps, you can drop in a modal button which will open up a modal, which you can add other inputs into. All of these things have different properties and methods associated with them. If I open up the left-hand panel here, the browser, you can see that I have this table here. If I select that, I can go and drop into it and see there's data associated with that table, and it's an array of objects, each of those has a name, rating, and ID key values. But there's a bunch of other things, so this container has values, and all of these are modifiable within JavaScript. So you can write JavaScript anywhere within these input boxes just in curly braces and reference different values across the app. So you can see this is auto suggesting, I can reference data from this initial query, from other components in the app. And that really gives you the flexibility to write JavaScript anywhere across the app. On the left hand side too, I want to highlight, you also get access to information about the current user and any groups that they're associated with. So if you need functionality in this sort of front end app, that's dependent on say different user groups across your organization, you can give them a group and set these components to selectively display or selectively have functionality based on the group the person is associated with. You can also read URL params on the URL that comes in. You can let's see, set up URL parameters and map those into the UI. So you can make kind of apps that are customizable in the URL. And you can also store data locally, either in, like say a temporary state variable, which you can reference across all the components and all the JavaScript, places, areas where you write JavaScript. Any questions about this so far? Feel free to drop them in the chat or in the Discord.

So the next thing we'll look at, so let's just scroll through the components here. To give you a sense of the breadth of these, you can drop in images, for instance. Forms, button groups, check boxes. A lot of the common components you might see in like an ant design, if you're familiar with that. Date range pickers, file pickers. I have one that's specific. One common thing that comes up is you need to upload a CSV file into your database, for instance. You can say grab this upload file. Grab some CSV file. Let's see, I think I have one. Where is it? There you go. That was a CSV file I have. I uploaded that now.

I see a little change to it, which is actually pretty cool. Okay. That is what the database looks like. Another one. This is a CSV file that I have. So, I just uploaded that file to the front-end here. And, when I did that tag, it was now looking at all the data that's in that CSV file. If I wanted to go and selectively insert that directly into a database, I could take this table here and reference in the curly braces this filepicker.parsedvalue. We can see that this is showing me all the data in the CSV file that I just pulled into the front-end. I can go and see if I want to batch process all of them in, or insert them into a database for instance.

Let's see, back to the components, we got filepickers, JSON editors, microphone input, multi-selects, barcode scanners. If you're doing anything that's connected to physical devices, rich text editing, bounding boxes operating system, for instance, inline-to-line production, machine learning, fashionable name lines, permission labels, query builders, videos, timers, containers, et cetera. I'll reference this now, and we might come back to it a little later.

If you don't want to go to the next slide, you can write in all of your React code directly, and pass in data, and I'll show you where you can find more information about how to do this.

Alexander, can you show again how did you add the CSV? Yes, sure. Let's close this. If you wanted to just upload a CSV file, it is the same thing as the proper CSV. located locally as well. What I did was I opened the right-hand panel. I'll get this out of the way. And I went to this folder, we'll call it brothers and sisters. Then I clicked upload file and selected this CSV file and then opened it. When I did that pulled that file in and parsed it on the frontend and I could start referencing it. And then sent it to me. Can you see that? You can deploy this retool application internal to your organization so you can set up your own docker container. 30s, full size on in a little bit and then when you click a button or a certain action start a new action. And just to go into that, so anywhere in the app, you can hit command K, and this opens up the Omni box. And so I can go to the Resources tab here and go to Create New and see that, where is S3? You can add your S3 resource here directly. And I think you were saying that was necessary to just automatically sync it in, Devin, is that right? Yeah, that's correct. You'd enter your credentials here. Once connected, you could tie into that S3 via that. We also have a native component inside of Retool that is an S3 file picker. That would allow you to upload that data into S3. So there's a few ways to go about doing this. Yeah. So let's go back to the app here and let's select this. And we can see there's an upload to S3 component, which you can then reference your S3 resource if you have it set up. It looks like that answered your question. Let us know if you need anything else on that, Alexios.

Okay, so let's show what it's like to connect to an actual database resource. So let's delete some things here. Leave the cat for good measure. And, let's delete that. And so now we have our table that's not referencing anything because I deleted the file picker. So we haven't looked at yet the bottom panel. So the bottom panel allows you to build these queries out, or REST API requests. And so let's just expand this up a bit. And so to do that, what you do is you can go and add a new resource query. And when you do this, it creates a new one here and you can then you can select the resources that you have set up in your account. We got my SQL database, Postgres, I have my Firebase test account, some GraphQL elements that I've added. So what I'm going to do is just select this Postgres onboarding DB. If you are in retool right now, this is a pre-built database that comes with your trial account. So you can open that up if you want to and follow along in there. So I will select this onboarding DB and the first thing I can see is that this now is referencing that database and then on the right hand side you can see that there is a sort of schema view. So we can go and look and see what all the tables are, which columns exist within those tables. And so I can see OK, there's an orders table. Let's just look at the products table. So if I go, say select star from products. And you can see it's auto completing as I'm doing that, and I can go and preview this now. And this will show me that that SQL query worked and pulled in a bunch of data from that database.

And so let's just go ahead and save this, I'll call it select products. Rename it and now I have this query that's going out to my Postgres database and pulling in that products table data. Let me know if you have any questions on this or if it's going too fast, I'm happy to slow down.

And so we previewed that and so now what we can see is if I open the right hand panel again, I can select this table and go reference this select products query. So let's go and say, let's type select products. And let's do data. And we can see that this automatically populates that out into this table with all of the column headers.

Great question from Jan, what is the approach for a company that has all the connections available only internally, the company has to get a retool application running internally via Docker and build some new internal tool this way? Yeah, exactly. It would be running on your on your local your your virtual private cloud. So it would have your own internal IP address. And that would be interfacing with your internal resources. I don't know if Devin, if you want to dive into that more. Can you do? Oh, yeah, go ahead. Sorry, I was just gonna say so. So generally speaking, we have two versions of retool. We have the cloud version, which you just sign up on retool calm, and you get started. Then we have the on premise version for when you have internal databases that can't be allowed to connect to the internet. Essentially, you pull retool down as a Docker image, that's the simplest way of doing it, we can run on an EC two, we can run on Kubernetes, we can run on most any infrastructure. And then from there, you can connect your internal data sources, none of your data is leaving your VPC. And so then from there, you build your internal apps off of that. So, I hope that helps us know if you need anything else on that. Alexious asks, can you differentiate the environment? So oftentimes you're adding resources that are maybe a dev environment versus a production environment. So let's, let's look at the actual resources themselves. So, you can see I'm looking at this Postgres credentials page, and I have a production and a staging tab here. So, we can enable staging. And, I don't want to erase this. Let me do this on another resource. Here we go. And so, you can have two sets of credentials for your production and staging. And then, what was the other part of that question? So, dev and prod. Let's see. And let's jump in here. Devin, can you speak a little bit to how we typically manage dev and prod relationships in terms of different environments? Yeah, absolutely. So, typically when you have, so what Chris just showed, is when you set up your resource, you can see there's a dev You can see there's a dev, and there's a staging version. And then inside of your retail application, when you connected one of these resources, inside of the UI, you'll actually see, on the top right, usually to the left of those three dots, there'll be a little toggle, and what it says is staging or production. And you can jump between one or the other. And you'll get to see different versions of your apps, and then you can manage them that way. Alternatively, if you're just thinking about releases and history and ways to still build your apps while having a production version ready, you can absolutely do that through Retool by just setting a release version. And then in the background, any edits you're making aren't going to show to the end user until you create a new release of that application. Alright, let us know if that helps Alexius, and happy to work in any other questions into this. And let's jump back into building this admin panel. So what we've done so far is just selected the data that's in this products table. And we've run this SQL query, and now we have it in our table. And so that fulfills a little bit of the read functionality in terms of CRUD. But what if we want to say update one of these items in our database? So let's next go and change these columns to be editable. So say we want to change the name. So what I'm going to do is change the name of this column. And we'll make this column editable. And so what this means, then is I can go in and directly edit the value in the table. And let's make this a little bit bigger.

And so you can see that I just edited this value, and it turned that cell green. And what that means is this is a new change that is ready to be saved. And you can then reference that changed cell in the table, let's see, go down. Let's under the record updates product property, I can see that I have an array of objects and this references the changed values in that table.

So I can the new name is this working effectively with legacy code two. So then if I wanted to pass this back into the database, I can now go and either duplicate this query by hitting Command D. Or I can go and add a new one. So I just hit Command D there, and then let's do update row. So give it a name. And this time I'm gonna go into the GUI mode for the SQL. So instead of writing the low level SQL query, maybe you have someone on your team that's less familiar with SQL, or you're less familiar with SQL. Let's just go to GUI mode. And what this allows for then is just doing more of a configuration based interface for interfacing with your Postgres database. So what we're doing is more on the products database table. So we'll do products. And let's do update an existing record. And so right now we're going to update an existing record, and we want to get the ID for this row. So what I'm going to reference is the name or the ID. And now to find that specific record, we're going to reference the record updates from this table. So do table, one record updates. And I can see that this comes in as an array. So I'm actually going to reference the first item, so you might, you know, if you've had multiple rows that have been changed, then you'd have to, you know, parse through them individually, and then you'd batch you know, either that or or create some sort of batch logic.

Okay. So what I've done is referenced, the changed or updated row and also just want to reference the ID. So hit dot and then ID. And we can see that's showing nine here, which is the ID for this row that we're editing. And then ask for a change set. So then let's see if we can just pass through that. So that's adding a name value and then a reference that table one again. Let's just copy this over. We can see that new name is, is referencing here. And so let's just save this. And Okay, so now what we've done is we've mapped this changed value into and ultimately what we want to have happen is when we click Save Changes, we want to call that this update row query. And so that exists in this table setting, we'll go down to events, and we'll add an event handler. And so event handlers then allow us to reference any of the events happening in this table. So say a row is selected, you might want to run some query down here or some JavaScript code. What we're going to do is say when the Save Changes button is selected, then we want to trigger a query. This could also you know, send someone to a different app or a different URL or fire some really fun confetti. So right now it's firing confetti. So let's look at that. Isn't that great? Let's change that again because we didn't actually make the change. So let's go back. So instead of firing some fun confetti, we actually want to trigger this query. And the query we want to trigger is the update row query. And you can also set some logic here. Maybe you don't want to update the row whenever there's some concurrent, you know, transaction happening with the database or whatever your logic is, you can just write that in the curly braces in JavaScript. You can also specify a debounce configuration here. So if you have potentially multiple writes happening, and you don't want some race conditions, you can change that. So let's just exit this. And now we have this event handler set up.

And so now when I click Save Changes, you can see that it update row ran successfully. And the database responded back to us and said that this record was updated. And now if we refresh the table, we can see that that name is updated. And so in the future, we don't want to manually have the user have to click refresh here. So what I'm going to do is say when this query successfully runs, I can set a trigger to say hey, go back and list all of the rows in that table again. So I'm going to say on success. And then on success, I want to select products. And when I save this, okay, so now let's get out of here again. And so now let's say change this one, you can see that it turns green saying there's a change. Save changes and it runs update row. And then also updated the table concurrently. And we see the new value reflecting in the table. Cool. So let me know any questions that come up as we go. I see you said nice touch, John. I don't know what part you were saying that to, though. So thank you.

Okay. So now we have the ability to read from this database table. And we have the ability to update specific items. So I haven't changed these columns yet to editable. But the same logic applies. You make it editable. And then reference the values in your change cell. And you can reference the values in your change set for that table.

So the next thing we want to do is add the ability to delete individual items from this database. So to do that, let's add a button to our table that allows us to delete. So within this table, I can go back to the right-hand side. And at the bottom, well, midway up, you can see it. But let's go to new action. And you can see when I click that, it shows a button here in the table. So let's put this on the right-hand side. And it created an action here. And so for this action, let's give it a name. Let's say delete. And you can see that now the button says delete in the table. And for this button click, I want to tell it to run a query. And for that query, we don't have one yet. So let's leave that empty. And now we're going to go and duplicate this query again, change it to delete row. And when I do this, we're still in GUI mode, so let's set to, set the action to delete a record. And let's add a new action to it. So let's say delete row. And here, we have a section called record record. And so now this delete a record action is going to be referencing the ID. But instead of the updated records now, we actually want to reference the selected row. And we could see if we open the left-hand panel here, we can see the row property in the table and see that there's a data element within it. And then that references all of the items for that row. And so this is ID eight. I changed that I can see it's ID five, et cetera. And so then for this delete row, I'm going to say select at row dot data dot ID. And we can see here that it's actually in the database.

Question from Francisco, is it possible to paginate the data from the database and display it on the table fetched 10 rows per page? Yes, it is. Let's come to that in a second. Okay. So for this, delete a record, we're filtering by the specific ID so that we look up that specific row and we'll see, this is referencing the fifth ID now. So let's save that. And similarly to before, let's set this to have an on success trigger. So we duplicated it. So it's still there. And, um, for fun let's also change the success, um, message. So we can say, Hey, uh, successfully deleted row. And, um, let's see. Deleting a row is, you know, it could be pretty consequential. So let's also add a confirmation modal here. And we'll say, um, yeah, are you sure? So now I have a confirmation modal and I also have a custom success message. So I'm going to save this and let's close these out so we can see better.

And now let's collect the eighth ID row and click delete. Oh, I didn't reference this to the action yet. So let's go back to the action reference, delete row. So now it pops up and says, Hey, are you really sure you want to delete this? Let's click okay and reference. Okay. So let's see, foreign key. I think we have an error. ID violates foreign key. Okay. So we're violating some rule in the database. Let's get this. From products where I do equals dollar sign one last update or delete on table violates foreign key constraint on table. Why not? I'm so, okay. So I think I might not have access to deleting this row. Um, it's born key constraint, FK rails online items. Yeah. And I skipped the delete function for now. Um, yeah. Tom, I appreciate it, Tom. Um, so I think you get the sense of it. Um, what you can do, you link the action to the query and then from within the query, you can go and run the SQL query that actually deletes the data from the database. Thank you for your grace stuff. Um, okay, so next let's, um, create a new item. Okay. And for this, um, let's go ahead and just delete a duplicate this query and we'll say new row. And this time we want to do a insert a record. And um, so there's kind of a couple of ways we could do this. Um, one is we could have some sort of modal here that would allow us to add a new row. Let's just try this here. And we could add in some inputs here. Um, that's one way of doing it, especially if you want to customize it more. Um, another way is to go into the table. Let's do this. And we can, we can also, so Peter says that, uh, we can also reference the I variable within the selected row. Um, I'm not sure if, I mean that I think the selected row should normally work as well. Let's, let's try that though. Just come back to this. So now, so whenever the action button is pressed, it'll pass this index variable through, um, in the I, uh, variable. So let's save this, um, and delete. Um, I think you're on the right trail here, Chris, uh, if you add Dot I D to the very end of that line, uh, data. I dot I D. Gonna say I can't read it properly because technically there's nothing triggering it yet, but let's save and run it and see if that works. Well, this would see these, uh, okay. Yeah. No. Okay. Well, there's something going on with, um, passing. It's either a, either the valid I.D. is not passing through, but it seems like the I.D.

is not passing through, but it seems like the I.D. was passing through was selected row. It's just wasn't giving us, um, access to delete the resource from the database. So, um, we'll just move on from that. And then if you start to play around with this and have questions with it, feel free to hit us up on intercom, uh, we'd love to get on board with you. Um, and we have a support team that, that looks at these things there. I'm thinking this is a little bit more on the database access side of things.

Okay, so where were we at? So within the table, what we wanna do is, um, set up the table so that we can add a new road directly within the table itself. Um, and to do this, there is, um, a function on the table itself that will allow you to do this. And we just changed around some of the event handling. So we'll just see where, where do we move this to? Um, mm mm mm. Yeah, I do new, you know, okay. Yeah. What do we move the new row functionality to Devin? Pardon me? Can you repeat that? Where do we move the new row setting on the table? Show. I know. Okay, here it is. Nevermind.

Okay, so there's a setting on the table for adding a new row. So I enabled that and we get a plus button here. And so this plus button, then if I click that, it will show me the ability to, um, set some values for these specific columns. Um, and so if I do this, um, this value then will show up in the left hand panel under the new row property. So I can see that this values test. Um, I think we're gonna need to input more values here for the database to take it. So let's change these over. To editable for each of these columns. So quantity set that to make editable and unit price. Let's make this one editable. And I d am not sure if it's gonna auto increment that for us. Let's just try it out. Let's just try it out.

So for the new row. So now we're going to insert a record. And let's take the name of this record and pass that through. So we'll say name and I'll reference table one dot new row dot name. And let's add two more fields. So I'll have quantity and unit priced. And here we'll reference the new row dot quantity. And let's just put a value here. Okay. And then when that successfully adds the row, let's update the table. And we'll change the success message to successfully added a row. And let's turn off the confirmation modal. So let's see. So let's save that changes. Okay, insert into name quantity, user price cents, returning null and column created at. Okay, so we have to add in values for all of these. So let's just set created at to editable, update at, and image URL. Okay. So then let's go add created at, updated at, and image URL. And just for time sake, I'm just gonna copy in some values directly.

Okay. So I'll save that and let's try this again. So test, one, two, three, one, two, three. All right, okay. So we've added a new row. So let's go, and we can see that we have a new row in the database table with this test value, these quantity values, and then these static values that I mapped it in. So that's three-quarters of the way towards CRUD-apps. The delete functionality, we might come back to that at the end of this. I want to cover some more things. Any other questions that have come up so far on how to work with databases, on how to, say, take action on some of the items in the database, edit them, et cetera? Go ahead, Greg. If anyone has any comments here on that.

One thing that you would might wanna vary is the fact that there's several different ways that databases will deploy and detect their websites. Connecting to some data that's coming from an API So if I open up the right-hand panel again and let's just go ahead and drop in another table here so we have somewhere to view this data in. And what I looked at before was SpaceX actually has their own GraphQL endpoint. So let's just look at how we can connect to this. And so we can see this Spacex endpoint that, we'll say show you different launches, say 10 different launches and the mission names and the launch sites, et cetera. And so we can test out this GraphQL endpoint. And so say we want to build some sort of interface around this.

Oh, Alexia says, let's use the Poki API. Okay, I'm down for that. Let's try it out.

Okay, so here's the Poki API. Okay, so let me switch from Ditto. Okay, so let's grab this API URL and let's bring that into this interface. So what we want to do is go and create a resource for this API. So let's go and create new and go to REST API and my Poki API and let's put in the URL and then what's the format here? Is ditto the name of a specific Pokemon? Okay, got it. And let's see, is everything under this Pokemon resource or do we need to go up a level? Okay, so we can do types and abilities. Got it, okay, so, just give the name to the API. Resource and then we'll just take the URL and we save that and now we can go back to our app.

I hit command K there to pull up this Omnibox, just FYI. And now let's edit this and in the bottom panel we'll go and add a query. So new resource query and we'll say Get Pokemon. And I'm gonna reference this Poke API that we just added. And since we're doing Pokemon, I can just add this, append this to the URL and let's preview this. And we can see that there's 1118. And that a couple of results there. So let's just display this in a table. So within our table, the same thing we did earlier. Let's go to Get Pokemon. Data... Oh, let me pass that, save that. Okay. Let's see what format is this coming back in. Oh,.results. I think you're going to want.data.results, that should pull it into the table. There we go.

Okay, so now we have, so there's, I guess a limit of 20 results that comes in by default. And we can set the table to be in compact mode, so we can pack in a little bit more into this single table. So now we can see at least just the URL for each of those Pokemons. And we can start to tab through them. Pokemon is in point, I guess it's a full list of all the Pokemons. Yep, so that's one way we can quickly just get data from a specific REST API. Let's see if that API has the ability to add to it. I'm guessing not. Okay, so that's getting some Pokemon data from this API. Let's look at adding posting data into an endpoint. The way I'm gonna do this is you can use the retool API generator. So oftentimes you need to stub out some dataset so that you can build your UI and maybe your backend API is not ready yet. So to do this you can use the rest API generator on our website. And when you go here you can see that you can build kind of a custom dataset and set how many rows will return from it and give it a name. So let's just do this. We have people and let's add one more column. Let's say email address. Give this a name. So I click generate API here, this will generate this table as a rest API endpoint. So now I have a little people endpoint here that I can reference within this app. So let's go back to our resources panel and create a new rest API, My People, and drop in the URL. So now we have that resource created and let's go back.

And so this time, let's edit and go back to our table and let's now add a new API for getting people. So select My People and let's just preview this. Okay, and see we're getting some data in, so let's save it. And within the table, we'll now reference the get people.data.

Question from Tom, the requests to these APIs happens to in Retools backend or on the front-end in the user's browser. I'm actually, Devon, what's the answer to that? Yeah, so if you're using the cloud version of Retool, all queries are proxied through our backend before hitting the client's browser, so the data is passed through for like a fraction of a second, but we don't store any of the data or maintain any of it. Yeah. Thank you, Devon. Can you choose to not proxy is the question. So if you're using the on premise version of Retool, nothing hits our backend, so nothing would touch Retool, and instead it would all stay within your virtual private cloud. But if you're using the cloud version of Retool, it wouldn't need to be proxied through our backend to be able to hit your application. So I guess you could, you could also fire some JavaScript on the front end that would, you know, make some resource request from the front end. And to do that, you would add a new JavaScript query here and you can run some JS code directly.

Okay, so now we've able to get this list of people within the table. So the same thing, let's just show a quick example of deleting and get our delete functionality filled in. So let's add another action button to this table. Put it on the right, we'll give it a name, say delete. And let's duplicate this, and this time we'll say delete person. And this time we're gonna choose the delete action. And let's just test this by referencing the table. One.data this time, IRm.id. Okay? And when this runs we want to get people again. And so let's save that. And let's link the query in. Let's say... Hey Kris, I think you're going to want to reference TableTwo in that query. Oh you're right, thank you. TableTwo.data.I okay. Okay, so now we're gonna call this deletePerson action. And let's save this. And... Alright, deletePerson ran successfully and we can see there's no longer any ID one element here. So that allowed us to delete the resource from this API endpoint.

Oh, good one Tom, thank you. Lucas asked the question, how big of a project can you build on Retool or what big project is already built? There seemed really large apps that have been built. I mean, I think the bigger you build, the more you have to get a little bit smarter about query logic. Because a lot of this is running on the front end. So you have to be careful about how much data you're pulling into the front end and not bog down the user too much. So you might have to get smarter with pagination and maybe write some JavaScript code to really control like a sequential query flow. But, I mean, you can build some massive apps. The one that I built that the last company I was at was all on GraphQL. And it was, I don't know, I think we were running like 25 or 30 different queries across resources and had a tab, let me just show you, tabbed container with, you know, a number of different tabs. I think maybe eight of them. And it performed pretty well. I definitely had to like change things around to make it a little bit more performant. Yeah, so question from Dev Agarwal, can we implement some authentication or role-based access? So within your retail organization, you get some sense of who the current user is and any groups that they're associated with. So if you wanted to reference like specific items that you only want to show them to the user if they're in a certain group, you can selectively display things. So let's see, this, DisableWhenTrue. You could say whenever the user's name is, you know, not Chris, for instance, don't display this item. Is that going in the direction you want to go in Dev? What are you, how are you thinking about using that? Cool.

And then we have this ability to build more groups. You can just reference that programmatically in your JavaScript code and give, based on that user's group, you can give them different access. I haven't worked a whole lot with our access controls that we have more on the pro version.

Devin, is there anything you want to point out there in particular?

Yeah, if you go to the Settings page of Retool, you're able to set permissions based on the user level or the group level. You can create any arbitrary number of groups you'd like, usually what we see is people group based on team or based on project. And so Chris, if you click permissions on the left panel there, what we can see is that in this instance, there's only four groups created. By anytime you can create a new one and then within that group, you can say that this person can access these specific applications, these specific resources. They can only read, they can only write. And you can get really granular with how you want to do this. Along with this, if you're using the on-premise version of Retool, you can also map your permissions from your SSO provider directly into Retool so that they just come out of the box.

That is correct. You can use your active directory groups to map those groups into Retool using the on-premise version. Awesome, thanks, Devin. Okay, any other questions that are coming up? So far we've got this crowdout for our Progress database. We've got reading and deleting from an API specifically. A couple other things I wanted to cover was just how you can write some custom Javascript, how you can do some custom styling. But just want to open it up for questions. Maybe anybody needs to take a bathroom break, water break, anything. Let's just take a pause for a minute.

Okay. Okay, so let's take a look at, so we got a question from Alexander. Is it possible to open as a separate website UI, I mean, the same functionality, but beyond the retool website. I'm not sure if I fully understand the question. A couple of answers in that direction is you can pull in, say, another website inside of an iframe, for instance. You can also enable these apps as a public URL, and if you do this, you will get a public link to that retool app, which you can go and embed somewhere else. Does that answer your question, Alexander? It will look like this preview version of the app. So it'll have this retool header, and then it'll show the actual app itself. Can we use custom domains? What's the latest on that, Devon? Yeah, so when you say custom domains, do you mean the ability to have your retool application mapped to a custom domain, i.e. like your domain.com goes directly to your retool app? Is that what you're looking for? If so, the answer to that is if you're using the on-premise version, you could, of course, map to a custom domain. If you're using the cloud version, then it would always just be your subdomain.retool.com. So if you're running on premise as part of the enterprise plan, then of course you can map it to your internal tool.company.com and have that be the domain that everyone in your organization goes to. Awesome, thank you. Yeah you can do that too, Tom. Okay, so a couple of final things and we'll start to wrap up. I mentioned earlier you can, say, create your own React components here. You can look up more details on this on our docs, which I'll just post a link in. But there's a number of ways you can customize the interface. Let me just drop this into the Discord and the chat and let's see, what else? So the other big thing is you can write JavaScript queries directly here. You can also import a different library. So say we'll already pull in lodash, moment, UUID and numbro. But if you needed to, if you had some, maybe custom library or some other helper library you're using, you can just drop in the CDN link in this library section. And you can also specify some global functions and variables across the app in JavaScript here. And this is also a place where you can go in and set some specific CSS if you want to do some custom styling. So I just want to point that out. And let's see, what else? The other big thing I wanted to point out is oftentimes as to your question earlier, I think that was Lucas maybe. When you are building these more complex apps you often end up with the case where you need some sort of modularity across these apps. And so say, for instance, we had some sort of container that we wanted to, let's just drag this down a little lower. Build some functionality into, so say maybe it's like your update product container. And maybe you have multiple apps across your organization that need to update products the same way. And so what you can do is convert this item into its own reusable module.

And you can do that by exporting the component to a module. And so let's just add some things to this so we can show you what that looks like. So we can drop in a text input here and say some sort of query button. And now if we wanted to say give this, turn this into a module that others could use across the whole company, we could do Export Component into Module. Say, my product update. And that will take some section of this app specifically and then create our own custom module out of it, which we can then map in different inputs and outputs from. And so this becomes a really big time saver as you build and scale more complex apps and need to customize some of those features as you're building more complex things like that. And finally, we also have some custom modules kind of isolate some specific functionality in ways that you're not constantly recoding it, it makes it easier to test and ensure that each of these individual sub sets of components is functioning well.

Great, any questions on that? Awesome. Otherwise, there's some templated apps that we could look at if there's any specific interest in those, otherwise, I'm thinking we kind of covered most of the basics here in terms of connecting to a database, connecting to APIs, how you can write in some JavaScript, import JS libraries, where to look to add your own React components and modules. So just open, I wanna open this up for any questions and feel free to drop off if you need to but if you have anything specific that you're thinking about building, I'm happy to kind of field any questions there and go from there.

While we're waiting on that, I'll just drop in a couple a couple examples. So in terms of writing JavaScript code within these input boxes, here's a simple example of using the math.round function to get a ratio for this progress indicator. Some other common examples of that sort of thing are changing the cell background color where you might set the background color input to look at specific values within your row and so if the row status is live for instance set the color to green and if it was paused then set it to whatever this yellow color is. And last couple things, we talked about deploying it locally. Check out the link that I think Devyn posted in the discord for that. You can also set up and get syncing so that all of your retool instance configuration, the apps themselves are backed up. And so from here on out I'll just take some questions. Feel free to email me if you have any questions ongoing. If you need anything I'm happy to try and get you in touch with the right people follow me on Twitter if you wanna stay in touch. And let's just open this up for questions. So Christoph asks, does retool support some kind of source version control and can you rollback easily to a previous version? We do support get syncing. Personally I haven't done that yet. Devyn do you wanna speak a little bit more to the technicals there? Yeah, there's two ways to do this. So there's a lightweight version that's just built directly into Retool. So when you build a Retool application you can click the three dots on the top right corner and then you can say, I wanna create a new release of this application. You create the release, you can push that release to production. And then from there, once that's in production, any edits you're making in the background won't show to your end users. So that's kind of the lightweight easy way to just have sort of a development and a production version of your Retool apps. Alternatively, what Chris was speaking to with get syncing is if you've deployed Retool on-premise you can connect to a Git repository. And then from there, you can run your applications through just a traditional dev to staging to production life cycle where your applications are able to move from one stage to another so that you're maintaining them as they go through. And along with this one added feature is also the ability to have protected applications specifically if you're using GitHub. And so with that, what you can do is you can say that this specific app is protected meaning that you as the owner are the only one that are able to actually make real edits to it. And then with that in mind, anyone else who wants to make edits they would create a new branch of your application. So when they click the edit button it will create a new branch, they can make their edits. And then when it's ready to be merged back the owner can then approve that, merge it and then have that be in the production version of the app. Thank you. Let us know if that answered your question, Alexander. And the first thing Devin mentioned is in the three dots here in the top right you can go to releases in history and revert back specific changes and see specific releases. Um, so can I build a rich, okay let's- Oh, that was Christoph that asked that. So Alexander asks, so can I build rich back-office with SSO back based on internal data only? I mean, I give a link and the user can log in with SSO of the company and do stuff. I believe that's an on-premise functionality that we offer, we offer SSO for on-prem, right, Devin? Yeah, if you're using Google SSO, you can use that with the cloud version. If you're using something like Okta or a custom SSO provider, then in that case you would deploy on-premise. Each of your users can then log in using that SSO, they can see their applications. I mean, then as mentioned, you could set different permission groups so that each person sees different apps. Or alternatively, you could just have them view all applications as well. Awesome, thank you. It is a very common way to use Retool, I think is to sum that up. Francisco asks, when you create a custom component, can that component receive custom properties and render some kind of text depending on those properties? I.e a modal to edit a product that receives the name and displays it on the dialogue title. Yes, you could pass inputs in, let's just look at that.

And so we can see that I have my module here and I'm not a digital modeler. And what do we call that product updates, I think. Update product module. So within this module, we have inputs and outputs. I think we can do this here. My product. And so this is input one that gets passed in and the default value is say my product. So let's go to add a text field here. Okay, and then this passes in the value for that input one. So then let's go back here and refresh this page. I need to actually update the private module. Let's just go to dynamic input. So I'm going to set a dynamic input for this, so I'm just going to reference the selected row name, for instance. And you can see that I'm referencing the name from this table. So if I click through this, I can see that the value that's passing into that module is dynamic based on the input value that I'm passing in. Does that answer your question, Francisco?

Awesome. Thank you. Alexius asks, could you show how to connect to S3, let's say get some JSON file from a bucket, a resource view ask for S3 file key. What is it? I haven't set up the S3 resource specifically yet. Let's look at it, though, and see. Also pop open the docs here. There's a button in the top right and see if that helps us. So you're asking, the resource view asks for an S3 file key. What is it? Are you talking about within the resource setup or in the, oh, OK, you already have this. OK. OK. So let's go back to the admin panel. And then I think you're talking about using the S3 uploader here. Oh, you're pulling down some data from S3. So new resource query. OK. You're trying to create a query, but maybe it's not. OK. So OK. So you're referencing this S3 file key. OK so you're referencing this S3 file key for downloading the file. So this file key, I think, is going to be the unique ID for that specific file within S3. Which I'm assuming you would do something like, you can see in this example, they do list files. So when you list those files from the S3 bucket, it's probably going to return back some unique identifier for each of those files. And then you would pass that in to download the specific file itself. Does that answer your question, Alexius?

I need to dive into it. OK, yeah. We'll dive into it. And then Ping us an intercom. And if you run into any trouble, we can get back to you directly. You can also go to community.retool.com. And there's tons of people posting on here every week about specific questions they have for support or specific things. So there might be an answer on here already. Alexander asks, are we hiring? We are hiring across lots of different teams. I think you can find that at careers.retool.

Let's just see, retail.com, slash, careers. So check that out if you're interested. We're always looking for great people.

Alexander asks, do you have any business examples integrated to the tool, like Uber? Yeah, on our website, you can find a bunch of different use cases. And specifically across some you might help to just dive into some of these. Specifically like how Brex uses Retool or Progressive or Plaid or RAMP, for instance. So you can click into these different use case areas and find different examples. You can also find a whole bunch of talks on our YouTube channel by different customers of ours talking through how they use Retool. So if you go to the The Lightning Demos playlist, you can see there's a bunch of talks by various people, hotel groups, On Deck, Odd Box, Coursera, Brex.

I'm going to call it on this. I really appreciate everyone's time. If you want to check this out, it's retool.com, obviously. And you have my email. You have Devon's.