Use Modals and Panels to Simplify Your UI Extensions

Hey y', all, It's Brooke with HubSpot. Today I'm going to show you how to use the modal component and updated panel component for UI extensions. The modal component renders a popup that can grab the user's focus for a specific task, such as signaling a destructive action or a short form. The panel component opens up a side panel and the API has been updated for simpler and easier management. A new PROP overlay creates consistency with panels and modals. And this update simplifies overlay management, reduces the number of functions needed, and handles additional pop ups like notes from CRM Action button more effectively. Let's look at the sample app to better understand how the modal and panel components function. So here we are in my VS code and I already have my config file. And if you don't have the config file, you have to run HS init to go ahead and create that config file and connect this to your HubSpot account. I already have that. So we're going to go ahead and we're going to clone the Overlay example project by using HS project create and choosing the template source from our UI extensions examples. The link to this UI extensions examples GitHub repository will be in the link below, so, so check there if you need it. And now let's go ahead and click Enter and then that creates the Overlay example folder. And now we need to CD into our Overlay example folder. And then let's go ahead and run NPM Install and this will go ahead and install any node dependencies that we need for this to work. And now we can just go ahead and run HS Project upload and, and then once this is uploaded, we're going to say, yes, we do want to create it in this account. And then it'll go ahead and build it out and deploy it. So once this is deployed, we'll go into our HubSpot account and look at it. All right, now that it's deployed, let's go to our HubSpot account. All right, now we're in our HubSpot account. To see this, we need to go to a Contact Record page. So in the main navigation click on CRM and then click on Contacts. Finally click into Any Contact by clicking on its name. And now let's go over to the middle panel and click on Customize Record. Then we want to change the default view. So we're going to click on Default View and we have a custom tab here. So let's go over to the custom Tab. And then let's go ahead and click Add Cards. And then over here in the card types, let's choose Extension Cards. And then finally let's choose Overlay Example Card. Then we're going to close this panel and click Save and Exit. Now we're back on our Contact Record page. So let's go ahead and click on the Custom tab. And now we see the Overlay example card. And it has this wonderful table that tells you all the different types of modals and panels that you can see. So for the first two we have modals, the default one. So if we click on the example button, it'll open up an example modal. And then if we click on the modal for the second one, danger, this will show you how you can signal that a destructive action may be happening. This one has the red warning color and it just to make sure that anyone who clicks on this knows with the pop up that they're doing a destructive action. Next we have our panel and we have the default panel. So this one slides open, and then this one you can just close by using the X in the right hand side. And then in the panel modal version, if you click on that one, what it does is it just blurs out the background so that all you can see is that panel sidebar. All right, great. Now let's look at the code to see how this works. Inside of our VS code, let's open the overlay example folder. Then let's go into the source folder. Then we need to go into the extensions folder. And let's go into our overlay example file. At the top of our file we need to import react and we also need to import the different components from the UI extensions and then order. For this to work, we actually added some components just to make it a little bit cleaner to see the different types. So we have the modal default component, the modal danger component, and the T shirt panel component. And then after that we need to run the HubSpot extend and we're defining the extension to be run. And we're going to call that Overlay example card with Actions as a prop. And then next we're going to define our overlay example card. So for this one we created a table and then inside of our table where it has our buttons which we clicked to open up the different modals and panels, this is where we call on those components that we created. So we have, when you click the button, the overlay is set to be that modal default component. And the same with the other ones we have the modal danger. And then for the panels we have, it's called the T shirt panel because it's for a T shirt example. And then we have the variant here for the panel set to default. And then if we scroll down to the one that blurs out the background, the modal panel, this one has a variant of modal. So now let's look at the components that we built so that you can see what the code looks like for those. So in the components folder we're going to go into our modal default. First. When you build a component, you need to make sure that you import all of your UI extension pre built components at the top. So in your components you'll need to export a constant and you can call it whatever you want. In this case we called it modal default and then send in actions as the props. And then this is where you actually build out the modal. The modal needs to have a modal body, and in that body is where you add in whatever you want your user to do. And, and the modal footer is optional. And in this modal footer, because we are sending along a form, we have a button that cancels sending along that form and then it closes the overlay or we have a button that saves the form as well as close the modal. So now let's look at what's different when we look at the modal danger. The modal danger one again is for any destructive actions. So if we scroll down to our modal danger danger export, you can see that we have a modal body and a modal footer again. But in this case, when we call the modal component, we use the variant danger and this will make sure that it'll show up in that bright red color. And so then users will know that they might be taking a destructive action. Finally, let's look at the panel component that we created. So in the T shirt panel we are exporting our constant and we just call the panel component. And for this one, for variant you're going to pull in that variant from the overlay example jsx file. So this will be a variable that can change depending on what variant you want. And in this one for a panel you'll need a panel body and you'll also need a panel section. And then inside of that panel section you can add whatever you need. For this example we added in a form and then you can also have a panel footer. The panel footer is optional. And in this one we have two buttons, one that submits the form and one that closes out the overlay. So that's all you have to do to add the new modal component and the updated panel component to your HubSpot UI extensions. These are super powerful because it means you can add even more context to your UI extensions without having to take up more space inside of the UI extension. Thanks so much for watching. Make sure to check out the description to get the GitHub repository like this video, subscribe to the HubSpot Developers YouTube channel and I'll see you in another video. Bye bye bye.