
Hello, and welcome to Another Salesforce Blog! Here I will be posting solutions to problems that I couldn’t find an answer to in hopes of helping those who find themselves stuck when using the Salesforce platform.
This is a partial walkthrough of the Lightning Web Components Specialist Superbadge on Trailhead. This Superbadge is required for the Salesforce Javascript Developer I certification, and requires familiarity with writing code for Salesforce in Visual Studio Code.
Disclaimer: this is not meant to be a full solution. I merely collected the resources I used as I went through the challenge. I do not have resources for all of the steps, as there is a significant amount of overlap in the last half of the challenge.
There is no shortage of full answers for the challenge on the internet, but this post is meant for folks who are learning Salesforce and would like to work through the solution with a few hints for the tricky parts.
Again, copying and pasting what is in this blog post will NOT complete the challenge.
Step One – Before you start
This one is easy. Install the managed package in your Trailhead org, get 500 points!
Step Two – Build the Boat Message Service channel
This one is also fairly easy, as the code is given. This requires creating a messageChannels
folder in your force-app\main\default
folder and creating a BoatMessageChannel
file with the following code:
<?xml version="1.0" encoding="UTF-8"?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
<description>This is a sample Lightning Message Channel for the Lightning Web Components Superbadge.</description>
<isExposed>true</isExposed>
<lightningMessageFields>
<description>This is the record Id that changed</description>
<fieldName>recordId</fieldName>
</lightningMessageFields>
<masterLabel>BoatMessageChannel</masterLabel>
</LightningMessageChannel>
All this step requires is copy and pasting this block into your new file and hitting the button.
Step Two Resources:
LightningMessageChannel in the Metadata API Developer Guide.
Create a MessageChannel in the Lightning Aura Components Developer Guide.
Step Three – Get BoatDataService class ready for action
Step three asks us to expose our Apex methods to Lightning using the @AuraEnabled(cacheable=true)
annotation to cache the method results on the client.
Step Three Hints:
Not all of the methods will be cacheable, so be sure to read the requirements.
Step Three Resources:
Call Apex Methods in the Lightning Web Components Dev Guide.
Step Four – Build the component boatSearchForm
Step Four Resources:
Combobox Component Reference in Lightning Web Components Component Reference.
Decorators in Lightning Web Components Developer Guide.
Maps in MDN Javascript Web Docs.
Step Five- Build the component boatTile
Step Five Resources:
Connect to Salesforce with Server-Side Controllers in Trailhead.
JavaScript HTML DOM – Changing CSS in W3Schools.
Create a CSS Style Sheet for a Component in Lightning Web Components Dev Guide.
Style Components with Lightning Design System in Lightning Web Components Dev Guide.
Step Nine – Build the component boatSearch
Step Nine Resources:
Button Component Reference in Lightning Web Components Component Reference.
Spinner Component Reference in Lightning Web Components Component Reference.

Thanks for reading, let me know if you have any comments or questions!
-Evelyn, Another Salesforce Blog

Make a one-time donation
Make a monthly donation
Make a yearly donation
Choose an amount
Or enter a custom amount
Help keep Another Salesforce Blog on the internet by donating today!
Your contribution is appreciated.
Your contribution is appreciated.
DonateDonate monthlyDonate yearly
One response to “Lightning Web Components Specialist Superbadge (Partial) Walkthrough”
[…] addition to completing all of the recommended Trailheads and the Lightning Web Components Superbadge, I took on Lightning Web Components projects at work and I worked my way through the beginning […]
LikeLike