hello everyone my name is stephen chandler-garcia a developer advocate here at salesforce now this
video today is a first in a series of lightning web component fundamentals that we're going to
use to help give you a better understanding of lightning web component development as well as
maybe teach you a few tips and tricks that you didn't know about lwc's now we're going to start
out today by looking at javascript decorators but before we get into how they work within salesforce
let's take a look at them under the hood javascript decorators have been around for
a few years now however are still considered experimental generally speaking a decorator
is really a function that you can wrap around a class or a class element or other forms during the
definition of that component the official proposal for decorators outlines that decorators can be
used to replace a value that's been wrapped by the decorator to associate metadata with a value
that's been wrapped or to provide access to that value that's been decorated in a moment i'll break
down how these relate to lightning web components but before that it's worth noting that decorators
aren't really something that you will be writing yourself in a component or in an app they're more
frequently used to simplify a framework like lwc or angular by providing decorators for you to use
so javascript decorators are instantiated by annotating the at symbol and then passing in a
value you'll recognize this right away if you're familiar with writing lightning web components
but it's worth noting that you can also add a decorator to a method which can be incredibly
useful in order to get a better understanding of decorators let's take a look at how we write one
from scratch so i want to create a decorator that will transform the text that i pass into it into
all caps i'm going to call it the shout decorator and create a property like i'm shouting at someone
i'm going to create a function that just takes in the value and returns a function
that transforms it to uppercase the easy part is that all we really have to do is
then add the decorator to our property and pass in the value that we want to transform
now you could also ask me why this wouldn't just be a function and that would be a great question
to ask if i was writing this in a component i would just write a function which is why in
a lot of instances writing your own decorators are overkill so i'd suggest leaving them to the
frameworks to write for you so that you can just take advantage of the ease of that functionality
so now that we know more about how decorators work behind the scenes let's take a look at how they
work in lightning web components in this video we're going to take a look at the api decorator
and as we continue through the series we will look at the rest of them
so the api decorator allows you to expose a property or method as public
when writing lwc's it's definitely the most common decorator that i use in my development and
i'm sure you'd will as well when we think back to the definition of what a decorator is meant to do
this really covers the ability to provide access to something outside of the component so let's go
ahead and jump into vs code and see how we can take advantage of this decorator
so i've created two lightning web components to get us started
the decorator parent component and the decorator child component we're going to be starting out in
the decoratorchilds.js file the first thing that we need to do when using the decorator is modify
the component's imports to include api from lwc this will give us access to that decorator to use
this is taking the api function that's part of the lwc framework and exposing it through the
api decorator just like when we were writing our shout function and decorating the property using
at shout one of the most used functionalities of the api decorator is the ability to automatically
populate a property with the record id of the current record page if the component is on a
record page this is something that would be built into the api function behind the scenes
all that you have to do is ensure that you've written the property correctly
with the correct capitalization with the lowercase r and uppercase i and add the decorator at api
record id in the components.html file i've gone ahead and added some markup that will display
the value of the record id property whenever the component loads then to expose the components we
just need to add in our target pages in the meta js file of the component to make them available
so i've gone ahead and added the component to two pages
an account record page and a home page so let's pop into the org and see how they respond
first let's view an account record and here we can see that our component has populated
the record id that was taken from the page's context now let's go over to the homepage
and here you can see that the property is empty as there's no id assigned to the page that means
that the decorator is checking the page type before it tries to replace the value of the
record id property now let's take a look at another use case for the api decorator
exposing properties to the lightning app builder the first thing we need to do is add another
property to our component and we'll call this one message and we're going to add the decorator
now let's go ahead and go into our html and update it to include the message
here you can see we're just going to display it in the same way we're displaying the record id
and then lastly we need to update our meta js file to expose the property we just need to add in our
target config and then specify which page targets we would like the property to be available to
then we can add the property and assign it by its name we can enrich it by adding a label set the
type and then a description this is what will be exposing the property to the lightning app builder
now that this has been updated let's go ahead and take a look inside the lightning app builder
we can go ahead and edit the account's lightning page and this will open up the builder for us you
can then select the component and now view its properties here you can see that our message
field has appeared and brought over that label and description that we set so let's go ahead and put
something into the field and you can see that it's already responding in the ui but let's go ahead
and save the page and go back to our account here you can see that the message has been populated
so now let's go over to the homepage you will see here that there is no message
this is because the property is provided by the page that it sits on
that way you can provide different values to different page types so now that you know a
bit more about decorators and in this case the api decorator in salesforce you can go ahead and
take this to start building your own lightning web components and really understand what's happening
as that component is being compiled so keep your eyes peeled for our next video where we're going
to be taking api decorators to the next level and communicating between parent and child components
exposing properties and looking at how we can call methods on our child components through
that decorator if you have any questions please feel free to put your comments down below in the
comment box or reach out to me directly on twitter at stefan wcg and like always you can always
contact me at stefan.garcia at salesforce.com thank you for watching this video on javascript
decorators please be sure to like this video subscribe to the salesforce developers youtube
channel and click on the bell icon so that you can get notified each time that we post a new video