Building Your First HubSpot Custom Card: A Beginner's Workshop | HubSpot Admins HUG | 02.13.24

Foreign. Welcome to this admin hug. We are going to be talking about building a custom card from scratch, folks. All right, moving on to the next slide. I am Dennis. I'm developer advocate at HubSpot and they say a picture is worth a thousand words. So I decided rather than telling my life story, I will send you a picture of drawing my daughter did of me, which aptly describes me sleeping, thinking about our pet fish, Louie, who is in this picture apparently playing soccer. So, yeah, that's me moving right along. If you want to, you can follow me on the LinkedIn. These slides are available. They should be pinned up there somewhere. You can find me on LinkedIn for one, two post a month. I'm very. I'm not good at it. I'm sorry. I'll try to be better in the future. It's just not my strength. Strong suit. If you're going to do this admin YouTube channel, you better get on to our developer YouTube channel as well. I expect it from you now. And last but not least, if you find this content at all helpful and if you are developer curious, please join the developer hug I affectionately have labeled as Doug. And that is the mascot that I'm pushing right now. Okay, what are we going to be doing? We are going to do two things. We are going to one, install a sample custom card and then we're going to back up and we're going to start from scratch. So this is where we are right now. This is a very familiar gif, I hope at least, because this is my favorite GIF in the entire world. We're starting at zero, where we basically just don't even know how to operate. And the idea is we get to here. Yes, that is all of you. All. I love Linda from here. Sorry. All right, moving right on. If you'll have questions, please do put them in the chat. I don't think I'm going to be able to pay attention to that. So I, I enlisted the help of some developer advocates. John McLaren and Hannah Seligson are in the chat and they will answer questions as they come along. You will have questions and that is okay. This is something I really want to stress on with. Slow down and breathe. Because as I was building this out myself, I hit a wall. And it took me four hours to get through something only to realize that it wasn't my fault and I was too scared to ask what's going on. And once I did ask, I was able to get some help. And immediately it all worked. I was ungated for some Content, I was able to continue. So ask questions. You're not an idiot, I promise. Everyone has these questions and you should ask them.

I may be breaking things. John and Hannah, I was trying to give you permission to interact with the Q and A and it seems like I gave you permission to turn your cameras on. No pressure to come on camera. That was not my intention.

Oh, hopefully they're clothed. Anywho, another thing I want to say is that I do not know how PCs work. I'm basically like that man with the PC that you saw in the former GIF. This is all kind of bent towards a Mac setup. I apologize if there are some commands that do not work on the PC. Hopefully there are people in the chat who can help out with the translation of that. All right, we're going to build this together. These cats here are typing quickly and they're typing faster than I can as well as probably more accurately. So expect me to make mistakes. If you see me type something incorrectly, feel free to yell at me. I'm all about it. I'm going to be coding in a weird place right now, so it's going to be awkward anyway, so pay attention. Here are some resources you can follow along with later on after we do this. Here, we talk about what a custom card is and how it is different from a CRM card. And when I say CRM card, I'm talking about if you go to the App Marketplace, you can download and install Serum cards onto your account. These cards are JSON formatted and they're very static. They're really cool. They can do a lot of things, but there's not a lot of dynamic functionality with them. They want to do anything dynamic. You have to open an iframe, it goes to a whole other platform. Another system's working on that. Whereas with the custom card we're using React, we can make dynamic things. The first sample app I'm going to show you actually is really cool demonstration of how to use it. As I said, we're using React and serverless functions and I'm going back to the react. So I want to say that one more time. I want to say with blinders on, because we have a very specific set of components that you can use to make sure that the blind. The look and feel of that card on your. On your account looks similar to everything else. I'm not sure if y' all have worked with WordPress before, but if you sign into that, you have all these different things installed on it and it can be kind of crazy. And weird in there if like just a thousand different themes going on in one place. We want this to be a nice, consistent feel so you feel comfortable and can navigate easily to things. All right. This is an overwhelming thing. These are all the things we're going to be doing today. Don't pay a lot of attention to this. It scares me. It should scare you. But we're going to get through it. Okay. First, as we said, and it's pinned, to do this properly, we have to have all of these things installed. We don't have time to really go through all this. So hopefully you have done this Node is basically a simple download. VS code is what I'm using for my text editor. We'll be using the HubSpot CLI. You're going to need an app developer account. Within that, you're going to create a developer test account. And we need to enroll that test account into the UIE beta. We'll walk through those last couple things together. We're starting right now, actually. Okay, I'm going to go over there. I'm going to start looking away from the screen. All right, so we are going to. First, let's go to developer.HubSpot.com here. You're going to do create a developer account. Clicking on that. We're going to choose this fellow right here. Go through this process. I've already done it. This is going to walk you through a flow of setting a developer account. Once you have that set up, you should see something like this. This is where we're going to start. We're going to use this to create a test account. I'm going to go here, create a test and we're going to call this diptometer again. Watch me type sounder. All right, create that. Now we're going to open that up. I want to make this big. And we have a new test account. There are certain things I think maybe John or Han could put in the chat, what different types of accounts there are. But moving on, we are going to go ahead and get enrolled in in the UI beta. So go down here. Go Product updates. Click on that. Click on in beta up here. Type in UI here. You'll see CRM development tools. We'll click Join beta. Agree to it. I promise we're not going to sell anything about you. Go let that happen for a while. It's going to take probably like 30 seconds or so for this to actually go through the gating process in the back end. But eventually what you can see up here is another nav Item. Let's just see if we're lucky. Not yet. Okay, that will show up in a second. Now, what we're going to do while that is actually going through, we are going to create a folder on our desktop. I'm going to navigate back to my slide so we can see what we're going to do. All right, I got lost right here. We are so going to create a folder on our desktop. New folder. And we're just going to call it Sample. That's probably pretty small, but you guys see it, right? Can you see me writing sample card on a folder up there? Cool. Now we're going to open that up in VS code. And this should be very large. And we're not going to do that. My God. No. You should see a very large VS code. Hopefully this is viewable to everybody. And within here, we're going to open up the terminal, which on the keyboard is Control Tilde. And up top, it's actually under Terminal. It'll say New Terminal at the top of your screen. To get to this point, yell if I'm going too fast or if this is too much. So far, too fast. Okay, slowing down, slowing down. Okay, I want to wait for Janelle to tell me. When you are ready, just refresh your screen. Chrome is very picky with Bevy. Here is the name of the beta right here. And you'll see now that I've joined it, you can see that it actually shows up up here.

I think you can deep link to individual.

Yes, yes. If I was smart, I would have done that. That's a very good idea, Kyle, that. I did not do that.

CRM development tools to build with UI extensions.

Hold on.

I just got to pull my Hub ID out of it and then will be. I think this will work. Donny, click that link and let me know if it takes you to the right spot.

Oh, boy.

Matthew. Juggling a lot of new things all at once.

I'm curious to know what it looks like in the new nav. I'm going to start moving on a little bit here. Hopefully everyone's starting to get to this. And I'm going to just copy this here. We're going to go back to VS code. I'm going to do that and I'm going to. Oh, product not found. All right, I'm going to keep on going. John, Hannah, get to work. Hit enter on that and. Oh yeah, I do have a config file. Sorry, we have to set that up first. All right, over here we can install an extension called HubSpot in VX code. So click on that and you go and go and install it. Okay. Once that's installed, you should see it here in your nav. I have a really big. So it's really not the best. And we'll work. Oh, my gosh. Can I reduce the size a little bit? All right, authenticate open. This should take us to the newest thing we just built. Continue. We're going to allow all this to happen. So we're going down to the bottom. Generate new personal access key. Open and open. And don't worry about these errors. And yes, we do want to set this as default. And now you'll see up here that our account's been added, has a star next to it, which means is our default account. Right now I'm going to rerun that project create command and in theory it should work. All right, cool. Now we're going to call it Custom Card. We're going to do the build a multi step flow and you'll see now it's going to install this. Guess what? Oh my gosh, I have an error. All right, go back to here. Let's see if we can grab it from here.

John, Hannah, get to work. Dennis needs help.

All right, grab this. I'm going to put this in the chat as well. Now let's go back to our VS code, see if this is going to install. Yes, we do want to override it. Cool. Now it is has been installed. What we're going to do now, once this has been installed. So we're going to do HS project upload. This is going to send it up to our account, type it correctly. Sorry. HS project upload. Oh my God. Oh, what's going on? Folks? I apologize. We're going to. I'm just going to move on from this. We're going to move to the. The whole setting up from scratch. I apologize. I'm not sure what's not working there. I do have it. Did I not install it? Let's. We're just going to move on to actually installing from scratch. And I apologize for this step. A blunder on my part. It does work. I will. I will record a way to install this from scratch. I'm not in that directory. Thank you. See, so yes. Cd. Okay, so what I want to do is we're going to make this work. Okay. Cd, multiple step flow. Now that I'm in it, we're going to run HS project upload. Yes. This does not exist. Now we are building it. Thank you for catching that. I was not actually in the correct directory.

Okay.

Because this is building.

I think people are lost while it's building. Can you just pause and recap all this stuff?

Yeah, yeah. Yes. Okay, Sorry. There's a lot going on here. And so basically what we did was. Should I just do it again? You're going to create a folder on your computer, on your desktop. New folder. We're going to call it Custom Card right out of the way so you can see my new folder. So many things. I have a folder called Custom. What we're going to do is we're going to open up in VS code. So drag that into your code editor right here. Yes, I trust this. We're going to make this big, so you all can see it increase the size. We're going to say later that, all right, we have a folder. We need to authenticate this with HubSpot. So we're going to go back to this HubSpot Sprocket here. Click on that. This is an extension you have to install. So you should go to. If you haven't installed it. If you don't see the sprocket, go to Extensions and you should be able to see HubSpot in there to install. So type in HubSpot and you should get to it right there. Here. We're going to authenticate this folder to work with our account. So Click on Authenticate HubSpot account. Click Open. This is the account we just built. This test account we just built. Continue with this account. All right, this is basically saying, okay, we're gonna give you all these scopes, hit open code, open here and over here, and say, yes. Don't worry about these errors that happen. You'll see now that the account is up there with Jepson right there, and is the default account because it has a star next to it. Next what we need to do is go grab this command right here. Copy that. We're going to open up the terminal. Within VS code, you can either go to Terminal new.

Can you just drop it in the chat again real quick?

Yep. All right.

That's the thing you want to copy.

So Terminal New Terminal. You'll see it right here. We're going to just paste that in. It's going to create the project once it's created, we're going to. You'll see up here. If we go back to our directory, we'll see that we have multi step within our custom. We need to change directory. So CD multi. If you just type the letter M, hit tab, it will create this. It'll change to that directory, it'll automatic autocomplete for you. Do that. That bring you into. You'll see that we're in the multi step flow now. We're going to HS project upload, let's say. Cool. We're going to bring this up there. We already have this up there. So we're going to rebuild it. Basically this is what happening. Hopefully you all are seeing this. I like the word sweet. So Bill, thank you. Okay, cool. This is how you are going to build like if we go to our account now. Actually, let's just do that real quickly. So if I go to dev test accounts, I think it's right here, right? Yeah, Contacts. All right, I'm going to open up. By the way, I'm putting a petition in to put Kyle as a default contact when you. That's part of my goal in life right now is to have Kyle to default contacts when you have a new account.

That would be highest honor I've ever received.

All right, we're going to change the view. So just to show you again, go to. Y' all probably know this better than I do, so. Contacts. Brian, custom tabs. I'm going to click on default view. I'm just gonna get rid of everything. Remove, remove, remove, remove, remove. And we're gonna add a card. It should be down here, the multi flow card. Click on that save and exit. Bring us back to Brian. And now you'll see this really, really intense, crazy custom card which you can go in here. You can see the menu for each of these in this panel. And then you can go. Okay, cool. Click on that. Things you want on it. These are things you couldn't do with a public CRM card here. And I want to add. You'll notice that you have to select addressing. Otherwise the ad is not going to allow you to select anything. Click on that. And now we have an order, a message. We can remove it. It's really cool. This is. This is a sample app that you can go through and explore. It's all here in the folder. Custom multi sub. You see all in here that you can just mess around with. I personally find this to be a little overwhelming because there's so much happening that I just don't know where to start. So what I am going to do with you all if I can find my slides is we're going to go and we're actually going to set up from scratch again. Starting from your desktop, make a new folder and title it Gypsometer Project right here. New folder on desktop. We're going to open that up and we're going to initialize it again, just like we just did. So it's open somewhere on my computer. Get rid of this one and make it bigger for y'. All. Now we have that open in VS code. I'm going to open up the terminal. The quick command for that is control tilde on your keyboard. Okay? And then what we're going to do, put these next to each other so we can see them at the same time. So we're going to HS init. So the same thing we did over here with the extension we're going to do in the terminal because I think it's important to really get comfortable with the terminal. So type in hsinit. This is going to initialize HubSpot. We're going to say, yes, we do want to open up, get a new key, same account that we had. Go ahead and choose it. This is going to open up your personal access key page, hit show and copy. You can close this and then you're going to paste that in down there. Laura, I apologize. I'm trying. Yell what I'm doing too quickly or not going well for you, and I'll try to make it better. We're going to use this default name for the cli so JSON enter there. And now we have, you'll see the H HubSpot config YAML file, which is basically saying we can now communicate with that account. That's all. You'll never have to look at that again. All right, now we're going to move on, and we're going to create a project. So back in our terminal, type in HS project, create this, answer some questions. And I think I said we're going to call it Jepsometer. Right here, we're going to name it Jepsometer, show how many spaces, extra space, ask you where to put it. We're going to put in the same default location. There are two options here. CRM getting started. We're not going to do that. We're going to go from scratch. No template, empty project. All right, once we do that, you'll now see that we created this folder up here, and within that we have a source directory and hsproject JSON file, which names basically where we're going to be pointing to right here and the version. Moving along, we're going to add an optional package, JSON file. This will make sense later on as we go. So from our terminal, again, copy this. We're going to do a CD autometer and then we're going to touch. This is actually going to create a blank file right here. So touch package JSON. You'll see. Now we have an empty package file. We're not going to put any information in any of these files. Right now we're just going to create the files and the folders. Then we're going to go back in, we're going to pour in all the content. All right, so every custom card needs a private app. So we're going to do these commands here, CD to the source, move this over so we can see it better. All right? Then we're going to make a directory called app, and we're going to change into that directory. If you see an and in a command, that means we're going to do one command and we're going to tag another pen another command behind that. So that. And you'll see now we have source and within source with an app folder. And we are now in that app folder, we're going to create the JSON file for our private app that is now in there. Okay. Now we're going to accept the actual extensions, which is where we're going to put our react files, for example. So this tells the configuration of the card, this is what actually runs it, and this, if we need to install any dependencies for it to work, we'll add it here. So let's go ahead and make it. We're going to make directory extensions and we're going to change into it. And then we're going to create these three files. JSON, right? Yes. This next one, the AssociatedDeals JSX, this is the JavaScript React file that we're using and make sure that it's capitalized. React files need to be capitalized. So going back associated. And then we need a package JSON file. I'm going to copy it. All right, so if we go in here into our extensions folder, we should see three different extensions. Which package? Where's my JSX file? Oh, there it is. Okay, cool. Now we're going to move on and we're going to create our serverless function files. This goes into a different folder and it requires again three different files. The function. This is what our HubSpot is going to look at to see where the function is. And this is if you, again, if you need to install any dependencies. So let's go ahead and build those. We're going to just copy this over what you'll see here. That did several things. We went out a directory, then we created the app Functions directory and then we changed into that app Functions directory. At this point, we can just copy these over serverless. This package file. Let's make sure these are all made. Yes, good. And this env file, the env file is going to allow us to add secrets, which are like API keys, for example. All right, so now we have all our folders and all our files. And now we're going to go back through and we're going to put content into these. How are we feeling out there? Is this like, too crazy or are we following along a bit? Keep going. Okay. All right. No, it wasn't me. That was someone else. You are in the matrix, Ryan. You are. Enjoy. Okay, cool. So we go back to that optional package JSON file real quickly, and in there we're going to add this what this is going to do. So if you go back here all the way out, let's just close all this in Jepsometer, you see package JSON has nothing in it. Click on that. And just walking through this, the name of this is going to be the Chipsometer. The version is 0.1.0. These are the scripts we'll run when we do an install. It's going to change into the extensions and run that package. JSON's inside the extensions folder as well as the one in the functions folder. This is who did it and the license mit, which means anyone can use it, basically. All right, make sure I save that. Now we're going to go to the private app folder or the private app. Sorry. So in the Source See app JSON, go there and this is the information for the private app to work. So go ahead and highlight all that, copy it, put it in there and save that, make it a prettier. What this basically is going to say is there's your name, this is the description, this is the uid. This is something that basically, let's say you want to update what it's called later on. This is like the label, so you can change this to wherever you want, but this is the UID and does not change. You want to keep this the same. Next down here, what we have is the what scopes are needed for this private app to work. So we're going to be talking about, we're going to be working with contacts and so we're going to add this Contacts read scope. It's a private app, so it's not public, obviously. And this is going to tell it where the actual card is located. Here is where the JSON file that describes the react card. Now let's start working on our custom card. So we're going to go into the extensions folder and then we're going to the AssociatedDeals JSON file and then we're just going to copy this over, paste it and walking through this. The type of extension. This is a CRM card. The title that you'll see when you see it in your app is going to be or on your account is going to be Jeffson 3000. This is once again, don't change it. You can change the title, but do not change the uid. You can choose where you want this to show up on your account. So let's see if I have this open. You'll see here that I have this in the center pane. You can also do it in the side panel. To do side panel. It's a side bar or sidebar I think is what it is. And. And then go back to my. Where my slides go. All right, cool. There we are. This is the actual React file we're working with. And this is telling our card what object types we want to show up on. We're only showing this up on Contacts. If you wanted to be on more, you could add another object for deals, companies, etc. Now let's go to our React file and add this. This is the bare minimum. This isn't going to do anything. And I'll show you in a bit what I mean. Let's go back in here to Extensions then associated deals jsx. Copy that in. Get rid of that. So what we did, we imported React. We need React for this to work. Then we also imported HubSpot from the UI extensions that we're going to be using for all this to work. Everything we do is going to. This is basically going to register it with HubSpot. So the actual card is going to show up in here. And down here is where we're going to build out the card. You'll see more shortly on that. Now we're going to add the package JSON file. This should be familiar now because you've done this before, but you're going to do it in the extensions in the package JSON file and then add that. You'll see that we're adding some dependencies here. So we'll need to install this after we get this added, which I'll show you how to do in a second. And now we're going to move on to our serverless function. Again, all we've done so far is we're just doing the basic. This isn't going to do anything once we register on their account, there's nothing going to show up yet. All right, so now we're going to go into our functions file app functions and we're going to the package JSON file and copying this over. And where is there's another. So here is the name of this function and we're going to require Axios, which is going to allow us to interact with outside, like use the API call so we can look outside of our HubSpot account and use other external sources. Now let's thank Kyle a little bit here, bare minimum. So we're going to copy this, we're going to bring it over to thanks Kyle JS and save that. And now right here. So this is where we're requiring the Axios, we're going to use it and all of our stuff is going to go into this big method here. Now we need to do the serverless JSON, which basically is telling HubSpot what the serverless function is going to serverless JSON. Copy that in there, paste it. You'll see here when we call. You'll see this later on. This is the file that we're using. So thanks Kyle JS right here. Later on we'll add some secrets here. Now what we want to do is go back over here. We're going to change directories back to the top level into gypsometers where we're going to go to. The easiest way to do that is if you go to your folder on your computer, which right here. Gypsometer what you can do in your terminal. Type in CD space, find that folder, drag it in, and there you go. Now you are in that folder. I want to pause real quickly to make sure everyone is at this point, or at least some of us are.

There was a conversation a while back. A lot of people have decided to switch to sponge mode where they're just watching you work and understanding what's going on and then going to watch the the recording afterward so they can pause and work along with it in the end.

Cool, that sounds totally fair. And thank you all for being my guinea pig on this whole session. I'm trying this out, so yell with any complaints or things I can improve. Now that we're in that Jepsometer folder, we're going to do NPM install, which is basically going to say I'm going to look at this package JSON file. I want to see what I need to do. I'm going to look at these scripts here and I want to Run the script. So once I do this, it's going to do those things. You're going to watch it do some magic down here and you'll see there's going to be a lock folder to be added. You don't have to do. You never have to touch that lock folder, but you'll see it's added to each of these and you'll see this. Another folder called Node Module will show up. And that is a lot of the dependencies that we had to install for this all to work. All right, now we have the bare minimum to have this actually work. So we're going to upload this. So hsproject upload. You will see this does not exist. So we're going to. Yes, and now we are building it. And if I go back over to my chipsometer here in a second, after this builds, deploying. Cool. Now we're going to go back over here, customize tab default, and we're going to just remove that and add the Jephson 3000. Boom. Save and exit. You'll see. As I said, nothing's here yet. We've not added any functionality to this, but we do. Congratulations. If you follow along, you made this far. You. You have just made a custom card. Congratulations. I'm proud of you all. Moving out of here, we are going to move up to the next step and get our dev server running. This is going to allow us to do everything locally and you're going to be able to make all kinds of changes to your app, but it's not going to go live, it's not going to affect anything else. So if anybody's using production, what you're doing coding here is not going to affect them until we upload it again. So what we're going to do is go to hsproject Dev something with test accounts. There is no developer sandbox account in a test account. We're working on that. The nomenclature. So go down here to test on this production account. Now, if I go back to this and refresh it, I should see developing locally now. Everything we do, we are going to be adding to that card. Okay, so the really cool thing about React is it's modular, which means we're going to be building components and you can nest components within components. When you think about what we're going to be building, this is a view of what we're going to be building. It looks pretty simple, but there's a lot of things going on here. These are separate components within this larger component. Then by building these in these Blocks, we can actually reuse it. This is the same thing, but we're using different data to get it out there. I'll show you all about that in a few. Within the Extensions folder, we're going to build these files and we're going to build it in this folder called Components. So here, not there, components. All right. In the Components folder we're going to make several files. These are all the components we're going to add to actually add the functionality to our custom card. Clicker JSX dealpanel jsx Deal panel inner the layout and stats jsx so go ahead and just highlight that and within here you can go new file clicker JSX new file, new file. Okay, copy layout and stats JSX. So within components you just have 1, 2, 3, 4, 5 different files. And we're going to start with this layout jsx. So go here and we're going to grab this and copy it over there. Entire thing though. So here we're importing this component called Flex, which is available on the HubSpot developer website for all the components. If you go back to the resources of these slides, you'll see a section for all the components that are available. We're bringing that in and then we're building this component. It's going to be called Layout. This is the actual component here. Within that, we're going to allow two other components to be added to it in the props here. Then we're going to call them out here and here. Now let's build the stats. A lot going on in this file, but you all got it. I'm proud of you and you're doing a great job walking through this step by step. This one, we're importing another card or another component, Sorry, this is the name of the component. We're adding an optional. We're adding a title to it. And then within it you're going to see down here I'm adding an operator so we can change what type of operators used for this filter. We're going to be looking at the object type 03, which if you didn't know already, are deals. And then we have this filter down here. And if you've not done anything with filtering, John or Hannah can probably add something to the chat where for the search API that we have, which will go through all of the possible operators. This is a property from the deals, so you can get there. And I have a value of 1000. So basically what it says like, all right, we're looking for things that are above a thousand. Well, whatever we want greater than or less than or equal to 1000 in deals for the value. Now we're going to add the clicker, copy that and go over to clicker JSX and actually grab the entire thing again. Here we're importing button and this is the. We're going to have this component called Clicker and we're going to take the panel id. So the panel has to have the ID of the panel, which I'll show you in a little bit to allow it. When you click this button, it's going to open up a panel and it needs to know how to reference that. And here's the button. This is what you need. If you go into our components, you'll see this. It needs us to actually open it and it's going to look for that ID right here. Now we're going to our parent component, the associated deals JSX right here and we're going to do a lot more. I'm just going to copy and paste it all over. We'll walk through in a second. See, actually if I go back into here, we went from nothing happening in there and but now we actually have content showing up, but it doesn't do anything yet. All right, here on our main component we're importing React again HubSpot the layout and these are, these are the components we just built in our components folder. And you can see here's where they are located. So the three things we're importing right here, this is our component that's going to our card basically and this is where we're building out the card. We added the layout and here's where we get to change that stat title. So I can add here within stat title I'm going to change the value that it's stored to count the deals over 1000. And the operator I'm using is greater than or GT in this case and the same thing. So I just copy that. You can copy this, paste it one more time down here for this one. Change what you want that title to be. In this case we're changing to less than. So our component is going to have two things. One is deals over 1000. Another is deals under 1000. Let's actually while we're here add a couple deals. Brian, what are you working on these days? And we're going to do one is. Now let's go back to Brian. Look at that. So now we see that it actually has that this view more does nothing yet because we don't have that in there yet. Okay, moving back to our project. Get that panel in so it actually functions. So we're gonna go to the DealPanel JSX and we're gonna copy in all this good stuff here. Oh, my gosh. I only have 10 minutes left. All right, I'm gonna hurry. All right, here we're importing all these components of things. So you see in here that we have the panel. So we need to call it in. There's panel body, we need to call that in, footer, etc. Down here you'll see that I have. Let's go through this. The panel title right here. Panel ID the children. So we can add components within that and a custom footer. You see where I call them out here and here. There's the children. This is cool. So let's say I didn't add any text to the custom footer. You can actually put. If nothing, it's like. Or if that's not there, we'll use this value instead. All right, now let's do the panel enter. Import all this good stuff again. Did I get it all? No, I messed something up there. Copy. All right here we're getting text component and the flex component. We're also getting the CRM associations table here. And then we're exporting this component. Deal panel enter where we add these props here. And you'll see reason the flex and we're adding a text component right here, subcomponent. And then you'll see where I'm calling out that subtitle right here. And again, this is familiar to you all. This is the object id. These are the things I want to show in the columns, which I'll show you in a second. And this is the filter we're running. This should be familiar to you at this point. And next. Okay, now we're going to add this all to our main component. So rather than type it all out, copy it. We're going to go back over to AssociatedDeals JSX, paste it all in that, and if I can find my browser, let's see what we have here. Okay, let's see if this works. Now. Look at that. So now we click a button, we can actually see the details. See, these are the things we set over. We want to see in the columns. These are things we can filter by if we had many in here. So let's just add for fun. One more deal. Add 5,000. Oops. Go back and go back to Brian again. Doing a great job, buddy. All right, two deals over $1,000. And we go here. We can see them both in here with all their information. Pretty darn cool. And I didn't add any footer text. So this is that default footer text we had down there. All right, I walked through all that with you. So we're going to go ahead and start thanking Kyle. All right, down here you're going to see that we're adding a button. So go ahead and grab all this in that same associated deals JSX and replace that with the updated. If we go back over to here, you will see now there's a Jetson button that does zero things. We click on it doesn't do anything. Unlike Kyle, that I know he does a lot. Moving on back over here and to our slides. We imported the button there. We have eight minutes. Now we're adding a serverless function. So here we're adding this prop. The extension is going to say, okay, the serverless. This is where it is. We're heading to that. Got it in our prop here. And this is where the handle the click within that button. And if you remember correctly, back in our apps, we call that function Jepsen Updater. Now here at the bottom is where the button is. And on click going to call this function handle click, which is then going to run the serverless function. Now, yes, this is me reminding you that we named it that we need to add some secrets. Okay, so going back into our apps folder, we're going to go into the serverless JSON file and we add right here HubDB. Why HubDB? Because you're going to be authenticating to my HubDB table later on. We're going to stop this real quickly. Control C will stop your watch from happening when I type in HS secrets add Hub db. Let's say, what do you want it to be? I have it in the slide. Do not do this. You do not share these things. This is bad practice. So don't steal my life. That is now in there we have that secret added, which is cool, but it will not work for local development. First of all, let's just go ahead and get that dev server back up and running hsproject dev in the terminal. We're going to go into this env. The reason is it's just not secure for local development. So we do not want to pull down secrets to a local instance. So we need to store it here in this env file. Go here and we're going to type in this copy and there's something there. Save it. And now we're going to build out the ThanksKyle JS. We have six minutes, so we're going to go with it really, really quickly. There's a lot going on here and I don't have time really to go through the entire thing, but we'll try. All right, so we're going to just copy over this and we're going to go through. Save it. Okay. Walking through this. We need this. This is going to allow us to do our API call. Everything goes into the exports main function. These are the values for my HubDB. This is the ID of my table. This is the row we're looking at and the name of it is Opacity. We're going to use that secret hub DB right here to authenticate to my table. We're going to create that instance right now. These are the headers that need to go. We're going to return JSON and we're going to use that bearer token for authentication. First we need to know what this row has and what the value of opacity already is. We're going to do a get request, send it over to my table. It's going to say it's zero right now. Cool. Let's update that. We're going to find that and we're going to iterate over here by + 0.1 for the opacity. Awesome. When you do that, you throw that over there. It's going to throw it in a draft state. What we need to do now is publish that table. This function does all the publishing for you. Now that we have those functions written out, we're actually going to call them. That's all done right here. You'll notice I did do a lot of console logs here. Once we do this, get this running again, we should, let's see, go back into our. Where is my window? There you are. All right. Password. I could run this. What did I break? Cool. In my. Here you should see. See if we can do this in a better way so you can see better. Every time I update this, you'll see it all be console logged out here. And if we bring up new window. Thanks, Kyle team. As we click this button, you'll see that Kyle becomes much, much clearer until he is full opacity. And that is a lot. I understand that is a lot. And you probably have a lot more questions. I'm always available on the developer slack or the LinkedIn and all that good stuff, but that's all I got. Here's three minutes here. So if you have questions, please feel free. To ask. I've not watched anything happening in the chat, so good luck.

Dennis, thank you so much for doing this. I know it was a bit of an experiment for you and it was for us too. I think all the sponges in the room really enjoyed it and I think those who actually had enough of an understanding of the environment to follow along really also benefited by way of feedback because I know we were your guinea pigs and I would love to do this in the two minutes we have while there's still 160 people in the room in the chat. Let me know if I'm misrepresenting you, but I think if you're going to do. If you want to do more one on one sessions and I would love to have you back to do some. If you want to, some sort of basic ground setting around local development would be really helpful because I have a basic understanding of Node js. I taught myself so I could do custom coded workflow actions and I bet a lot of people in this room did the same. But to do that you just go to HubSpot, go to a workflow action and put in Node JS, right? All the setup stuff you did, it didn't occur to me until I watched you doing it. But like, holy cow, that could have been a session unto itself, right? Just explaining how local development works and how the things connect and what you. Some people were asking like, can you do this in Postman? And like, oh, API stuff you could do in Postman, but the other stuff, no, like you need this other environment. And so I think, yeah, sounds like people would show up for you if you wanted to come back. And just because I know also local development is Fairly new for HubSpot, right? I remember when we launched that a few years ago, it was like a big deal.

Now you can.

And for developers it's like this is their natural way of operating. And so for HubSpot to align with that is a huge win for the entire ecosystem. But for those of us who are not developers, it's like, whoa, what are you doing? Wow, what is that thing? And like even like the simple folder structure and stuff is totally new, so.

Yeah, exactly. That's why I wanted to do it from scratch and using the terminal as much as possible because these are basic things that you need to learn how to use to be a successful developer. I will happily come back. We can do a, you know, just setting up your local environment. We can spend easily an hour on, on that alone. My, my video on getting bootstrapped. So to speak was hopefully enough to get started. But yes, I know we can go to a lot more details about that.

Yeah, yeah. So you make the call whether this is the right place or if that's something you'd want to do on your developer Hug. If you want to save Developer hug for more advanced stuff and bring your one on one stuff here, would love to build that relationship with you and sounds like a lot of folks would come back for it. So.

Cool. Yeah, I'll do it here. I think this is a great audience for it. Cool.

Kara is asking if there's a link to the dev hug. There is that question real quick. And then we are at the top of the hour. We'll shut this down.

Yeah. In the slides, at the beginning of the slides, which is pinned, there is a link to it in there. I don't have it saved.

Oh, Deanna's all over it. She just dropped it in.

You're the best.

All right, Dennis, thanks so much. This was incredible. I mean it. We'd love to have you back and we'll make that happen.

Love it. See y'.

All. Thanks, everyone.