Brooke from HubSpot Academy shows how to connect multiple UI extensions to one private app instead of creating separate apps for each. You'll use React components, JSON configuration, and serverless functions to build and deploy them together in HubSpot's development environment.
Hey, y', all, It's Brooke with HubSpot Academy. Today I'm going to go over how to optimize the way you create your UI extensions in your HubSpot account. Did you know that you can create multiple UI extensions connected to a single private app? This is a great feature since your account can only have up to 20 apps, and many UI extensions will usually rely on the same scoping as others. So optimizing how you connect your UI extensions to the same private app will give you the ability to do more. So now let's check out what's possible with HubSpot development. Let's go into VS code, and we're in this React Components app that I created last time, and we're in the app JSON file. In order for us to create a new card, we just need to call it within the app JSON file. So here where it says cards, we can just go ahead and copy this, make sure that we add our comma, and then now we can call another card. So this one I'm going to call instead of example card, I'm just going to call this second card so that we know what it's going to be. And then inside of our extensions folder here, I'm going to click new file new. And then we're just going to call it second card JSON. And then this is where we're going to add in our JSON information for the UI extension. To make it easy, I'm just going to go ahead and copy over the example card JSON file information and put it into our second card JSON file so the type will stay the same. The title we're going to change to, I'm going to add this to the right sidebar because you can put UI extensions in both the middle column and the right sidebar. So I'm going to call this our right sidebar card. And then for the uid, it has to be different from the other one. So we're going to just call this the right sidebar card. And then to change the location from the middle pane to the right sidebar, you just do CRM record sidebar, and then this will show up in the right sidebar instead. And then now we just need to call what file we're going to call. So instead of our example jsx, we're going to call this rightsidebar jsx and then we're going to keep the object type the same so it will show up on our context records. So now again, within the extensions folder, we're going to create a new file and we're going to call it rightsidebar JSX and the X just lets us use our React. So for this one, I wrote some React code that I'm going to just copy into here. And basically what this is going to do is this is going to have some text that says, hey person. Adding text in this box and sending it will create an alert via the serverless function. So this will allow us to use that app.function serverless function that we already have set up. And so this also means that your UI extensions can use the same serverless function across multiple UI extensions instead of having to build out separate serverless functions if they're all doing the same thing. So now we're going to go into our terminal and go CD into our React components folder and then we're going to just run HS project upload to go ahead and upload our new UI extension to the single app and it will also go ahead and build it. If you don't want your HS project upload to build and deploy and you just want it to upload to your account without building and deploying, you can change those settings in your HubSpot account. All right, so now that it's deployed, let's go in to our HubSpot account in our HubSpot account to see all of our projects. Let's go up to CRM development, then go over to projects and then click into the React components. And so now you can see that we have the example card and the right sidebar card running. So now to see what it looks like, let's go onto a contact page and then we should see the card in the right sidebar just like that. So it says right sidebar card. Hey Brooke, Adding text into this box and sending it will create an alert via the serverless function. So let's say this is a right sidebar card and then press submit your text and then we have our pop up. This is coming from a serverless function and it says right here, powered by React components app, which is the same as our example card in the middle column which also says that. So that's showing that it's connected to the same private app. So that's all you have to do to create multiple UI extensions connected to one private app. Thanks for watching. Please check out the links in the description box to sign up for the public beta. Learn more on HubSpot Academy and don't forget to like and subscribe to the HubSpot Developers YouTube channel. See you all soon. Bye. Bye. Bye.
