(upbeat music)
- Hi, everyone, I'm Stephan Chandler-Garcia,
a developer evangelist here at Salesforce.
Now, one of the most common questions
I see asked around the internet
when it comes to developing lightning web components,
is the ability to capture information around
a button that was clicked
or an element that was just selected in our HTML,
and maybe capture that information in our JavaScript.
Now, today I'm going to be talking about data attributes
and how they can help you solve that problem.
So, first let's go ahead and take a look at this scenario
that we're trying to solve for today.
Here, we have a list of contacts
that have been organized into tiles,
and each tile is part of a list item,
when I select on the tile,
there's an onclick that's triggered
and that event is captured in our JavaScript file,
but we're not doing anything with it yet.
I'd like to be able to take that selected contact
and add it to that selected contact list
on the right hand side of the screen.
Now it's important to note that when you capture an event
from that onclick,
you're pretty much capturing that entire HTML element
that may be in this case list item
or that div id it's classes, maybe it's value
and taking that information
and then you're getting that in your event
and you can take that and manipulate it as you wish
in your JavaScript.
Now let's go ahead and add just that standard ID.
So let's go ahead and add a div id to this,
or in this case, the list item ID,
and just call it ID and then say equals contact dot id
and capture the contact ID in that iteration there
and pass that into our HTML.
So let's go ahead and go back into our LWC
and refresh the page there.
And as that loads,
let's go ahead and inspect the list item
and check out our results.
So here we can see it has passed in that ID
and we have our div id there,
but it's not the ID that you'd be expecting.
It's a Salesforce ID that has
a number appended onto the end of it.
In this case, it's - 29,
and that is done through the lightning runtime.
It relies on those ID attributes of your HTML elements
to orchestrate that lightning experience really
thus makes them unusable for us.
And so in this case,
we can't actually rely on those IDs
because we don't know what number or what characters
are going to be appended on to the end of them.
So that's where data attributes are gonna come in
and save the day.
And those data attributes allow you to apply
custom attributes that you specify to that element.
And they just start out with data
and then dash whatever you like,
it could be data dash ID, data - email,
data - name,
really anything that you can think of
or add onto that element
you can using those data attributes.
In this case, let's add data ID equals contact ID
and just for fun, let's go ahead
and add data dash email equals contact dot email.
Now what about data dash contact
and maybe pass in that entire contact object?
Well, it doesn't work that way
because data attributes must be strings.
and so you can pass in the contact,
but it won't render as that contact details in that element.
You could maybe stringify the contact
and pass that as a string into the element,
because there isn't really a limit on characters
in your data attributes.
But to be honest,
you don't really wanna be exposing that much information
into your attributes because they are available by anyone
inspecting your markup or your HTML in there.
And so let's go ahead and inspect that
and there you go.
We can see it's added our data attributes or ID
and our email there into the element.
That way, when that onclick is fired,
we kept that element and we can capture that ID and email
in our JavaScript file for use.
In this case, we wanna add that contact to the list
and so let's go ahead and go into our JavaScript.
And the first thing we wanna do is modify
our handle click method
that we're calling in our onclick.
Let's go ahead and set up a constant
for that selected contact ID
we'll just call it contact ID.
Let me say equals and then event dot current target
that we're targeting that specific element that was clicked
and then dot dataset to instantiate those
data attributes dot id.
And that will give us that ID right from the element
into our constant.
And so now let's go ahead and let's push that contact ID
into our add contact to selected record list method.
Let's go ahead and put our contact ID there
and we're just gonna pass the ID into method
to obstruct that functionality
from this actual onclick handler here.
And so in there though,
let's go ahead and set up a constant
for our selected contact
because we wanna search through those contact records
and find the right contacts based on their ID.
And to do that,
we're gonna use a really cool JavaScript feature
called filter.
And so we're gonna say this dot contact records dot filter
and filter is gonna let us specify a property
for a single contact through the iteration.
And then we can then match that contact dot id
to our contact ID that we're passing in.
And it will return that list of contacts
that were matched using the filter.
So then we can go ahead and take our property
for selected contact records,
and we're going to take that
and we're going to concatenate it to those results
and so we just wanna put in selected contact here.
And so it's important to know that
when you have results coming from a filter,
they're always expressed in an array
because there could be multiple matches on that filter.
So let's go ahead and push that to our org
and refresh the page and check out the results
and there you go.
We're clicking on the element and taking that ID
and passing it to our JavaScript file
and then using the filter to find the matching contact
and adding it to the list
and that's what then allows it to update on the UI.
And so hopefully you've learned a little bit about
data attributes today
and how you can use them to capture information around
those elements that are clicked.
In a future Quick Take we're gonna be going through
some advanced usage of data attributes,
but hopefully this will help inspire you
and help you solve some of the problems
you may have been facing.
Thank you very much, everyone for checking out this video,
please subscribe to the
Salesforce Developers YouTube channel for more Quick Takes,
and please like and share this on your social channels.
If you'd like to interact with myself,
you can follow me on
twitter @stephanwcg or find me on email at
stephan.garcia@salesforce.com
Thank you very much for checking out the Quick Take
I'm looking forward to sharing more
exciting content with you.
Thanks everyone.