﻿1 00:00:00,000 --> 00:00:03,200
(upbeat music) 2
- Hello everyone. 3
Chandler-Garcia 4
advocate here at Salesforce. 5
quick take 6
around using custom events 7
components and talk more 8
detail and value 9
pass data into our components 10
UI. 11
take those components 12
list where we can send data 13
pass the items 14
put them into a list. 15
16 00:00:38,130 --> 00:00:42,210
So in our previous video,
we created a publisher 17
18 00:00:44,338 --> 00:00:47,790
The publisher which fires a custom event, 19
the subscriber component. 20
next level, 21
components 22
to do list that sends items 23
subscriber. 24
go ahead and first go 25
HTML file 26
component 27
us to capture that item. 28
a simple label and name 29
use an on change handler 30
that event 31
32 00:01:25,220 --> 00:01:28,798
In our HTML we already declared
the handle change method. 33
that in our JavaScript 34
35 00:01:33,750 --> 00:01:35,630
We then want to add a property 36
37 00:01:39,830 --> 00:01:42,948
We're then gonna take this dot value 38
event dot target dot value. 39
way, 40
from the input field 41
42 00:01:54,560 --> 00:01:56,603
within our JavaScript file. 43
to do is go ahead and go 44
remove that hard-coded string. 45
assigned to the event. 46
with this dot value. 47
value from that input field 48
publish button 49
the field value 50
inside of our custom event. 51
this out in Salesforce. 52
in a message 53
and just click publish. 54
message that we've typed 55
received by the component. 56
you will see 57
we publish 58
received by the component. 59
look 60
those values together 61
within our subscriber 62
63 00:02:56,440 --> 00:02:57,890
The first thing we want to do is go 64
subscriber dot js file 65
item list. 66
instantiate this as an array. 67
push an item into it. 68
must use the track decorator 69
go ahead and import that 70
decorator 71
72 00:03:26,800 --> 00:03:28,890
Then in our handle message method 73
and remove that alert. 74
And then we can go ahead 75
76 00:03:39,100 --> 00:03:41,530
and then push in that detail value. 77
the array as an item. 78
we want to do 79
is enable the component 80
the list 81
populated. 82
is never null, 83
the array using a getter 84
there are items in the list. 85
return true. 86
87
conditionally showing our element. 88
file, we're gonna start out 89
here and just use a class 90
make it nice and pretty. 91
be putting those to do items 92
93 00:04:28,720 --> 00:04:32,200
Now, we're gonna use a template for each to
iterate 94
we have in our JavaScript. 95
just gonna set a property 96
value in 97
98 00:04:46,220 --> 00:04:48,360
Now that we've got our iterator there, 99
list item. 100
set the key