(upbeat music)
- Welcome to this developer quick take,
on Lightning message service
in Lightning web components and Aura components.
My name is Peter Chittum
and I'm a developer evangelist at Salesforce.
In this short video, I'm gonna walk through
how we implemented Lightning message service
in Lightning web components and Aura components
in the LWC Recipes sample app.
Let's go take a look.
Now for LMS in Lightning web components,
we're doing imports from ES6 modules
in order to get access to the LMS features.
So, on the first line of code there
you can see where we're importing the subscribe
and publish functions along with message context,
from the Lightning message service module.
And the message channel itself is also an import
from the, @Salesforce space.
For LMS in aura,
there's a simple markup tag that
actually represents the message channel component.
And there are just a few attributes that you set.
If your component is a subscriber,
you'll use onMessage to identify the element handler
for when a message is received.
And then there is a scope and a type attribute.
The type attribute, is of course the thing that points
to the message channel that you want to either,
subscribe to or publish to from this component.
As I said, we're gonna be looking at the implementation
of Lightning message service and the LWC Recipes app.
The recipes app is one of our sample apps
that the developer relations team maintains.
And you can actually find them
at trailhead.salesforce.com/sample-gallery.
So this is the LWC Recipes repo.
And if you have want to take a look at any of these examples
there are instructions for installing them here.
The actual Lightning message service implementation,
is found on the "Message Service" tab,
once you stand up the app and start running it.
The three publishers up above,
publish to a message channel,
when one of the contacts is selected from the list.
The subscribers down below,
are listening on that same message channel.
They receive the message
and then load the contact record that was selected.
And again, in this video,
I'm just going to focus on the Lightning web components
and Aura implementations.
Here you can see the actual message channel
that we're implementing.
If you're not familiar with Lightning message service,
the API name of the message channel,
is just gonna take the file name.
Here, Record_Selected
and it will append on __c
on the end of it,
when we see it in code.
That's actually the only thing
that is referenced checked when we save this to the org.
None of the other metadata here will be referenced checked.
In the Lightning web component,
in the markup itself on the publisher,
the key thing that I want to draw your attention to here,
is the oncontactselect event here,
with the handleContactSelect event handler.
It's this event handler,
that's going to actually publish the message
that we're going to send to LMS.
Of course, the actual code that matters,
in a Lightning web component is in the JavaScript.
In that JavaScript, you can see the imports
that we're doing here
for the features we need from the messageService.
In this case we have the published function
and the MessageContext.
And then of course the message channel itself,
is gonna be imported as well.
The message context is implemented with a wire adapter.
So message context gets used here.
And the nice thing about that is,
anything to do with the life cycle
of your LMS implementation,
is gonna then be handled
in sync with the life cycle of the component.
So, anything that needs to be destroyed or detached from
it'll take care of that for you.
Now, as we said
we have the event handler handleContactSelected.
We create a payload for that.
And then we pass that into the publish function,
along with the messageContext
and the message channel that we're going to publish to.
So pretty straightforward as far as APIs go.
So let's go take a look at the subscriber.
There's really nothing to see in the case of the subscriber.
There's nothing in the markup itself,
that is relevant to Lightning message service
I just wanted to point out that this is a fairly
straightforward lightning card implementation.
And of course we need to populate certain values
from the database for the selected contact record.
And how that's gonna take place,
is if we take a look here at the subscriber JavaScript
again we have our imports, from messageService
in this case, we're getting the subscribe function
and there's our message channel.
Now this particular
Lightning web component, is subscribing
is as part of the connectedCallback lifecycle event.
So, once we add this component to the Dom,
connected callback will be invoked,
that'll invoke subscribeToMessageChannel,
and that in turn calls subscribe.
We're gonna set that subscription into a local property
and then we identify, of course the messageContext,
the message channel and an event handler for that.
You can see right there,
that simply takes the record ID
and assigns it to a local property.
One thing to note,
is that, by using the wire adapter for message context,
in the context of a subscriber,
the subscription itself will be unsubscribed
when the component is destroyed.
So, the wire adapter wires everything to do with LMS up to
the lifecycle of the component again here.
But the nice thing is,
I never need to invoke unsubscribe,
when I actually tear down my component.
Let's go take a look at the aura components now.
As we saw, the aura implementation
is simply the lightningMessageChannel tag.
And anytime you have that with LMS,
of course, the key thing that you have to have is
what's the message channel that you're going to be using.
In this case, this is our aura publisher.
So all we have to do is identify the message channel itself.
And then down here in the markup of the component,
we have the handler that's gonna actually invoke
the publish call.
So there's that handleContactSelect
and just like we saw in the Lightning web component,
we construct the payload
and then we call publish and pass that payload into it.
Let's go take a look, at the subscriber.
Again, there's the lightningMessageChannel tag,
and there's our message channel we're subscribing to.
In this case, because we're using onMessage,
that's the thing that's gonna tell us
that this is actually a subscriber.
Let's go take a look and see what happens on onMessage.
So here's handleMessage, that's our actual event handler
and this has actually nothing to do with LMS.
I just thought I would show it because,
you know, obviously, what are the kinds
of things that you would typically do with LMS?
Well, one could very well be,
take some data that has been passed over LMS
and then go and retrieve some data from somewhere else
either the Salesforce server
or maybe some other integration.
So, that wraps up all of the code,
related to lightning message service
in Lightning web components and Aura.
I've been talking about Lightning message service
at a fair amount of developer groups.
As part of that work, I've put together some content
that I want to share with the community.
This particular PowerPoint presentation
contains a lot of the slides and a lot of the figures
I've been using to talk about Lightning message service.
In addition to that,
there's one slide in particular here, I'm just gonna go to.
So slide number 14 has a bunch of links
to different resources, different code, samples
and also to Trailhead modules
that use Lightning message service.
So if you're looking for different ways to use
and implement features using lightning message service,
go take a look at this presentation on slide share,
and hopefully that'll help you out.
I hope you found that useful and helpful.
And if you did, please make sure to click like down below.
And of course, make sure you subscribe
to the SalesforceDevelopers, YouTube channel
and click that bell to get notifications for new videos.
Thank you.