In this episode, we have a conversation with Alicia Teo about Custom Property Editors and how you can use them to create powerful user interfaces to configure your web components. Alicia started as an intern at Commerce Cloud while pursuing her MBA and is now a Product Manager for Experience Builder here at Salesforce.

On the Experience Builder team, Alicia makes creating websites quicker and easier for admins. Custom Property Editors enable developers to create components that are even easier to use than Experience Builder, leading to fewer user errors and fewer complaints.

Enjoy!

Show Highlights:

  • What custom properties are
  • The problem Custom Property Editor is meant to solve
  • The new lightning property types and their benefits
  • How to override the date time picker with a new more robust one
  • What needs to be done to a lightning web component to make it a Custom Property Editor
  • The possibility of reusing the code

Links:

Episode Transcript

Alicia Teo:
Okay. I think it’s because my dad was an engineer, and for me, engineering was not cool. So in college, I started political science.

Josh Birk:
That is Alicia Teo, a Product Manager here at Salesforce. I’m Josh Birk, your host of the Salesforce Developer podcast. And here on the podcast, you’ll hear stories and insights from developers for developers. Today, we sit down and talk with Alicia about custom property editors and how you can use them to create powerful user interfaces to configure your web components. But first, we’re going to kick off where we left off there with her early years.

Alicia Teo:
And then somehow after college, I ended up working in tech.

Josh Birk:
Got it.

Alicia Teo:
I was a consultant at Accenture, and then after that, I did product management at e-commerce startup. Somehow throughout my career, I’ve been always working in tech. And then when I went to do my MBA, I discovered that Penn offered a master’s in Computer Science for students with no CS background.

Josh Birk:
Oh, interesting.

Alicia Teo:
I knew I wanted to keep working in tech and I thought, “Since I’m going to be studying, I might as well study a little bit more,” so that’s why I signed up for that geo degree in Computer Science.

Josh Birk:
I love it. What’s your earliest memory of the computer?

Alicia Teo:
Earliest memory, I think I was like 12 and then my dad got one of the computers with the dial-up, so I had to wait for the dee, dee, dee, dee, dee sound to connect to internet, and then I would spend hours playing Neopets.

Josh Birk:
Really?

Alicia Teo:
Yeah. Back in the day, yes.

Josh Birk:
Nice. I love it. I love it. When did you first get introduced to Salesforce?

Alicia Teo:
I think it was when I was looking for internships during my MBA.

Josh Birk:
Okay.

Alicia Teo:
I was looking for job postings and I saw a posting for internship at Commerce Cloud. And since I had previous e-commerce experience, I thought, “Oh, this is a fun space. It could be something that I could do.” So I applied, got an interns there, loved the experience, and I’m back again.

Josh Birk:
Nice. How would you describe your current job at Salesforce?

Alicia Teo:
Right now, I’m a Product Manager for Experience Builder.

Josh Birk:
Okay.

Alicia Teo:
So my job is to make creating a site quicker and easier for our admins and our developers.

Josh Birk:
Got it, and I think that kind of bleeds well into our topic of the day. What’s the elevator pitch for custom property editors in general?

Alicia Teo:
The quick pitch is it enables you, the developer, to create a component that’s much easier to use in Experience Builder. So, less user error from the users, less complaints, which is what we all want.

Josh Birk:
Gotcha. Let’s define property editor itself. What’s the noun that we are customizing here?

Alicia Teo:
Property editors are what admins see in a property panel where the admin is configuring the component in Experience Builder or LAB, or Lightning App Builder. Sorry. No acronyms. Yes.

Josh Birk:
Thank you for catching me. My brain actually did a little bit of a somersault there, and I know I’ve put LAB into a slide at some point, so I gotcha. So to wrap that together, it’s like when you’re saying building sites easier, you’re looking at the interface that admins are going to use to customize the portions of a Lightning Web Component a developer has created, and being able to control those property editors means that the admins get a more rich experience and more ability to customize their site. Is that a decent paraphrase?

Alicia Teo:
Yep, that’s a great paraphrase.

Josh Birk:
Was there a specific problem that led us down to this path? Was there one thing that you were just trying to solve or was this just like, “Let’s make a more rich experience?”

Alicia Teo:
I think the problem is as a developer, you want to create an LWC that’s really configurable so that it can be used everywhere on multiple sites, on different types of different places. But the more configurations you build, the more the out-of-the-box property panel starts looking really long and then gets really complex to configure. So then that’s this tension, making it configurable versus usable.

Josh Birk:
Right.

Alicia Teo:
With custom property editors, now you shouldn’t need to choose between these two worlds.

Josh Birk:
Gotcha.

Alicia Teo:
You have a way to break out of this trade-off.

Josh Birk:
Nice. Because that was one of the interesting things, and it’s a podcast where I’m going to try to get people to visualize things a little bit, but since it’s a Lightning Web Component, you have control over that UI so you can use things like accordions and tabs to clean up that property panel, right?

Alicia Teo:
Yes, and you can do things that are more visually rich, like a button or radio buttons or modals. The world’s your oyster. Now, any LWC can be the property editor.

Josh Birk:
Love it. Before we talk a little bit more about the custom LWCs, there’s another layer to make sure people know about.

Alicia Teo:
Yes.

Josh Birk:
You have new properties themselves? Is that the right way to put it? Tell me a little bit about the new Lightning properties.

Alicia Teo:
Yes. Yeah. With new additional property types, in the past, as a developer, when you’re defining a property in the js.meta.xml file, you could use five types for Experience Builder. You had the option of modeling a string, integer, boolean, content reference, or color. Now we are providing you with a whole bunch of additional new types, and there’s two main benefits to this. One is that you can model your property more precisely. Now you get the access to a boolean type or a date type or a URL type, and this gives you more specificity and control in your component. The second thing is all these types also come with a default property editor.

Josh Birk:
Gotcha.

Alicia Teo:
So let’s say if you use light type equal, so lightning date type, you don’t need to build a custom LWC that acts as a date picker.

Josh Birk:
Nice.

Alicia Teo:
You get a date picker out of the box, and it just saves you time and gets you building much more quickly.

Josh Birk:
Nice. And I love that, because back in my workshop days, I used to expound how great custom fields were because we go past that primitive data type and it’s like we have a URL type of field for a reason. We know what a URL is supposed to look like. Why don’t we just behave accordingly? So it kind of sounds like we’re getting that back up to that speed. Okay. Then let’s get into building out the custom Lightning Web Components themselves for this. First of all, if I want to override your date time picker, can I use that as a starting point or do I just override it completely?

Alicia Teo:
Yeah, you need to override it completely.

Josh Birk:
Okay.

Alicia Teo:
So you can do type equals to what lightning date type and then you can have an editor override.

Josh Birk:
Got it. Is there something special I need to do to a Lightning Web Component to make it say, “Hi, I am a custom property editor”?

Alicia Teo:
Yes. In the js.meta file in the target, you need to specify that as a property editor.

Josh Birk:
Gotcha. And are there limitations to what I can do in a Lightning Web Component or is it just broad guidelines knowing this is a Lightning Web Component that’s going to be exposed in this one portion in Lightning App Builder?

Alicia Teo:
Yeah, I think it’s just broad guidelines. Keep in mind that it’s going to live right now only in Experience Builder, so keep in mind the size of the frame.

Josh Birk:
You don’t get the whole page to update your daytime field, basically. Yes. Nice, nice. Give me a couple of use cases here. Walk me through an example where building out this custom property editor really helps the experience in Experience Builder.

Alicia Teo:
Common requests I hear is, for instance, for text alignment. Before custom property editors, you model this as a string and then you have a dropdown feel. But now with custom property editors, you could have something more visually rich. You could have the combo icon boxes and you could have text alignment left, middle, right.

Josh Birk:
Gotcha. Nice, nice. How does this change the game when it comes to being able to reuse this code? What’s the delta here between what I used to have to do and what I can do once I’ve created a custom property editor?

Alicia Teo:
I think in the past, you couldn’t even create a custom property editor.

Josh Birk:
Okay, that’s fair.

Alicia Teo:
And now you can. But you do bring up a good point about reusability, because besides custom property editors, we’re also allowing our developers to create custom property types and that plays into the reusability aspect. So now, let’s say you have a group of property site for borders, for instance, like border style, border thickness, border radius, and then you realize a whole bunch of your components all need them.
So what you can do is create a custom property type that models these properties, and maybe you could have added overrides for these broader properties too. And for all your components, you can just say now, “Okay, my banner is referring to my custom border property type. My button is referring to the same custom border property type, and all my other components can all refer to this one custom type.”

Josh Birk:
Got it.

Alicia Teo:
And in the future, if you want to make updates to your border type, you can just make one update and all your components get updated.

Josh Birk:
Got it. I’m looking at a Figma, right? If I’m looking at a layout that I want to reproduce in Lightning Web Components, you’re giving us two levels then, right? I could look at all the common elements my components are going to need, wrap those into custom property types, and then look at all the portions that I want the admin to be able to individually update and throw those into a custom property editor. Is that the world we’re living in right now?

Alicia Teo:
I would think of the editor as providing the UI, and then you would create a type if you want to reuse a whole collection of things.

Josh Birk:
Right. Gotcha.

Alicia Teo:
So you could have multiple custom property editors within your custom property type.

Josh Birk:
Got it.

Alicia Teo:
And it just makes reusing it way easier.

Josh Birk:
Right. What’s on the roadmap for this? What’s the future look like?

Alicia Teo:
Yes. In summer ’23, we’ll have a beta for LWCs in Experience Cloud LWR sites. And for the release after that, we are planning to enable custom property types and editors for LWCs used in Aura sites.

Josh Birk:
Oh, nice.

Alicia Teo:
The use case for that is I know lots of our partners build LWC components for both Aura and LWR sites, and they want to be able to reuse these components.

Josh Birk:
Right, right. It goes back to, I remember having a conversation with a colleague. I said, “Well, why don’t we have a Visualforce booth?” and I was like, “Well, why do we need a Visualforce booth?” And they’re like, “Because lots of people are still using Visualforce,” so we don’t like taking away your toys, everybody.

Alicia Teo:
Yes, and we’ve heard your True to the Core feedback and that’s why we’re bringing it to Aura.

Josh Birk:
Is there anything else on the roadmap that we’re looking at, like any current limitations we might be trying to remove?

Alicia Teo:
Yeah. We talked about three main pieces of functionality, like custom property editors, the new types, and then custom property types. Custom property editors and types of solid packaging works, crowd works, they work with all the VS code extensions. What we want to enhance is custom property types. Right now, you can create and delete a custom property type, but not update them, and that’s what we want to bring in the future when we make custom property editors generally available.

Josh Birk:
Where can people learn more about this?

Alicia Teo:
We have a quick start guide. Right now, we have the developer preview documentation out. Once the summer releases out, we’ll also have the beta documentation for summer.

Josh Birk:
Got it. And I guess I should actually reframe that. This is currently generally available?

Alicia Teo:
Okay. In spring ’23, we have a developer preview, and then in summer ’23, it’s going to be an open beta.

Josh Birk:
Tell me a little more about the quick start itself. What can people do, and are there actions they can do after taking the quick start in Trailhead?

Alicia Teo:
We have a quick start guide. I can give you the link.

Josh Birk:
Okay.

Alicia Teo:
They can download it.

Josh Birk:
Perfect.

Alicia Teo:
And this gives them a package of components that has a custom property type, custom property editor, so that people can see how to use it. And then the guide also explains the package.

Josh Birk:
Got it.

Alicia Teo:
I would love if people downloaded it and gave me feedback in the Experience Cloud Trailblazer community.

Josh Birk:
Nice. Well, and I would think that this is another “people talking about how they’re using this will only help other people figure out how they can use it” kind of thing, so the Trailblazer community would be great for that.

Alicia Teo:
Yes, and I’m on it, so yeah.

Josh Birk:
Got it.

Alicia Teo:
Feel free to call me out or report any bugs or issues.

Josh Birk:
And speaking of communicating and where people want things to go, where do you see Lightning App Builder itself going with this?

Alicia Teo:
Yes. I would love to bring custom property editors and types with the same mechanism to Lightning App Builder. If you want it too, please keep voting out those idea exchange points and keep bugging your Salesforce reps. We want to get there.

Josh Birk:
I love it. I love it. And that’s our show. Now, before we go, I did ask after, Alicia’s favorite non-technical hobby. I’m going to give you a hint. If you listen to Greg Whitworth’s recent episode, it’s the one we’re both scared of.

Alicia Teo:
On weekends, I like going rock climbing.

Josh Birk:
Really?

Alicia Teo:
I feel like it’s a little bit like problem-solving too. You have to look at the rock and then figure out the best and most elegant way of solving it.

Josh Birk:
Right.

Alicia Teo:
And it’s a great mental and physical challenge. Also, I’m a little bit afraid of heights, so that adds to that side.

Josh Birk:
Wait, what?

Alicia Teo:
Yes. Yeah.

Josh Birk:
I want to thank Alicia for the great conversation and information, and as always, I want to thank you for listening. Now, if you want to learn about these topics and this show, head on over to developer.salesforce.com/podcast where you can hear old episodes, see the show notes, and have links to your favorite podcast service. Thanks again everybody, and I’ll talk to you next week.

 Get notified of new episodes with the new Salesforce Developers Slack app.