Update Data Instantly With Bidirectional Refreshing in UI Extensions

Hey y', all, It's Brooke with HubSpot Academy. Today I'm going to show an exciting new feature of HubSpot's UI extension. We've added a new function on CRM Properties Update which enhances bi directional updates of CRM object properties between a custom card and the record page within the CRM. These functions work in tandem to facilitate bi directional refresh to for CRM properties to avoid manual page reloads by an end user. This means that your users get real time feedback on whether a change to the object data has occurred without refreshing the page. What a game changer. So let's hop into a HubSpot account and see what this looks like. Here I'm in my dev sandbox and we have the new Global Navigation. So if you've never used this before in the Global navigation you have a sidebar navigation instead of a top bar navigation and each of them have different little icons that go along with this. And one thing that I do want to call out here before I go into the CRM data is the CRM Development tab. If you sign up for the beta for the CRM Development Tools homepage, you'll get this in your HubSpot account. And this is really helpful because it gives you links directly to all of the stuff that you need for developing on HubSpot, including your projects and graphic. Well, and a lot of other great CRM development things. So make sure that you've signed up for that beta and you have access to this CRM Development tab because I really love how they've streamlined it and made sure that all of my tools are in one place. So now let's look at our CRM. You can see all of the standard objects as well as your custom objects. So I'm just going to go into my contacts because it's connected to that and then I will go into my contact. So now we're on our Contact Record page and we're in our custom tab. We don't see it yet. We have to press Customize tabs and then change the default view to add it to our custom tab. So we'll go here, click the add Cards button and then we can see we have the Refresh Properties one and I'm just going to drag it up to the top so that we can see it a little bit easier. So now we've got the card on the page and the first top box is the property refreshed on Custom Card when changes happen on the CRM. So this is when you change any of the object properties in your custom card, this will update. So we've got our first name and last name here. So I'm just going to go ahead and change this from Brian Halligan to Brook Bond. I'm going to save those changes. And then now this changed. And this also changed, but I did not do any hard reloading, which is great. It's so fast to make these changes. The second one is showing you that property can be refreshed on CRM pages when changes happen on the custom cart. So it works both ways. And so this one is a lifecycle update. So right now you see that this one is set to subscriber. So we're going to update the lifecycle stage. And from subscriber, let's change it to a Marketing Qualified Lead. Once we click off of that, it changes as well really quickly on the side to Marketing Qualified Lead. This is such a powerful functionality that you can use in a bunch of different use cases and it makes it a lot easier for your users to understand how your card is working and, and how what they're doing in the card is actually affecting their data. So now that we've done that, let's look at how the code is actually set up. So I'm in my VS code and I went ahead and downloaded this from the GitHub repository. All you have to do to do that is you can just use the sample app and it will give you all of this code and you don't have to try and build it yourself. And so all you have to do is just do HS project create and there is some templating that is on our GitHub and so I will link that GitHub in the description so that you can put that right into your terminal and go ahead and download it and start playing with it. But what I'm going to go over is in the source folder you have a couple of things that are working here. So first of all, you're using in your app function you've got a couple of JS files that have been created and this is to use when you're doing that bidirectional sync where you have changes on your card and you want that to show up on your contact record page. So the first one is this Update lifecycle stage JavaScript file. And what this is doing is awaiting the properties that are shown up on that card from the front end that is getting from the reaction and then it's calling to the API and update and then it's just going ahead and updating that and then returning that API response. And then you also have to do a git lifecycle stage JavaScript. And this is just making sure that your custom card front end knows the different lifecycle stages that you have. So this is just calling that information so that you can have that properly within that dropdown. And so now we're going to look at the property refresh TSX file and this is going to show what we need in order for that to work. Now what we're going to do is when we go here to our extension, we're going to see that we have these three actions and this is what makes it work. So the three actions that we have are the Fetch CRM object properties on CRM Properties updates and refresh object properties. And those are going to be actions within your React. And then what you're going to do is you're going to make sure that you have a constant. And this is when you really need to understand how React works and how state changes work. So here we have the properties set properties, and we're going to use the state on the record, and then that's how we can update it as well as the lifecycle stage. And then we also have this use effect here from React that's going to call the Fetch CRM object properties. And that's how we showed that first name, last name on our card. So whichever CRM object properties you're trying to show, whether it be on a contact page or, or a company page, you're going to have to call it with the Fetch CRM object properties. And then you can use that within your front end. And then you also make sure that you call the on CRM properties updates. And this is whichever properties you want to watch for changes when you make changes on the record page. And that's what the on CRM properties updates function does. It will update your your CRM card front end when a change is made. And then we also have another use effect, and this one is running that serverless function that is getting that lifecycle stage. And then we're also running an on change function, which is for the lifecycle stage and making sure that the lifecycle stage is updating. And then it's calling that refresh object properties, which is how it does it without having to refresh the page. Now that we've hub all of that functionality above, then we can return all this stuff and this is where we call it. So we've got some of that text that we talked about. And then here is where it really works. So we have this description list and then we've got the row, this is where you saw that first name, last name, and then it would actually show the name. So here we're just using key value mapping. And in that key value mapping, the key is the name of the object property. And then the value would be what the value actually is within your HubSpot data. And then on the second part where we're changing the lifecycle stage, you have a selector and then the on change is going to be that on change function that we wrote above. And then you have your two different options, your lifecycle stage and the lifecycle stage dot options. And then you have your label and your placeholder. The one thing that I really want to make sure that you all remember from this is that if you want this to work within your HubSpot account, if you want that bi directional refresh, you really need to make sure that one, you're properly fetching the CRM object properties, you're using the on CRM properties update function and then you're refreshing the object properties so that it's refreshing without having to actually press the refresh button. And this, like I said, works on multiple different types of object types. It can be used for contacts, companies, deals, tickets. You just have to make sure that you're properly calling those standard objects. That's all I have for you today. Thanks for watching. Make sure to check out the links in the description for more learning and don't forget to like and subscribe to the HubSpot Developers YouTube channel and subscribe and I'll see you all soon. Bye bye bye.