Description Transcript
Join our Retool Build Along session to see how you can build tools to help Operations teams independently access data quickly and securely without the pain of writing custom queries or ETLing data to spreadsheets.
0:00 everybody for joining. We are going to 0:01 go ahead and get started here. So, uh, 0:03 welcome to our build better operations 0:05 build. We're going to spend some time 0:07 today, uh, talking about how to take 0:09 data that you might have trapped in 0:10 spreadsheets, uh, and use retool to help 0:13 your operations team be faster and more 0:14 efficient. Uh, I'm Kenan. I'm a 0:16 technical product marketing manager at 0:18 Retool. And I want to welcome you all to 0:20 our event. We had a ton of registrations 0:22 for today. So, thanks everybody for 0:23 registering and taking time out of your 0:25 day to join us here. Uh, like I 0:28 mentioned before, we have Christina and 0:29 Nate from Retool also running the room 0:31 and they'll you'll see them in the chat 0:33 uh answering questions from folks, but 0:35 we will have plenty of time for Q&A at 0:37 the end. So, if you do have questions u 0:39 or anything specifically that you're 0:40 hoping that we cover, uh please don't 0:42 hesitate to drop those in the chat and 0:44 either Nate or Christina will get to 0:45 those questions or we will get to them 0:47 at the end. Um so, yeah, over there on 0:50 the right hand sidebar is where we have 0:51 our chat and our Q&A section. So, feel 0:53 free to use those. Um and uh we'll just 0:56 get going here. Let's get started. So 0:58 what's the problem that we're going to 1:00 be talking about today? Well, operations 1:01 teams need data. They oftentimes have a 1:04 lot of it uh and they need a way to work 1:06 with it. And so this data is a lot of 1:08 times stored in a central database. um 1:11 where you know operations folks need to 1:14 ask engineering teams to run queries for 1:17 them or get specific slices of data that 1:19 they need and engineering team and the 1:21 security folks don't want to just give 1:23 read access to the entire database and 1:25 so what this ends up looking like is 1:26 oftent times uh requests come into 1:28 engineering for queries queries get run 1:31 turn into spreadsheets and then those 1:33 spreadsheets are kind of what's floating 1:34 around um you know things like those 1:37 spreadsheets being out of sync with 1:38 production data or you know you that a 1:41 spreadsheet that gets passed around and 1:42 modified and you end up with file names 1:44 like data final final you know things 1:46 like that. So we want to avoid all of 1:49 that and and look at how we can easily 1:51 kind of take that spreadsheet data turn 1:53 it back into an application that's 1:55 actually useful connect it to real live 1:57 functional data uh and how to kind of 1:59 manage that that build from beginning to 2:01 end. So while spreadsheets are 2:03 incredibly useful, they're not always 2:04 the best way to solve this kind of data 2:06 problem that operations teams have. And 2:09 so that's where retool comes in. Uh like 2:11 you can see here, retool is the fastest 2:13 way to build internal software. And 2:15 we're going to take a look at how that 2:17 happens uh in a few different ways. 2:19 Number one, we're going to look at 2:21 resources and basically where data comes 2:22 from when you're building with retool, 2:24 whether that's a spreadsheet or a 2:25 database you already own. Um the next 2:28 thing we're going to look at is kind of 2:29 the app builder experience. basically 2:30 the UI that we put on top of that data. 2:32 Uh and we're going to look at kind of 2:34 the workflow and the the developer 2:35 experience that ties all of those pieces 2:37 together. So the process of connecting 2:39 resources into your app. Uh looking at 2:41 those different slices of data in 2:43 different ways. Um and this is what 2:45 retool specifically helps with. 2:47 So the first thing when we start on any 2:49 project like this is to think about 2:50 where is our data right? So in retool 2:53 the concept data is represented by what 2:55 we call resources. Resources are 2:57 essentially any data source whether 2:59 that's an API connecting to a database 3:02 S3 bucket or things like retool database 3:04 and retool storage which we'll take a 3:06 look at a little bit later. Um basically 3:08 connecting your own data into retool is 3:10 what really makes it the most useful. We 3:12 have a ton of components and cool UI 3:14 things that you can build with. Uh but 3:16 where internal apps and tools get really 3:18 powerful is when you can connect your 3:19 own data. So if you already have a 3:22 Postgress database, a MySQL database, 3:24 anything like that, um you can very 3:26 easily connect those as resources uh 3:29 into re in retool. But where we see a 3:31 lot of folks get stuck is they want to 3:33 build an internal app. They have a 3:34 spreadsheet uh but they don't aren't 3:36 able to kind of go through the process 3:38 of you know getting that database 3:39 connection right away. Um and so that's 3:41 where we're going to start today. We are 3:43 going to show how retool can still be 3:44 useful um if you're starting with a 3:46 spreadsheet and it can be useful to kind 3:48 of build up that UI figure out what sort 3:50 of app you want to build and then once 3:52 you've got that app functional working 3:54 then you can actually without very many 3:57 changes hook that data up to your real 3:59 live database. So to support kind of 4:01 this spreadsheet to app model uh retool 4:05 offers a tool called retool db which is 4:07 essentially uh it's a managed postgress 4:09 database and you can create tables and 4:12 fields and modify the data like you 4:14 would with a spreadsheet. So let's start 4:16 there. We're going to go into our retal 4:19 DB instance and basically for the 4:22 purpose of this presentation uh we're 4:24 going to be looking at what an 4:25 operations team for a software company 4:27 might deal with where we have uh you 4:29 know various sales data and some 4:31 different affiliates who are you know 4:33 promoting our different products um with 4:36 their unique promo codes. We want to be 4:37 able to kind of slice that data up and 4:39 use it in a couple different ways. So 4:42 right now we have two uh CSV files that 4:45 we're going to import. So you can see if 4:46 you go up to retool DB here, you can 4:49 import CSV. We're going to import it 4:50 into a new table. And I'm just going to 4:53 grab our sales data. And you can see 4:56 that when we drop our CSV in here, it 4:58 automatically detects all of our 4:59 columns. It suggests field types and all 5:02 of these things. So really with very 5:04 little configuration, I can create a 5:07 table inside of REL DB with my CSV data. 5:11 So you see here that it's all imported. 5:13 And now that this is in Retool DB, if 5:15 you needed to kind of make any 5:16 modifications or adjustments, you could 5:18 do that in an interface that looks very 5:20 similar to a spreadsheet. So, it's an 5:22 interface you're definitely already 5:23 familiar with. Um, but that data is now 5:26 in here. So, we're going to do that one 5:27 more time for our kind of affiliate 5:30 promotional data. 5:33 And you can see again, it created the 5:35 fields that I needed from my CSV. And we 5:39 can just go ahead and create table. So 5:41 now we have two tables essentially our 5:43 sales data with information about you 5:45 know who's buying which of our our plans 5:47 and then we also have our table of 5:49 affiliates with a little bit more 5:50 information about them uh and their 5:52 particular promo code which will come in 5:54 handy a bit later. So now that our data 5:57 is inside of retool we actually need to 5:59 do something with it and build a UI for 6:01 it. So that's where our app builder 6:02 comes in. 6:04 This is retools app builder. So you can 6:06 see right now we're kind of starting out 6:07 with a blank canvas, but we do have all 6:10 of Retool's components over here that we 6:12 can add. So these are if you've ever 6:14 used a drag and drop kind of editor 6:16 before, we can start to do that. But 6:18 we're also going to take a look at how 6:19 this can be a whole lot more powerful 6:21 than just drag and drop. So we're going 6:23 to give some idea of what we're building 6:25 here. 6:26 Just a little title element, sales 6:28 dashboard. These text components do 6:30 support markdown. So, you can uh use any 6:32 sort of markdown styling you're familiar 6:34 with here, or you can just make it plain 6:36 text. 6:38 Next, we're going to use one of RET's 6:39 more powerful components, which is 6:41 called our table component. So, if we 6:43 drag and drop this table component here, 6:45 we can see that it gets populated with a 6:47 bunch of test data. Um, which is useful 6:50 to kind of see how the table component 6:52 works and how it's going to look in our 6:53 layout. But what's really powerful, like 6:55 we said, is when we connect our own data 6:56 to it. So, we can click on this badge 6:58 right here, connect your data. And this 7:01 is when we can look at creating a new 7:03 query to pull in our retail data. 7:08 So we're going to specify that we want 7:09 to use the retail database resource 7:13 and then we can write our query in here. 7:15 Let's just continue so we get this in a 7:17 full state. So now that we're quering 7:19 from retail DB, we can just run a select 7:22 star on our table, which if we bounce 7:26 back over here, we called it BA sales. 7:32 And if we save and run, you see that it 7:34 gives us a preview of our data here 7:39 and then it pulls the data into that 7:41 table. So it still has our kind of test 7:44 columns in here. here. So what we want 7:45 to do is basically just regenerate the 7:47 column names from the data that we 7:48 actually have so it matches our data and 7:51 just like that we have a table that is 7:54 pulling from uh retal DB. So we can 7:57 modify this a little bit. We don't 7:59 necessarily care about things like 8:01 displaying the ID even though that was 8:03 present in the database. So we can click 8:06 on the ID and set hidden to true. And we 8:10 can also do things like if we really 8:12 want the plan to be the first column 8:14 that people see, we can drag it. And 8:16 basically this table is entirely 8:18 modifiable, you can double click on 8:20 column headings um to adjust the spacing 8:24 of them just like you would in Excel or 8:26 any other spreadsheet tool. Uh let's say 8:28 we want, you know, our organization to 8:31 be next to our customer name. So we can 8:33 do a lot of tweaking in here to make the 8:36 data look the way we want it. Uh, and 8:38 because this is a fully interactive 8:40 table, after we've gotten it set up, we 8:43 can do things like sorting. So, if we 8:45 want to see like, you know, the most 8:46 recent purchase in here, we can do that. 8:49 Um, we also have the ability to use 8:52 these buttons down here, which you may 8:54 be familiar with these icons. This first 8:55 one is filter. So, if we wanted to, for 8:57 example, show only, you know, free plan 8:59 users, that would be a way to do that. 9:01 And then this table gets filtered down 9:03 to only uh free plan users. 9:12 So you can see this has similar elements 9:14 to what you might build in a 9:15 spreadsheet, but it's already a lot more 9:17 powerful. In addition to this kind of 9:18 filtering functionality, uh you can also 9:21 at any point download an actual file 9:23 version of this. So even though your 9:26 data is in retool and it's a little bit 9:27 more powerful in a spreadsheet, if you 9:28 do need to export it out to a 9:30 spreadsheet, uh you can do that very 9:32 easily from within this interface that 9:33 we're building. 9:36 Cool. So, let's make this a little bit 9:39 uh more useful. So, we have all of our 9:41 data here now. Um but one thing we can 9:44 also do is if we're saying, you know, we 9:46 have enterprise plan and free plan. 9:48 Let's say that something our operations 9:49 team is dealing with is the launch of a 9:51 new plan called the business plan. So, 9:53 you can see that we have a plan that is 9:57 business in here. We have some customers 9:59 on it, but we want to look and be able 10:00 to very quickly see like what the 10:02 adoption is looking like on this. uh if 10:04 people are using it, if people are 10:06 signing up for it, um that sort of 10:08 thing. So what we can do is we can use 10:11 another one of RTO's components, the 10:13 chart component. 10:15 And if we pull that in here, it retool 10:17 will do its best to guess what sort of 10:19 data we want. Um which based on kind of 10:22 the queries we've set up and all that 10:23 stuff, but this is does not look like 10:26 kind of the data that we want. So what 10:28 we're going to do is we're going to say 10:30 let's look at a pie chart instead. Um, 10:32 and instead of the uh labels here for 10:36 the date, we're going to do uh plan. So, 10:39 just in a couple clicks, this gives us a 10:41 very nice visual breakdown of uh how our 10:45 different plans are are set up and 10:47 distributed across our customers. So, we 10:48 can add a title here to say that as 10:51 well. 10:53 But you can see that enterprise, you 10:54 know, is about 40% of our customers here 10:56 in this example. business is a little 10:58 bit less with 33 and our free plan is 11:01 only 27% of users and we just kind of 11:04 took the defaults here. But for example, 11:05 if we wanted to really call out the 11:07 business plan um you know we could go in 11:09 here and say no we really want that to 11:11 be orange you can change all these 11:12 colors and um use any of these elements 11:15 of the UI that are helpful uh to kind of 11:17 customize this chart to make it useful. 11:20 The other thing that you can do is if 11:21 you really need to go further um the 11:24 graphing and charting underneath is 11:26 using plotly.js JS and so uh if you want 11:29 to write the JSON yourself or get it 11:31 generated by some other tool uh you can 11:33 just copy paste that into here uh and 11:35 that JSON will be what's used to 11:38 generate your chart. So the UI is a 11:40 really quick way to get started. If you 11:41 need even more customability you can 11:42 access all the features of plotly uh 11:44 using the plot JSON. 11:46 Great. So now we have a table that is 11:48 gen has been generated from our 11:49 spreadsheet. We can filter it, we can 11:51 download it, and we also have a 11:53 breakdown of exactly who's using uh 11:56 which which plan. So we see that, you 11:58 know, the usage is actually pretty even. 11:59 Uh it looks like our our free plan is is 12:02 the least, but um you know, we can 12:04 easily see over time, you know, as more 12:06 data comes in how this starts to change, 12:08 which uh is is pretty helpful. And so 12:12 already this is becoming a pretty useful 12:14 dashboard. um especially when you know 12:17 taking into account that multiple people 12:19 can access this. You can share this with 12:20 your team uh and everybody can kind of 12:23 centralize on this sort of view. So 12:25 you're not worrying about you know 12:27 passing different spreadsheet files back 12:28 and forth or you know wondering if 12:31 someone has the latest updated version 12:32 of the data once all this data is in 12:35 retool and this this dashboard is you 12:36 know updated in essentially real time as 12:38 new data comes in uh it becomes even 12:40 more useful. 12:43 So, let's start to take a look at some 12:44 of this affiliate data, right? We have 12:46 all this these sales here that some of 12:48 them have promotional codes associated 12:49 with them, etc. Uh, and one of the 12:52 really powerful things that you can do 12:53 in Retool that you can't necessarily do 12:55 as easily in a spreadsheet, is respond 12:57 to events that happen. So, we do these 13:00 through something called event handlers 13:01 in Retool. And we're going to take a 13:02 look at exactly how that works. What we 13:04 want to do here is when we click on a 13:07 particular uh transaction row in our 13:10 table, we want some information about 13:12 this affiliate which we can pull from uh 13:14 the other table that we imported to 13:16 retal DB. So let's do that here. We're 13:19 just going to put a text element here 13:22 and we're going to call this affiliate 13:24 info. 13:29 Uh let's make it a little bit bigger so 13:31 we can see what's going on here. 13:34 Cool. 13:36 And then we're going to use one of 13:38 Retool's components that's called key 13:40 value. Basically, this is useful for 13:42 displaying kind of a heading and then a 13:43 piece of data um and then another 13:46 heading and another piece of data. So, 13:47 you can see again it's populated with 13:48 some sample content. We're going to 13:50 clear that out for now and we're going 13:52 to write a new query. 13:55 So, this query here we're going to call 13:57 get sales data. That's the one we 13:58 already have written. But we need a new 14:00 query now for getting the selected 14:04 affiliate. 14:07 And what's cool in retool is that even 14:09 though there is a ton of capability 14:11 that's accessible just by dragging and 14:13 dropping UI using the pre-built 14:14 components, you can also basically write 14:16 code anywhere and extend these 14:18 components in such a way um that they 14:21 work for you and not you know not 14:23 something you're having to fight 14:24 against. So in this case what we want to 14:26 do is we want to run a database query to 14:28 grab uh data from the affiliates table 14:31 which is here and it shows more 14:33 information about the different 14:34 affiliates. Uh but we only want to use 14:36 the affiliate that is in the selected 14:39 row. So what we can do is we can say 14:42 select star from uh BA promo which it 14:46 autofills that as a table name because 14:47 we know that's there. But again getting 14:50 all of the data from the table is not 14:52 exactly what we want. So what we can say 14:55 is where and then affiliate 14:59 promo code equals and this is where we 15:03 can pull in 15:04 anywhere in when these double curly 15:06 brackets is something else from some 15:07 other retail component or something in 15:10 the UI builder. So what we can do is we 15:12 can say table one dot selected row 15:17 and then you can see it's kind of 15:18 showing us what our selection is here. 15:21 And so we want to ask it for the 15:24 promotional code. So basically grab the 15:26 affiliate from the promo table where the 15:29 promo code is whatever's in this column 15:31 here. 15:33 So if we save and run this query, you 15:35 can see nothing is is there because 15:37 there's no promo code. But when we pick 15:39 a row that has a promo code, you see 15:41 that, okay, now we're actually pulling 15:43 in our affiliate data, which is pretty 15:44 cool. So, what we can do then is go back 15:46 to our key value and say we really want 15:50 the data from our get selected affiliate 15:52 query to be populated into here. And so, 15:55 you can see that now it's pulling this 15:57 affiliate data. And if we click 16:01 another row with an affiliate, it 16:03 actually reruns. And so you can see that 16:06 this query right here is set to run when 16:08 inputs change. Which means retool 16:09 automatically knows to watch this table 16:12 one selected row. And when a different 16:14 row is selected, it automatically reruns 16:16 the query and automatically populates 16:18 this new component. There's no concept 16:20 of having to manually manage state or 16:22 having to manually kind of rerun or 16:24 reflow things. Um because retool can 16:27 handle that all for you. You can set up 16:29 relatively complicated dependencies 16:30 actually between components and queries 16:32 and those things will automatically run. 16:34 And again this component we we wrote 16:36 some code to get this populated but now 16:38 we can go back to just like we did 16:40 before. If we wanted to, for example, 16:42 you know, hide this ID column, we could 16:44 do that. 16:46 Reorder these however we wanted to. Um 16:48 and and all this is is kind of possible 16:50 inside the UI builder now, but we've 16:53 written some code to to get that going. 16:55 So another thing that is useful for this 16:58 kind of logic is like cleaning up when 17:00 for example if we don't have a component 17:02 selected obviously we won't have any 17:05 data in the key value 17:07 but we probably don't want this uh text 17:11 to display either. So this hidden 17:13 attribute which we've used a couple 17:14 times already today in addition to just 17:16 being true or false you can use our 17:18 double curly brackets again to have a 17:22 condition that's based on a variable. So 17:24 for example we could say you know table 17:26 one dot selected row 17:31 dot id right so if there is an ID we 17:34 want this to show we actually want the 17:35 inverse of that so if there's no ID we 17:38 want it to be uh hidden. 17:48 So basically you can see that now it is 17:50 conditional the logic is conditional on 17:52 whether uh you know the currently 17:56 selected row has a promotional code 17:58 which is nice because that just lets our 18:00 interface be a little bit cleaner um and 18:02 only 18:03 display when that information is 18:05 relevant. So the hidden attribute is not 18:08 just the true or false. any any variable 18:10 or any retail attribute that evaluates 18:12 to a a true or false kind of boolean as 18:14 far as JavaScript is concerned can power 18:17 this hidden attribute which makes it 18:18 really powerful. 18:22 So now we've got kind of a basic readout 18:24 of our affiliate info. Um but really 18:26 what would be more interesting here is 18:28 to if we could get you know sort of a 18:30 leaderboard of okay what who are the top 18:32 affiliates? how are they uh you know 18:34 driving 18:36 purchases of our different plans. So 18:39 let's take a look at that. Um 18:42 let's get rid of this affiliate info 18:44 stuff for now because we want to uh 18:47 really be able to show a bunch of our 18:49 affiliate data here. 18:52 So again, now that all these components 18:53 are in place and they're actually 18:54 pulling data, you can spend kind of as 18:56 much time as you'd like reordering 18:58 things and kind of getting the layout 18:59 the way you want it to. Um, and it all 19:03 just kind of works and refflows. So, 19:04 we'll just adjust this a little bit 19:06 here. We will do our reverse 19:08 chronological search. Cool. And so, we 19:11 are ready to put another table in here. 19:16 So, what we want to do here is we want 19:19 to build uh like an affiliate 19:21 leaderboard. Basically, rank the 19:23 affiliates based on u you know how many 19:26 sales each of these kind of individual 19:28 promotional codes is driving. And so 19:31 what we can do is we can write a query 19:34 that does that. We go back over here to 19:36 our query editor. We can add a new 19:39 query, which again we wanted to pull 19:41 from retold DB. 19:45 And this is a slightly more complex 19:47 query than the one we've written before. 19:48 So I'm just going to copy paste this in 19:50 here. We want to make sure that our 19:53 table names line up. 19:57 And if we save and run, we can see that 19:59 now we have our affiliates ranked by how 20:04 many times their particular promotional 20:06 code uh was used. So we're going to call 20:10 this uh query rank affiliates. 20:15 And we can use our new table here 20:21 to display the results of this query. 20:26 Right? So we have our the promotional 20:28 code, the affiliate name, and then the 20:29 usage count, right? So again, this is 20:32 the same table component we've used 20:34 before. So if we want to, you know, sort 20:36 this the other way and see, you know, 20:37 which of the affiliates are, you know, 20:39 referring less less purchases to us than 20:42 we would expect, we can rank it that 20:44 way, too. But again, this is kind of 20:46 just like these two different or two 20:48 different slices of looking at the same 20:49 data. Um, and we can do all of that 20:52 inside of retool. Look at data in kind 20:54 of any way we want. And again, if this 20:56 is useful to certain people on the team, 20:58 uh they can download this as a CSV or 21:00 filter by, you know, only affiliates 21:02 that they that they care about and 21:04 things like that. Um so you could do 21:06 something like, you know, only filter by 21:07 where usage count is 21:10 greater than three and that trims down 21:12 your table pretty significantly. Um, but 21:15 this is just again another way you can 21:16 kind of slice and dice this data um to 21:20 make it useful to people who are trying 21:21 to get actual information out of your 21:23 data and insights out of your data as 21:25 opposed to spending all day scrolling 21:27 through and staring at CSVs. 21:31 So, there's a lot more that you could do 21:32 here now that you have this um this 21:35 dashboard built out. Like again, like I 21:36 mentioned, you can really one of the 21:38 most powerful things you can do is 21:39 invite your other team members. So that 21:42 kind of keeps everyone on the same page 21:43 in terms of knowing what data to look 21:45 at, where the data is, and where it 21:46 lives. Um, and now again that you have 21:49 this UI built, uh, this is the time 21:52 where a lot of times we see people use a 21:54 tool like retual DB to get going very 21:56 quickly and figure out what kind of tool 21:59 they need to build. But very easily you 22:01 could take these table and these queries 22:03 and instead of querying retal DB, uh, 22:06 you could hook it up to your own, you 22:07 know, MySQL or Postgress instance. Um, 22:10 and that would make these tables even 22:12 more powerful because it'd be pulling in 22:13 like real-time sales data and um, 22:16 refreshing kind of as soon as there was 22:18 new data available. And so you can build 22:21 these kind of relatively complex like 22:23 real-time dashboards um, after you've 22:25 gotten going and figured out what you 22:27 need to build and how you want it to 22:28 look. And so, um, there's a lot more 22:30 that that you can do here, but I hope 22:32 this has been a little bit helpful just 22:34 to see kind of how you can very quickly 22:35 get going, uh, with spreadsheets, use 22:38 retools, built-in components to make 22:40 that data a little bit more useful and 22:41 helpful, um, and display it and and 22:44 slice it up in a few different ways. So, 22:47 um, again, we want to leave some time 22:50 for Q&A, so I think we're going to move 22:52 into that now. But, um, yeah, if you 22:54 have any kind of questions that we 22:55 didn't cover, please leave them in the 22:57 chat. Um, and I I hope this is helpful. 22:59 So, we will jump into Q&A. 23:04 Let's see. So, 23:07 Matthew asked, "Any tips on this use 23:08 case? Should I create one single app for 23:11 multiple clients or should I create a 23:12 separate app for each? Each client has 23:14 the same data connectors. The queries 23:16 are the same and I just need to be able 23:19 to dynamically change the resource based 23:21 on which client logged in." Yes, that's 23:23 a good question. So there's a couple 23:24 different ways you can think about to 23:26 architect that depending on honestly a 23:28 lot of it depends on your preference. So 23:30 if it's easier for you to create 23:32 different apps for different clients 23:34 just to keep things separate. Uh retool 23:37 does offer you know folders and things 23:39 outside of the app builder interface to 23:41 keep things organized for you. Um, and 23:43 also you can um take queries that you've 23:47 written and extract them to retools 23:50 query library which basically gives you 23:51 a a common set of queries to pull from. 23:54 So you don't have to reinvent the wheel 23:55 for every app. So if that's kind of how 23:57 your brain works and and what you want 23:58 to how you want to break things up. Um 24:01 you won't necessarily have to kind of 24:03 reinvent the wheel with every one of 24:04 those apps. You'll still be able to have 24:06 the concept of shared logic. Um you can 24:09 basically create groups of components 24:11 known as modules. uh in retool and reuse 24:13 those across apps. So there's definitely 24:16 an element of that of the shared logic 24:18 that you can uh reuse there and that can 24:20 keep it a little bit simpler um if 24:22 resources are changing kind of per per 24:25 application. 24:29 Uh Michael asks, can you import CSV 24:31 files directly from an S3 bucket? uh at 24:34 the moment I don't believe so but if you 24:37 do have kind of ETL needs like that 24:40 where you want to like take data in from 24:42 some other source and transform it a bit 24:44 before uh it gets into retool uh retool 24:48 does have a solution called workflows 24:50 for that which basically lets you um 24:54 do whatever you need to with uh you know 24:57 visual kind of steps in here. So um you 25:00 know taking data from S3 doing any sort 25:03 of transformations that are necessary 25:04 and then importing it uh into a retal DB 25:08 like we showed here uh would be a great 25:10 way to use uh workflows if you do need 25:12 to pull from S3 or some other data 25:14 source like that. 25:17 Can you speak to uh Benjamin asked can 25:19 you speak to the merits of doing the 25:20 approach you've overviewed here versus 25:22 using something like Google Sheets to be 25:24 able to also have real-time data 25:25 available within a spreadsheet tool. Uh 25:28 yeah, Google Sheets is definitely 25:29 another option for doing something like 25:30 this. Um especially if you know what you 25:33 need is basically a chart and uh some 25:36 data next to it. Um I think that you 25:39 know where retool becomes a much better 25:42 option than Google Sheets is talking 25:43 about some of the things like going that 25:44 we're talking about going beyond uh this 25:47 pretty basic example. So, you know, if 25:49 you want to, you know, push this data 25:51 out to Slack or take in data from more 25:54 than just a database, if you want to 25:55 start incorporating things like data 25:57 from Salesforce so that you could, you 25:58 know, know who this organization is, how 26:01 much, you know, they've talked to the 26:02 sales team, etc., um, incorporating more 26:05 of those data sources and things like 26:07 that, um, is something that Retool is 26:08 really great at and does out of the box, 26:10 whereas you would have a much more 26:12 difficult time doing something like 26:13 that, uh, in Google Sheets. 26:16 Cool. 26:18 Uh, can ask, could tools be created in a 26:21 B2B multi-tenant setting where 26:23 individual users tied different tenants 26:25 could be shown data from their own 26:27 linked data sources? Yeah, so um this is 26:30 something that is actually uh going to 26:32 we're going to be pushing out very soon. 26:35 Um we're launching the concept of of 26:37 retool portals which basically gives you 26:39 that sort of multi-tenant user specific 26:41 experience. Um but already in retool you 26:44 can use things like um that conditional 26:47 logic inside of curly braces that we 26:49 talked about earlier um to kind of 26:51 personalize this view for specific folks 26:54 uh based on you know who the users are 26:55 that are logged in. Um so if you're 26:58 talking about you know specific users 27:00 that are internal to your company um 27:02 being able to view data that's specific 27:04 to them uh you can definitely already do 27:06 that in retail. if you're talking about 27:08 wanting to, you know, invite external 27:10 users and let them see data. Um, that's 27:13 something that's that we're going to be 27:14 able to talk about more very soon. 27:18 Pier asks, "What will be the difference 27:19 between using components, no code 27:21 filters, and updating our query with the 27:23 proper wear argument?" Um, it's a good 27:27 question and I don't know that I'll be 27:28 able to address all of that, but I hope 27:30 to address a lot of it. So the table 27:31 component like as it drops in um is kind 27:34 of gives you the default query and by 27:36 default it shows everything that you've 27:38 written in the query here. So if you 27:40 have like a particular slice of the data 27:44 that you want to show by default when 27:46 this component loads that's probably 27:47 when you would want to write it into the 27:49 query. Um, if you don't really know what 27:52 people are going to want to see and you 27:53 want to just write the query to be a 27:55 little bit more general, but let people 27:57 see what data is kind of useful to them, 28:00 that's where using the filters, 28:02 especially for people who aren't 28:03 familiar with writing SQL, um, is really 28:05 helpful. Like, for example, you could 28:07 put, you know, plan includes free, like 28:10 we talked about. You could write this 28:11 into the query, um, but that would kind 28:13 of limit the output of this table to 28:15 only the free plan, which if that's what 28:16 you wanted, that would be fine. Uh, but 28:18 if you want to make it a little more 28:19 flexible and let people do the filtering 28:20 themselves, that's where uh, using the 28:22 filtering comes in. 28:26 Stephanie asked, can you upload a CSV 28:28 file via the upload button, format the 28:30 CSV via the table component, and send it 28:32 automatically to update the retool 28:34 database? Um, so I think what you're 28:36 talking about is using kind of our, uh, 28:39 our import CSV like we did here, um, and 28:42 format it via the table component and 28:44 then send it back to retail database. if 28:46 you need to format the data or change 28:49 the data once you've imported it. Uh 28:51 this kind of retool retool DB interface 28:53 is where you're going to want to do 28:54 that. Um I'm not quite sure what you're 28:57 talking about for through formatting it 29:00 via the table component, but um you can 29:02 edit and do any sort of data updates you 29:05 need to here after you import it. Uh and 29:07 then there's no separate sync step like 29:09 as soon as you make a change here and 29:10 hit save uh it's updated in retrieb 29:13 which would then uh reflect here any 29:15 components that were using that 29:16 underlying data automatically. 29:21 Matthew asked does the hidden feature 29:22 improve the app performance in any way? 29:25 Um I think it would really depend on 29:27 like how many components you have on the 29:29 page as to whether you would notice it. 29:31 Um but yeah, it does, you know, remove 29:33 it from the the render flow of the of 29:36 the app itself. And so, um in addition 29:39 to, you know, just visually cleaning it 29:41 up, uh there would probably be some 29:42 performance improvement, but uh it would 29:44 be difficult to say like how many you 29:46 need a lot of components on the page to 29:48 to notice that probably. Um the 29:50 engineering team behind Retool spends a 29:52 lot of time working on kind of 29:53 performance improvements for all 29:55 components across the board. So um you 29:58 know I would be surprised if if you 29:59 would notice the performance improvement 30:01 from hiding one component but it it 30:03 definitely helps to to have it hidden. 30:07 Uh would the same flow follow if we were 30:09 to use air table as a database? Yeah. So 30:11 basically um the idea behind using a 30:13 database in retool and displaying it in 30:15 a table component. The idea of retool 30:17 resources is that you can use 30:19 essentially any API database or any 30:22 other backend that you might have uh to 30:25 populate these sorts of dashboards. Um 30:28 so you know again you would just need to 30:29 slightly modify the query um to pull 30:32 from air tableable as opposed to retool 30:34 database. Uh retool as we mentioned here 30:37 with resources we have a lot of 30:39 connections and integrations to 30:40 resources already. Um, but if there's 30:43 one that you need to use that's not 30:45 supported as long as it has uh an API or 30:48 some other way that you can connect to 30:49 it, um, you can you can do that in 30:51 retool. You can just hit it as a rest 30:53 API or as a SOAP API or something 30:55 similar that it would be a very similar 30:57 flow. Um, you would just need to update 31:01 your queries to connect to air table 31:03 instead of uh pulling from ret. 31:07 Alternatively, if you wanted to do 31:09 something like with the the like retool 31:12 workflows piece, um you could write a 31:14 workflow that imported data from Air 31:16 Table and synced it into Reut DB every 31:18 every so often um if you didn't want to 31:20 connect to Air Table directly. That was 31:22 that's an option you could have as well. 31:26 Colleen asks, "If you have sheets that 31:28 are essentially relational, can retool 31:30 automatically set up those relationships 31:31 or do you need to handle setting IDs 31:32 prior to importing the CSVs?" Good 31:35 question. Um, yeah, the retool does its 31:37 best to guess at kind of how your data 31:39 is set up. So, like like you saw when we 31:42 imported uh the CSVs here, it knew like 31:45 what kind of data types things were. It 31:47 kind of looked at the CSVs that way. Um, 31:49 as far as creating relations dynamically 31:52 between data that you've imported, um, I 31:55 don't believe we support that right now. 31:56 What I will say, something that might 31:58 interest you, um, is you'll notice that, 32:00 uh, when we were doing these queries 32:02 here, there's this little ask AI widget 32:04 down here. And the ask AI basically pops 32:07 up like, okay, you can ask it whatever 32:09 you want it to do. Um, and it is aware 32:12 of all your various data tables and 32:15 columns and the kind of the schema of 32:17 your data, how it looks. And so it can 32:19 help you create those uh, relations and 32:21 do things like, you know, our affiliate 32:23 table query. um it could look at okay we 32:26 have sales data and affiliate data and I 32:27 want to correlate them um and I actually 32:29 used it to help me uh write this 32:32 relatively complex query here. So that's 32:35 definitely something to look into um if 32:37 you need some help uh putting your 32:39 queries together and and all you have is 32:41 flat CSV data. Another another reason to 32:44 use something like retool or for just 32:45 using CSVs is that you know those 32:47 relationships are a little bit harder to 32:49 quantify sometimes if it's just a CSV 32:51 file or a set of CSV files. And so 32:53 getting it into something that's an 32:54 actual database um like Rachel DB is a 32:57 way to go. But yeah, definitely take a 32:58 look at that um that ask feature if you 33:01 need help kind of defining those 33:02 relationships. 33:07 Um yeah, Bison asks, "Is it more or less 33:09 difficult to use an API as a data source 33:11 instead of a database? Do you have any 33:12 recommendations for resources on how to 33:14 do this?" Um I think it just depends 33:16 like your comfort with making REST API 33:18 calls, whether there's already a retool 33:20 connector for it. um and just like what 33:23 you're actually trying to access. Um so 33:27 you know the obviously like if you're 33:29 comfortable writing SQL like using retal 33:32 DB is relatively straightforward. Um as 33:34 you saw kind of most of the output of 33:37 retail queries is usually some type of 33:39 array or object. So that's very similar 33:42 to what database uh sorry what APIs 33:45 return as well. So, as far as like the 33:48 components to um use a database response 33:51 versus an API response, there's not a 33:53 ton of difference. Um, one thing I will 33:55 notice is one thing I will say is that 33:57 if your API doesn't give you uh an array 34:00 similar to what the table component is 34:02 expecting, you can use this transform 34:04 results piece here where you can 34:07 actually write whatever sort of 34:09 transformations in JavaScript that you 34:10 want to. So in addition to what you get 34:13 back from your API call or database 34:15 query, you can transform those results 34:18 into whatever shape you need them to be 34:21 to show up in the in the component that 34:22 you rely on. So um it depends on a few 34:25 different things, notably like whether 34:27 there's a built-in retail connection for 34:28 it. Um how like what sort of quality of 34:32 data the API returns and things like 34:33 that. But um the idea is that uh it 34:36 should be a pretty seamless and and 34:38 similar experience no matter where 34:40 you're pulling. uh just because of how 34:41 you can write things in the query 34:43 interface. 34:47 Cool. Um John says, "How do you choose 34:49 which roles and users have the ability 34:51 to access this page?" Yeah, so that's a 34:53 good question. Um it's a little bit I 34:55 think outside of the scope of what we're 34:56 showing here, but basically u you know 34:58 retool has lots of different controls 35:00 and permissioning for um you know to 35:03 basically get as granular as you want 35:04 around who has access to certain apps, 35:07 who has access to run certain queries um 35:10 things like that. So it's definitely 35:11 something that you can configure um when 35:14 you once you have your app built out uh 35:17 and something that you know you can 35:19 build organizational rules and things 35:20 around as well so that you know the 35:22 people who need to see your information 35:24 can uh and people you don't want to have 35:26 access to it don't have that ability. 35:31 Oscar asks yeah what about data uploads 35:33 from retool other systems? Are there 35:34 built-in connectors? Yeah, so we we 35:35 covered this a little bit but there 35:36 definitely are. Um you can go to the the 35:39 retool docs on resources to see uh what 35:42 we have here in terms of resources that 35:44 you can connect to. Uh but there are 35:47 yeah a ton of different integrations 35:48 that we have out of the box. And again 35:51 uh if an integration you need is not 35:53 something we currently support. Um as 35:55 long as that tool has an API you can 35:57 make a REST API or a SOAP API request to 35:59 that uh to pull in that as a data 36:01 source. 36:05 Andrew says, "Can you set up event hooks 36:07 such as notifications in Slack when your 36:09 app database gets updated or deleted?" 36:11 Yeah, so uh we do have a Slack uh 36:14 connector that you can use to get 36:16 notifications about things that happen 36:17 in the app. Whether that's, you know, 36:19 having a button that someone can click 36:21 here to manually send a notification 36:22 message um you know or just basically 36:26 responding to events that happen. Uh you 36:29 can do those through event handlers here 36:32 in retail which we didn't really go into 36:34 but you can basically uh respond to any 36:37 sort of event in your app. Um and you 36:41 can either show stuff in your app, you 36:43 can run scripts, you can control 36:45 components, uh control queries, which is 36:48 what we would need to use to, you know, 36:49 send a message into Slack. Uh and even 36:52 something as simple as, you know, making 36:54 a a nice little confetti image, which is 36:56 kind of cool. So now every time we 36:57 select a row, we see that event happens 36:59 uh and we get something on the screen. 37:01 So you can definitely connect things 37:03 essentially in any configuration that 37:04 you'd like. Um and Slack is a connect 37:06 that we support and use all the time for 37:09 stuff like that. 37:13 Have you ever had customers create a 37:15 complex single page app with no page 37:17 reloads by using modules and changing 37:18 component views instead of creating 37:20 individual apps and linking those apps 37:22 via the nav? Um yeah. Yeah. So the 37:24 question basically boils down to like uh 37:26 could you do a very complex app with no 37:28 page reload just by hiding joining 37:30 components. Um and you definitely could. 37:33 I think um you know you'd want to just 37:36 make sure that you know all the various 37:39 queries and stuff running in the 37:40 background that you were very efficient 37:41 about um you know only running queries 37:44 when you really need to. If you add more 37:46 components that run queries 37:48 automatically you make those 37:49 dependencies more complicated. uh you 37:51 know that's when like you start to see 37:52 some performance hits because things are 37:54 running when they don't need to etc. But 37:56 um if you're really you know observant 37:58 about that and diligent about that you 37:59 definitely could uh have a single page 38:01 app with with no um kind of navigation 38:04 component. Uh I will say if if you 38:06 notice before when we had those 38:08 components that were hidden um when you 38:10 do have the have different components 38:13 hidden um you know it does kind of make 38:16 the clickable area to select this 38:17 component down to just that one little 38:19 tab there. So if you had a ton of 38:20 components that were stacked on top of 38:22 each other um you know you you may start 38:25 to have issues as a builder of this 38:27 application like getting clicking on the 38:29 component that you want selecting it 38:31 etc. Um but it's definitely something 38:33 you could do. I will also say that uh 38:35 the folks on the engineering team are 38:37 continuing to you know make navigating 38:39 between rettool apps and having the the 38:41 concept of like multi-page apps uh much 38:44 more performant and you know continue to 38:46 make improvements there. So, um, you 38:49 know, I do think that makes the case a 38:50 bit stronger for wanting to divide 38:51 things up by pages. But, uh, if you 38:53 wanted to have, you know, a bunch of 38:55 components on a single page and just 38:56 kind of hide show them, you definitely 38:57 could. Uh, but just make sure you know 38:59 you're you're looking at what queries 39:01 are running and things that are running 39:02 automatically and you have kind of a 39:04 good handle on that. 39:07 Um, cool. Yeah, I think uh, we've got a 39:10 couple more here. 39:13 If you create, Nick asks, if you create 39:15 a module of a set of components, does 39:17 that inherently include the queries 39:19 those components are powered by? Um, so 39:22 we talked about module, we just briefly 39:24 touched on modules as basically a 39:26 reusable um combination of components. 39:28 So this is most frequently used in 39:29 things like building a navigation bar 39:31 that you want to include in like every 39:33 app that's connected to that navigation 39:34 bar. Um, 39:37 and so you can definitely do that 39:39 because they're are groups of 39:40 components. Um yeah, the queries and 39:43 everything else that powers those 39:44 individual components come with them. So 39:46 um it's really best for like when you 39:49 want to create an entirely reusable 39:51 section of your app. Um so that you're 39:54 not having to duplicate logic and 39:55 duplicate queries and things like that 39:57 uh across multiple different spaces. 40:01 Let's see. Um is there a way to create a 40:04 second page that would display all of a 40:06 single customer's details when you 40:07 select one from the top table? For sure. 40:09 Um, you could create that as a separate 40:11 app where you could click in and like 40:12 view customer details. Uh, we also, like 40:16 I said, have a bunch of different 40:18 components that can let you do things 40:20 like that. So, we do have, uh, a modal 40:23 component where you could pop something 40:25 over the top that kind of shows that. 40:26 You could also have a sidebar that 40:29 slides out from the side. Uh, that's 40:30 kind of that that detail component. So, 40:32 that's that drawer, this drawer frame 40:34 here, and the the modal frame. So you 40:37 see that if we have the drawer frame and 40:38 we drag it here, this is where we could 40:40 you know have we could do our our same 40:42 kind of logic around um you know 40:45 selected selected customer details etc. 40:48 Um 40:50 and so you know we could have this 40:52 basically clicking on a row you could 40:54 have it trigger this slide out and and 40:56 do you know more detailed data views in 40:58 there. So the modal and the um the 41:01 sidebar frame are are pretty good ways 41:03 to accomplish that. 41:06 Cool. And then we've got time for just a 41:08 couple more here. Um, 41:14 is there any single solution to create a 41:16 flexible view between mobile and the web 41:19 except check the mobile view in every 41:20 component? That's a good question and 41:22 and something the team is definitely 41:23 working on and taking a look at. Um, 41:26 retool right now kind of has two 41:28 separate products. One which is RTL 41:30 mobile. So if you're looking to create 41:32 mobile applications and that sort of 41:33 stuff uh that use things like retal DB 41:36 and you love this kind of tool building 41:37 process but it needs to be a mobile app 41:39 um you can use retail mobile for that. 41:41 For the kind of web desktop apps uh we 41:44 do have as you noted like kind of mobile 41:47 toggles and things in here to look at 41:49 like how things look on mobile to hide 41:51 show certain things on mobile. Um, but 41:53 that's that is something you kind of 41:54 have to go through and and build that 41:56 experience uh w with that kind of mobile 41:59 view in mind. Uh, there's no way to to 42:01 do that in in bulk right now. 42:07 Um, yeah. So, two more questions here. 42:10 One, what are best practices to clean 42:12 and normalize data and apply a unified 42:14 taxonomy from multiple sources into 42:15 retool? Um, yeah, this is definitely 42:17 where I would recommend something like 42:19 retool workflows where uh, you know, if 42:21 data is coming from a bunch of different 42:22 sources. Uh, you want to make sure that, 42:24 you know, it's going to fit into 42:26 whatever schema you've uh, introduced 42:28 into your database. And so that probably 42:30 needs a little bit more uh, like ETL 42:33 sort of motion before it's ready to be 42:35 used and retool. So, um, that's not a 42:38 retool specific problem. There's 42:39 definitely, you know, lots of lots of 42:41 resources online to um, look at kind of 42:44 how you want to set up your data schema. 42:46 Um, but once you have that schema set 42:47 up, whether it's in retail DB or some 42:49 other database, um, if you're pulling 42:51 data from multiple sources that don't 42:53 quite all match that schema, that's 42:55 where I would suggest something like 42:56 retail workflows to, uh, get that data 42:58 all in the same shape before it comes 43:00 in. 43:03 And we'll do the last one here. New to 43:05 retool here, welcome. Uh, are there any 43:07 outgoing connections? So, for example, 43:08 once the database is populated, can 43:10 these lines be used to create a Jira 43:11 ticket? Absolutely. So, again, we we 43:14 covered this a little bit. Um but 43:16 queries are not just uh inbound. You can 43:19 also have queries that do things uh 43:22 outside of retool. So for example um you 43:25 know if we wanted to add a button here 43:27 in this row that said you know we wanted 43:29 to be able to send an email to this 43:31 person and say congratulations like 43:33 thank you for being you know one of our 43:34 top affiliates. Um you know we could 43:37 have a resource query that instead of 43:39 pulling from the database you know used 43:40 retool email which is Retool's built-in 43:42 email sending tool. Um, and so whether 43:45 it's email or Slack or making REST API 43:48 calls to something like Jira, um, you 43:51 can definitely do all of that using 43:52 retail queries. These are not by any 43:54 means read only queries. Uh, you can do 43:56 a ton here. 43:59 Cool. Well, we are just about at time 44:01 here. Thank you everybody for joining. 44:03 Uh, like folks have mentioned in the 44:04 chat, there will be a recording 44:06 available that we'll make sure to get 44:07 sent out uh, to you. Uh we will also be 44:10 uh you know posting a follow-up post in 44:13 our retool community. So if you have not 44:15 checked out the retool community, please 44:17 do. Um we have lots of people jumping in 44:19 there helping showing cool things they 44:20 built with retool. Um and it's a great 44:22 place to kind of learn more about all 44:23 the stuff that we've talked about today. 44:25 Uh and specifically if you have even 44:26 more questions that we didn't get a 44:28 chance to cover, uh that's a good place 44:29 to to drop those in. But thanks 44:32 everybody for coming. I hope uh this was 44:34 helpful and and you have some ideas 44:35 about how you can upgrade your 44:36 spreadsheets a bit uh and and get some 44:39 of this this functionality we saw here 44:41 today. Um and you know put put our claim 44:44 of retool being the fastest way to build 44:46 internal tools to the test. Thanks 44:48 everybody.
