Dennis Edson shows how to use aliases in custom modules to keep user changes intact when you move fields around. Aliases let you rename fields without losing the data people already entered.
Hey folks, Dennis Edson here, developer advocate at HubSpot and I'm going to walk you through aliases. Aliases allow you to map a field to a new location. So for example, let's say you have created a color field in your fields JSON file. You've released the module to production and it is actively being used now by the marketers. Now you'd like to move that color field to the styles tab, but if you do it, the modifications that the marketers have made will be reset to their defaults and you are going to have an angry mob of marketers headed your way. Aliases is going to prevent that mob. Let's check out an example and use our friend aliases to make everyone happy. Okay, we are in the design manager. As you can see I have a bad button and a good button. They are all both employing one field, a color field called button color. The labels button color and the name is old button color. You can see it's referenced here. It's pulling in the background style for my button which you can see in the page editor here. And I have a preview of it as well. I go back into the page editor. Let's just go ahead and update these colors here and here. Alright. And refreshing. We should have some colors changing. Cool. Now what we want to do is change put these styles actually down into the style field. So this color field needs to go down to the styles field and with that we're going to go into our VS code Code editor. And I have two modules. Obviously the fields JSON of the bad button and the fields JSON of the good button are exactly the same at present. Let's focus on the bad one first. And what I'm going to do here is do this without aliasing and you'll see that I'm just copying and pasting it over here. I put it into a styles field. It is right here, the button color. We updated the lab, the name of it to new button color and if I save we're going to need to change the HTML to make sure that we're referencing that. So module styles.new button color and let's go over to our good button, going to do exactly the same thing and I'm going to copy and paste and put it over here again we've updated the name to new button color. But this is the important part down here, the alias mapping. So you'll see down here the property alias paths. This is the new field name and this is the old field name that was referenced from the old fields JSON. So if I look over in the HTML right now you can see it's the old. What we're going to do once again is change this to modular styles dot and change this to new save and going back to our browser, let's go and update that. So now we have the good button in the styles field and the bad button in the styles fields area. And if we go to our preview and hit refresh just guess what's going to happen. Which one's going to do what you want, which one's not refreshing. And look at this one. This one because we did not use aliases reverts back to the default styles. So you'll see in our fields JSON that the default color is white. This one, the good one while using aliases retained what the page editor has had used. So you have marketers the happy you're happy, everyone's smiling and you're amazing. Bye bye.
