Passing the Lightning Web Component Super Badge is not the easiest thing you meet in Trailhead. Today we want to briefly discuss some lessons and tips learned from JET BI’s developers from the encounter with this super badge. Let’s start.
First of all, the tool that checks the code to see if it complies with the challenge conditions is pretty picky. It takes a fair amount of time to review an application to ensure that everything matched the challenge's exact specifications.
Here are some interesting points you might run into during the challenge:
- Lightning Web Component Message Service;
- Wire Service;
- Allowing admins to configure your Lightning Web Component.
Lightning Web Component Message Service
In this diagram, you are able to see the main difference between Custom Event and LMS.
Use Lightning message service to communicate across the DOM between Visualforce pages, Aura components, and Lightning web components, including components in a pop-out utility bar. Below you can see implementation LMS in your code:
To learn more about LMS read this: Lightning message service documentation
Wire Service
Reactive wire services are used by Lightning web components (LWC), which are based on Lightning Data Service. Components call the apex controller server-side functions using wire services and read data from one of the wire adapters in the lightning/ui*Api modules using @wire in their JavaScript classes.
Reactive variables with the $ prefix are supported by the reactive wire service. The wire service requests new data whenever a reactive variable changes. To learn more about wire service read these articles:
But even here there are pitfalls, to properly use refreshApex() function you need to be aware about this moment: Many people misunderstand the documentation, but in essence, you should store the complete wire response and use refreshApex on that instead. The destructuring technique is typically displayed for a wire method, however to use refreshApex, you actually need to store the original parameter.
Then, when you want to refresh:
Allowing admins to configure your Lightning Web Component
When developing apps, it is frequently necessary to have a debate about how configurable we can make something to prevent future maintenance problems. This permits administrators to make secure production-level modifications without having to advance additional code and configuration changes up the stack, which lengthens the time it takes to launch feature updates. However, how is this implemented in a web component?
In the code below you can see a simple implementation of Javascript file to LWC component:
And Js-meta.xml file to LWC component:
To learn more about XML Configuration File Elements read LWC reference configuration tags documentation.
Here is a list of other items that you will encounter on your super badge journey:
- Use Salesforce Lightning Design System (SLDS) in functional Lightning web components.
- Convert Visualforce pages into a solution using Lightning Web Components.
- Surface Lightning web components in Lightning App Builder, Lightning Experience, and a Lightning application.
- Empower Admins to configure your custom components.
- Create and invoke Apex methods to read data from custom objects.
- Use component events and public methods to enable communication between tightly coupled components.
- Enable communication between loosely coupled components.
- Use Lightning Data Service to read and write custom object data.
- Customize and use external JavaScript in a Lightning web component.
- Troubleshoot your JavaScript code.
- Describe how to test Lightning Web Components.
- Import, export, and extend modules.
We hope these simple tips help you pass the LWC super badge successfully. Wish you good luck on your way!
