A free Retool.com trial account
1. Introduction to Building Internal Tools and 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.
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.
2. Introduction to Retool
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.
3. Building Apps and Customizing Components
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.
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.
4. CSV File Upload and Data Manipulation
I uploaded a CSV file to the front-end, which allows me to view and manipulate the data within it. I can selectively insert the data into a database or perform batch processing.
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.
5. Components, CSV Upload, and Database Connection
Retool offers a variety of components for building internal tools, including filepickers, JSON editors, microphone input, multi-selects, barcode scanners, and more. You can upload CSV files, connect to an S3 resource, and deploy retool applications internally. The bottom panel allows you to build queries and REST API requests, and you can preview the results from your database queries.
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.
6. Running Retool On Premise and Editing Data
We saved the query to retrieve data from the Postgres database. We can now reference it to populate a table. A question was asked about running retool internally via Docker. There are two versions of retool: cloud and on premise. The on premise version allows you to connect to internal data sources without data leaving your VPC. You can differentiate environments by adding resources for dev and prod. You can manage dev and prod relationships in the UI by toggling between staging and production. You can also create release versions to make edits without affecting the end user until a new release is created. We have selected data from the products table and displayed it in a table. Now, let's make the columns editable and update the values in the table.
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.
7. Editing and Updating Records
I just edited a value in the table, and it turned green to indicate that it's ready to be saved. The changed cell can be referenced in the table. To pass the change back to the database, I can duplicate the query or create a new one. In GUI mode, I can configure the interface to update an existing record on the products database table. By referencing the name or ID, I can find the specific record. The update is triggered when the Save Changes button is selected.
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.
8. Updating Records and Automatic Table Refresh
After updating a record, the table automatically refreshes to display the changes. Manual refreshing is not required. Let me know if you have any questions.
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.
9. Adding Delete Functionality to the Table
We now have the ability to read and update specific items in the database table. Next, we want to add the ability to delete individual items. We'll do this by adding a button to the table and creating a query to delete the selected row. We'll reference the ID of the selected row and add a confirmation modal for deleting the row. After saving the changes, we can see the updated table.
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.
10. Deleting Rows and Creating New Items
And now let's collect the eighth ID row and click delete. We have an error with a foreign key violation. Let's link the action to the query and run an SQL query to delete the data. Next, let's create a new item by duplicating the query and inserting a record. We can add inputs in a modal or directly in the table. Peter suggests referencing the I variable within the selected row. Save and run the code to see if it works.
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.
11. Adding New Row to Table
We're setting up the table to add a new row directly within it. We enabled the setting for adding a new row and added editable fields for quantity, unit price, created at, updated at, and image URL. We inserted a record and referenced the new row values. After successfully adding the row, we updated the table and turned off the confirmation modal.
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.
12. Adding New Row and Addressing Questions
We've added a new row to the database table, bringing us three-quarters of the way towards CRUD-apps. Let's address any questions on working with databases and taking action on items within them.
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.
13. Connecting to API and Building Interface
There are different ways databases deploy and detect websites. Let's connect to data from an API, specifically SpaceX's GraphQL endpoint. We'll retrieve information on 10 launches, including mission names and launch sites. This will help us build an interface.
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.
14. Using the Poki API and Adding Data to an Endpoint
Let's use the Poki API to get Pokemon data and display it in a table. We can also set the table to compact mode for more information. Next, we'll explore adding data to an endpoint using the retool API generator. We'll create a custom dataset and generate a REST API endpoint. We can then reference this endpoint within our app.
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.
15. Adding API and Deleting Resources
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.
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.
16. Building Groups, Permissions, and Customization
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.
17. Exporting Components and Custom Modules
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.
18. Module Setup and S3 Connection
I have my module here with inputs and outputs. The value that's passing into the module is dynamic based on the input value. For connecting to S3 and downloading a file, you need to reference the unique ID of the file. If you have any trouble, reach out to us on intercom or visit the community forum. We are currently hiring across different teams. Check out careers.retool for more information.
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.
19. Job Opportunities and Customer Examples
Check out retool.com/careers for job opportunities. We have various business examples on our website, including how Brex, Progressive, Plaid, and RAMP use Retool. You can also watch customer talks on our YouTube channel and find more information on retool.com.
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.
Check out more articles and videos
We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career
Widgets are custom, interactive objects you place in a Figma or Figjam file to extend functionality and make everything a bit more fun. They are written in a declarative style similar to React components, which gets translated to become a node on the canvas. So can you go the other way, from canvas to code? Yes! We’ll discuss how we used the public Figma plugin API to generate widget code from a design file, and make a working widget together using this.