Winter ’19 introduces a new component, lightning:empApi, that lets you easily receive streaming events directly in your Lightning Components. Another new feature that comes in Developer Preview in Winter ’19 is Change Data Capture. What’s best than doing a demo component to test these 2 new features ?
Change Data Capture
Change Data Capture is a really powerful feature that will send notification everytime a record is created, updated, deleted or undeleted. This is very handy to keep data consistent across all your applications. No need anymore to setup Workflows, Process Builder or Triggers, this comes out of the box for just one click.
You activate Change Data Capture per sObject directly in Setup:
So far all custom objects are supported, however only a subset on standard objects are, have a look here to get the whole list.
Note: At the time of writing, Change Data Capture is still in Developer Preview. When it goes GA, have a look to the updated list of supported sObjects, limits and pricing.
To test my component, I activated it in my Scratch Org for a standard object and a custom object.
Using the component
The code of the component is available in my GitHub here:
Once you’ve added the component to your org, just go to the record page of your object (if you’ve activated Change Data Catpure for Account, let’s do it on the Account page), edit it in App Builder and add it to the page.
Don’t add it inside a tab as these are lazy loaded, the component would not be loaded if you don’t click on this specific tab (and thus notification wouldn’t work).
That’s it ! Next time someone else modifies the record you’re viewing, you’ll see a notification like this at the top of the page:
How it works
The component markup is pretty basic, the only thing to notice is the use of lightning:empApi component:
The controller is a little bit longer, but don’t worry, nothing groundbreaking here:
The key things to highlight:
line 5: getting the empApi component in JS Controller:
line 7 to 18: getting the channel to subscribe to. According to the documentation, the channel to subscribe to get notifications is not the same depending whether it’s a standard object or a custom one.
For a standard object:
For a custom one:
So handling this quite easily thanks to force:hasSObjectName :
line 20: setting the replay id. I’ll use the text from the documentation as I find it perfectly well written to explain it:
Indicates what point in the stream to replay events from. Specify -1 to get new events from the tip of the stream, -2 to replay from the last saved event, or a specific event replay ID to get all saved and new events after that ID.
line 22 to 43: this is the main part of the component, this callback function will be called everytime we receive a notification.
As you noticed in the Change Data Capture settings, we just activate it per sObject, so we will get a notification per sObject, not only for the record we’re viewing.
Here I’m just checking that modified record is the one we’re viewing, and that it was modified by someone else.
line 45 to 51: error handling
line 54: subscribing to the event
As you can see, the code is pretty straightforward, most of it comes from the documentation, I just had to link it to a record and write a callback method. Super easy !
If you take a look at the event received, you can see that it contains several interesting information:
This is just a demo component, but it could easily be updated to display more information from the event payload, like who modified the record, what was modified and when, or set a different message if the record was deleted.
Technically, the page could even be refreshed to display the updated data, even if from a UX perspective that would not be a great experience.
I’ve also heard at TrailheaDX about a pilot feature called Lightning Live Records that would do just that out of the box, pretty nifty! :) Have a look to this session replay if you’re interested.
If you have any question or feedback, feel free to reach out to me in the comments or on Twitter: @FabienTaillon.
Nous utilisons des cookies sur notre site internet pour vous proposer une navigation fluide en mémorisant vos préférences à chaque nouvelle visite. En cliquant sur “Accepter”, vous consentez à utiliser tous les cookies sur le site.