(upbeat music)
- Hello everyone, I'm Stephan Chandler-Garcia.
A Developer Evangelist here at Salesforce.
In my last quick take, we talked about
how we can use data attributes to extend the HTML elements
within our lightning web components,
and then capture those attributes
within that JavaScript file of the component.
If you haven't had a chance to check out that video,
you can find the link in the description below.
Because today we're going to be talking
about expanding upon those data attributes,
and dynamically styling our components based
on the values that we've then added.
So, the first thing we're gonna talk about is
how we can use CSS selectors
that target those data attributes.
And then secondly, we're gonna talk
about querying the data attributes that are associated
to elements within our HTML template,
within our lightning web component.
And then modifying the styles from there.
So let's go ahead and get started.
Looking at where we left off on the last video,
we have our list of contacts here on the left,
and as we select a contact we can capture
that data dash ID of the element,
and then add it to the selected contact lists
just like we did in the last video.
Now, as I mentioned,
the first thing we're gonna do today is use
that data attribute as a CSS selector,
so that we can apply a style to that component
or to that specific tile that we want to highlight.
In this case each
of our contacts has a custom field called level,
and that level has a couple of different field values,
and in this case we're going to be looking
for that value of primary,
so that we can highlight those primary contacts
within our contact list.
Now to do that, we're gonna first need to go into VS Code,
and add a data attribute for that level.
So that we can merge in the context value.
And we're gonna call that data dash level,
and then add in contact dot level double underscore C.
And now that we've done that if we pop over to our CSS,
we can go ahead and I've already written two selectors,
but we're gonna go ahead and modify one of those.
We're gonna go ahead and take that red selector,
and we're gonna remove this selector
that I've already written, and we're going to replace
that with square brackets.
We're then going to add in our data attribute there.
So data dash level, and then we're going to add
in the value that we would like to add.
And in this case it's primary.
We can then go back into our component
and refresh the page as it loads, and there you go.
You can see that it's now highlighted,
those primary contacts based on that data attribute.
And it's a really good and cool and easy way
to style our components.
Dynamically, if we know that those values are going
to be exist or modified, as that data changes.
Because as those data attributes update and change,
the style will obviously change on the component.
Now you'll notice that when we click on one of the contacts,
the style doesn't apply to the selected contacts list,
and that's because we're not applying
that same data attribute to our list item
in that side of the component.
We're only applying it to our current contact list
that we have on the left hand side.
Now, let's talk about our second usage of data attributes,
and that's by querying the template
for those specific elements and
then modifying those classes associated to those elements.
Now, looking at our component as it stands,
when I select a contact multiple times,
we then get duplicates in the list.
So we're not doing any dupe checking there in that array,
we're just adding them into the array as they come and go.
And so let's go ahead and take a look at how we can do this.
Let's enhance it by first checking
that the contact has already been added to the list,
and then if it has, let's query for that element
that we've added the data attribute to,
and highlight it for the user to see
that it's already been selected.
And so we're gonna do that by first popping into VS Code,
and we're gonna scroll down to that list item,
that we have not modified yet.
That selected contact list item
and we're gonna add a data attribute
of data dash selected ID.
Just so that we can differentiate from that contact
that data ID that we're referencing in the first list
of current contacts, and we'll go ahead and merge
in the contact ID there.
And then let's go ahead and pop over to our Java script.
So in our Java script file here, we're gonna go down
to that handle click method,
where we're capturing the event,
and then we're gonna add a constant
for storing selected contacts.
Now in there, to get those selected contacts we're
just gonna go this dot selected contact records dot filter,
'cause we wanna find that contact within the selected list,
specify a single property, and then match that
on contact dot ID, and then check that that's equal
to the contact ID that we're setting
in the constant above this.
Next, we're going to write an if statement around
that selected contact to see if any were found,
that way if a contact was found we can go ahead
and add it to the list.
And if not, we can do
that highlighting that we were talking about.
And so if there is a contact we're gonna do something,
and then if there's not, we're gonna just copy
that this dot add contact to selected record list method
and then add it inside of our (indistinct), here we go.
And now we can look and focus on highlighting those contacts
when they're already selected.
So let's go ahead and create a method for that.
We're going to call this method...
Just highlight selected contact and
then pass in our contact ID.
And then there,
we're going to go ahead and set up a constant
for storing those selected contact elements
that we're gonna be modifying,
and we're just gonna say,
this dot template dot query selector all,
and then inside of that query selector
we're actually gonna use some template literals
to map out a query of the dome and that data ID
within our query selector.
And to do that we're just gonna say,
square brackets data dash selected ID, and then equals,
and then we're going to use our dollar sign to let us merge
in a property there, and curly brackets and then contact ID.
And then what that does is give us that template string
that will be generated when it's actually doing that query,
for us to then go and find all of the selected elements
within our template.
And we're gonna take those,
and we're gonna write a for each against them to iterate.
And so we'll go select contact elements dot for each,
and then we're gonna specify a single element and use
an arrow function to put that into our curly brackets,
and we're just gonna say element dot set attribute,
and the attribute we wanna set is class,
and that class we're going to update to SLDS dash item,
and then we're going to add in that class we wrote
around adding the shadow to the element and just say,
selected-item dash shadow.
Now, we don't necessarily want
to forever highlight this contact,
we only wanna highlight it for a short period of time.
So we're just gonna add a little set timeout here,
and then we're gonna go ahead
and then use narrow function once again,
and then once that timeout has occurred,
we're gonna go ahead and say,
element dot set attribute and then class,
and then we're gonna reset it back just to SLDS item.
And then once that's done we're gonna say,
we just wanna give it 500 milliseconds,
and then it will unhighlight the contact for us.
Just for a little catch, for clicking the contact
and then it just being highlighted
for a long period of time.
And so now let's go ahead and add that
into our if statement, and say this dot highlight
selected contact, passing the contact ID,
and then go ahead and save that, push it to the org,
and we should be good to go and go and test this out.
So let's go ahead and check out our results.
As we select on the first contact,
we can see it's added to the list,
and as we select it again you can see that instead
of adding it to the list like it was earlier,
it's validating that it isn't already there,
and if it is already there, it's highlighting it to let know
that that changes occurred.
And there you go.
There are two more ways that we can use data attributes
to really enhance our lightning web component development.
Thank you very much for checking out this quick take,
please like this video and subscribe
to the Salesforce Developers YouTube channel.
If you'd like to hear more from myself,
you can follow me on twitter@stephenwcg,
or catch me on email at stephan.garcia@salesforce.com.
Thank you very much and have a great rest of the day.