Lightning Web Components Specialist Superbadge (Partial) Walkthrough

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.